4. Usability defined
Usability =
Efficiency
+ Effectiveness
User
+ Emotional Appeal
Task Context
5. User Experience (UX) defined
โ โ
I invented the term User Experience because I thought
Human Interface and Usability were too narrow: I wanted
to cover all aspects of the person's experience with a
system, including industrial design, graphics, the interface,
the physical interaction, and the manual.
Since then, the term has spread widely, so much so that it is
starting to lose its meaning.
Don Norman, 2004
The only reason that quot;user experiencequot; is associated with interactive systems designers is
because Don Norman didn't want his group at Apple relegated to pushing pixels in the
quot;user interface.quot;
6. UX: Honeycomb Model (Morville)
Useful
UX If it's not useful, who cares if it's usable?
Usable
Don't make me think!
Desirable
Positive experiences build brand loyalty
useful
Accessible
usable desirable
Available to all, regardless of disability
valuable
Findable
findable accessible
You can't use what you can't find
credible
Credible
Quality design builds trust
8. UX: Return on Invest
Application: a platform for common banking operations
ROI = net benefits/cost = 163%
9. UX: It isnโt ...
UX โ Eye Candy to make an interface just look pretty
UX โ fancy animations & cool transition effects
Also NOT gratuitous Flash intros ...
(We had that a decade ago ;-)
10. UX and Behavior: Adding Context
โข Where am I going?
Where was I?
โข Action completion
โข Object state change
โข System progress
โข Animation for
aesthetic reasons is
a viable option!
11. UX and Behavior 2: Interface & user
Lewinโs (adapted) equation:
B=f(U,E)
Behavior is a function of the User & the Environment
When designing interactions, there is an intended behavior that we
want to create, however ....
โข we have no direct control over the user
โข but, via interaction design, information architecture
ย ย ย and interface design we have means to control the environment
and to evaluate the resulting effects
Which methods, processes, approaches, mindsets, and understandings
do we have for improving the user experiences when interacting with a
particular UI?
12. Rich Internet Applications (RIA) defined
Web based
Highly interactive
Desktop-app emulating
Fluidly responsive
No HTML-page/refresh model
Cinematic effects
13. RIA: Desktop Behavior Emulation
โข โข
Drag & Drop Non-HTML controls
โข โข
Menu & Tool bars Accordian
โข โข
Windows & Wizards Combobox
โข โข
Panels Spinner box
โข โข
Trees Sliders
โข โข
Form validation Keyboard actions
โข โข
Context menus Direct object resizing
14. RIA: Impact
Full page refresh is replaced by small content
updates.
Hyperlinks and โSubmitโ are replaced by a full
range of interactive events.
Micro-interaction and micro-updates lead to
micro-states.
Interaction is characterized by direct manipulation,
lightweight actions and in-page actions.
15. RIA: Potential UX risks
Temptation to over- and abuse richness
How to ensure that changes when updating parts on a
page are noticed (ยฌ page reload)?
People are used to the common web conventions โ How (fast)
will they learn the new usages, interactional behaviors and forget
the browser paradigm?
People wonโt always recognize RIAs as being different
from traditional web sites โ using the back-Button?
Bookmarking pages?
Skip RIA
17. Heuristics (1/6): Discoverability
Discoverability = user understands where a
control is located & understands what it does.
Controls should visibly communicate their purpose
and function.
Should operate consistently within the application and
consistently with other similar rich sites/desktop apps
Changes are apparent during and after.
1
Do business apps have the same discoverability
problems that Web 2.0 apps have?
18. Heuristics (2/6): Back & Bookmark
Ensure that the back button and bookmarking work
Back-buttons are often used as sheet anchors, kind
of a poor-manโs undo
Use methods that allow bookmarking and sharing
1
links where appropriate
19. Heuristics (3/6): Change Communication
With partial page updates, itโs very important to make sure
that people notice those changes:
Changes should occur close to the area where people are
looking.
No multiple updates at a time โ users might get
overwhelmed, their attention span exceeded.
Cognitive psychology:
1
Attracting attention through movement
and color change
20. Heuristics (4/6): Feedback
โข Provide feedback when changes are not immediate
โข In a traditional Web site, waiting for a page to load
is obvious feedback that something is happening
โข Without a page refresh in an RIA, unless there is an
immediate response to an action, it can appear
that the action has had no effect
โข Bring up a small animation in the area
1
of the page where the update will take place.
21. Heuristics (5/6): Adding Content
Donโt add large amounts of content to a page!
Adding too much can make the rest of the page
content appear to jump to make room for the new
content
Users get disturbed and quickly loose their focus on
the screen
1
22. Heuristics (6/6): Accessibility
โข RIAs are often very difficult (if not impossible) for
people with certain disabilities to access
โข Mobile devices (even the iPhone ;-) may not be
able to access rich sites
โข Accessible/alternative versions may be necessary
1
23. RIAs & User-Centered Design
โ โ
RIAs are typically developed by โrapid tweakingโ
- there is often no standard release cycle.
โ โ
A good understanding of your users is more
important than ever when designing a Rich
Internet Application.
โ โ 2
RIAs bring people-centered design to
information workspaces.
26. 1. User/Task Analysis
In RIAs
โข Often neglected, especially when the
initiator is the main user.
โข Reduced initial feature scope
โข Fallacy that โeverything can be fixed
later liveโ
โข Understanding users most crucial (not
only when business model depends on
crowdsourcing)
29. 2. Design: Conceptual
In RIAs
โข High overlap with marketing
โข Design of first contact, signup and first
run has priority
โข Design for scaleability (due to easy
deployability)
โข New mental challenges to be faced:
Where is the data? (Security, Privacy)
โข Fragmentation of UX (RSS, Mashups)
โข Flexible but to the point concepts for a
strong story
31. 2. Design: Interaction
In RIAs
โข Great possibilities for highly interactive
UIs (drag&drop)
โข Blurred mixture with classic โpage
modelโ web
โข Small path not to over do it
โข Lack of modality (live validation)
โข Invitation > Transition > Feedback
โข Accessibility
โข Interaction is both a sophisticated tool
and a deadly weapon
โข Component Model vs. Page Model
33. 2. Design: Visual
In RIAs
โข More than ever factor of
differentiation
โข Although emotion in focus, general
trend to reduced look and feels
โข Bidirectional: Skinning of native
applications gets popular
โข Visual edits are as easy in Flash as in
HTML
โข Like in native apps: frame the
content, do not outshine it
36. 3. Prototype
In RIAs
โข UI designers need to have lots of
knowledge (small teams)
โข Risk to get lost in
implementation details
โข High amount of reusability
โข Do not mix it too much with the
(conceptual) design phase
39. 4. Evaluation
In RIAs
โข Rarely formal evaluations (only
in special purpose applications)
โข Users are live guinea pigs
โข Risk of creating a perpetual beta
โข Chance and challenge of
minimal barriers for user
involvement (boards, email)
โข Always evaluate sufficiently
before deploying wildly
42. 5. Specification
In RIAs
โข Very informal on a high level, not
detailed due to high probability of
changes
โข Rather screen-based specification
โข Risk of loosing a big consistent picture
โข Itโs more important to evangelize a
common mindset than to create
inflexible micro specifications.
43. 6. Implementation
โ โ
โI will say that most, if not all of your users will have no
idea whether your app was built in Flex, Silverlight, or
AJAX, or event [sic] know what those words mean. They
will have an experience with your application, and if its a
bad experience, regardless of how great the technology
is, they won't come back.โ
Peter Baird, 2007
44. Case Study
Please check http://ergosign.de for the case study.
45. RIA & UCD Life Cycle
โข UCD life cycle still applicable
โข Faster โ more iterations likely
โข Blurred overlaps
โข Many parallel tracks
โข Great potential but also great risk (needs
high discipline)
โข User is still in focus
โข Need for continuous training/education
for UI designers
46. Conclusion
โข Use the potentials of RIAs with care
โข RIAs can be:
โข entire applications
โข certain sections of a site
โข just rich elements added to traditional Web pages
โข Where is richness adding value?
โข HTML pages for displaying content
โข Rich interface elements for navigation or interaction
โข User in focus: UCD still the way to go ....
47. UX & RIAs: UI Design Challenges
Visit us at http://www.ergosign.de