UX & Axure RP 8 - Training Session 2021

UX
& Axure RP 8
Training Session
Date: 20 Aug 2021
Presented By: Ibrahim Ibrahim – Project Manager

What is User Experience?
 User Experience (UX) involves a person's behaviors, attitudes, and emotions

about using a particular product, system or service
 User experience is dynamic as it is constantly modified over time due to
changing usage circumstances and changes to individual systems as well
as the wider usage context in which they can be found.
Fundamentals of User Experience
User Research or Personas
 Personas, which are representative imaginary characters, are the best way
to define the mental models of diverse user profiles and predict their
expected behavior on user interfaces.
 Good design begins with a complete understanding of user’s needs and
the tasks they wish to perform. User research coupled with informed analysis
is the natural starting point for any website or application improvement
project.
 By considering each persona’s expected behavior on user interfaces, their
mental model is mind-mapped. In this way the high-priority content
requirements for each persona are identified.
User Persona Example
Information Architecture
 Information Architecture focuses on designing an efficient user experience

for the interfaces needed. Designers concentrate on user-centered design
principles, matching the user’s needs with clients' strategic goals. Based on
the business goals and user needs, designers organize your content and
user interaction creating an intuitive User Experience.
 IA Services:
 Sitemaps
 Use Cases
 User Flows
 Wireframes
 Functional Specs
Interactive Design
 At this step interaction between the user and the product is designed.
 The goal is to create a holistic, brand-centric user experience that appeals
to your audience. Designers work with clients' design team to understand
and apply the current design direction. The design deliverables are
visualizations, demonstrating the overall user interface and interaction
structure within the user experience. If well defined, use cases and flow
charts form a perfect basis for interaction design.
Usability Testing
 User research prepares designers to organize a formal Usability Test, giving

clients the opportunity to collect deep, individual data, validate that
designs meet priority needs and identify areas of improvement. Usability
testing uncovers real pointed issues.
 The Usability Report contains high-level architectural observations along
with suggestions for UX improvements. The report is from the viewpoint of
the person using the site. It is generally organized with one slide per task.
 It contains screenshots of the site with arrows and text fields describing
testers’ comments or issues, or our observations.
Summary: Where UX lies?
Axure RP 8
What You Will Learn In This Session
 What is Rapid Prototype

 What isn’t a Prototype
 What is Axure RP
 Examples of Axure RP Prototypes
 Tips Before Prototyping
 Axure RP Environment
 Getting Started with Axure and Using it
What is Rapid Prototype?
A prototype is a functional sketch. A good prototype
should have most or all of the functionality of the following:
Wireframe
Annotations
Site structure (or sitemap)
Interactivity (at least navigation)
A good prototype should help you tell the story of how

your proposed design would look and function.
What isn't a Prototype?
Don't get too carried away when creating prototypes,
they're a lot of fun but some things don't belong in
prototypes:
 Actual content (use placeholder text and images where

possible)
 Database connectivity (this would just be silly--but if you
want to make this work, feel free)
 Unnecessary fidelity (the more fidelity you have, the
harder it will be to come up with better ideas than the
ones you have right now.)
What is Axure RP?
Axure RP is Rapid Prototyping software (hence the RP).

It lets you create high (or low) fidelity interactive
prototypes for websites and mobile apps without
programming anything.
Examples of Axure RP Prototypes
Before You Start a New Axure Project
Make sure you have some idea of what you want to build!
You're going to want to have some idea of the following
before you begin:
 Sitemap - the navigation organization of the site
complete with labels for navigation links
 Wireframes - these can develop as you're working in
Axure, but you probably don't want to jump into
prototyping without at least some idea of what you'll be
doing
 Site Features - Again, these will change over time, but it's
best to start with some idea of what features the site will
have and what interactions will be possible.
Axure RP Environment
1. Main Menu &
Main Toolbar
2. Canvas
3. Pages
4. Libraries
5. Masters
6. Inspector:
Includes 3 tabs:
i. Properties
ii. Notes
iii. Style
7. Outline
Create a New Axure RP Project
 File > New (OR ⌘N on Mac OR ctrl + N on PC)
 If you know your site structure (sitemap), now is a good

time to add it to the project. To do this, slow double click
on the items in the sitemap area to change names, then
add children or siblings by right clicking on page names.
Getting Started
To add elements to a
page, just drag them
from the "Widgets"
panel (on the left)
into the active tab.
Elements – Set 1
Users can resize, format, color, and customize the elements
using the tools in the menu bar
Elements – Set 2
After generating the wireframe, users can use fields and fill
it as real websites
Elements – Set 3
 Axure RP includes a big collection of
icons that are similar to Font
Awesome icons.
 Other libraries can be imported to
Axure RP if needed, such as importing
Material Design icons, iOS icons,…
Elements – Set 4
 iFrame: allows you to show another
website in an area on your prototype
 Dynamic Panel: allows you to set up

interaction areas that can respond to
different things the user does (click,
mouse over, etc.)
Elements – Set 5
 Flow Diagram: Use Axure RP to make flowcharts, business process
models, and other flow diagrams. Add shape, image, and snapshot
widgets to serve as flow elements, and then use the "connector" tool
to draw smart lines between them.
Masters
 Masters are collections of elements that are used on multiple pages (or
all pages)
 Masters are great for headers and footers. You can make masters out
of any elements.
 Masters are like containers to keep reusable elements in. When you
change an element like a link or text area in the master, it will change
on all of the pages the master is applied to.
 If you need to make changes to something in a master, just double

click on the name of the master in the "Masters" panel and it will open
in a new tab. Changes you make to the master will apply everywhere
the master is used which is awesome.
Dynamic Panels
 Dynamic panels change based on different cases.
 You can set dynamic panels to one case or another

based on different actions.
 Dynamic Panels can push/pull widgets if their states are fit

to content
 Objects can be pinned to browser after converting them

to a dynamic panel (Ex: Header, pop ups…)
Link Pages
 Add "OnClick"
events to all of
the navigation
links . This time,
instead of
setting a panel
state, you'll be
opening a link.
Page Formatting
 You may want to add a background
image behind your prototype, change
sketchiness, make your prototype black
and white, or change how it is aligned in
the browser window.
 To make these changes, you'll need to

edit the page formatting in the Page
Style Editor window.
Adding Notes
 Notes will make your prototype more
useful for users. Keep in mind who will
be looking at your prototype when
adding notes.
 To add a note, select the element you
want to annotate. Select the note
(next to the lightening bolt) in the
"Widget Properties" panel on the right
of the screen. Then fill in whatever
other information you want.
Hosting the Prototype on a Server
 Navigate to the location of your prototype's root folder.
Look at the URL for your generated prototype for help
finding this folder. On a PC, this will likely be:
C:\Users\yourname\Documents\Axure\ProjectName\
 This folder contains all of the components of your Axure

prototype. Place it on your server to host the prototype.
 You can also host on Axshare Server which you can have
access to it after logging in Axure
Hosting the Prototype on a Server
Generating Locally Publishing on Axshare
Why I Like Axure RP
 Quick & easy to test ideas
 Simplifies production process
 Saves on producing heavy
documentation
 Clients ‘get it’
 Makes me look good & professional !
Too many features still exist as basic and advanced levels
I will be more than happy in assisting you at any time
THANK YOU ALL FOR YOUR TIME

UX & Axure RP 8 - Training Session 2021

Uploaded by

Copyright:

Available Formats

UX & Axure RP 8 - Training Session 2021

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UX & Axure RP 8 - Training Session 2021

Uploaded by

Copyright:

Available Formats

UX

Date: 20 Aug 2021

Presented By: Ibrahim Ibrahim – Project Manager

 User Experience (UX) involves a person's behaviors, attitudes, and emotions

 Information Architecture focuses on designing an efficient user experience

 User research prepares designers to organize a formal Usability Test, giving

 What is Rapid Prototype

A good prototype should help you tell the story of how

 Actual content (use placeholder text and images where

Axure RP is Rapid Prototyping software (hence the RP).

 If you know your site structure (sitemap), now is a good

 Dynamic Panel: allows you to set up

 If you need to make changes to something in a master, just double

 You can set dynamic panels to one case or another

 Dynamic Panels can push/pull widgets if their states are fit

 Objects can be pinned to browser after converting them

 To make these changes, you'll need to

 This folder contains all of the components of your Axure

I will be more than happy in assisting you at any time

THANK YOU ALL FOR YOUR TIME

You might also like