+ Emotional Appeal
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
UX: Honeycomb Model (Morville)
UX If it's not useful, who cares if it's usable?
Don't make me think!
Positive experiences build brand loyalty
Available to all, regardless of disability
You can't use what you can't find
Quality design builds trust
UX: Return on Invest
Application: a platform for common banking operations
ROI = net benefits/cost = 163%
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 ;-)
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!
UX and Behavior 2: Interface & user
Lewin‘s (adapted) equation:
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
Rich Internet Applications (RIA) defined
No HTML-page/refresh model
RIA: Desktop Behavior Emulation
Drag & Drop Non-HTML controls
Menu & Tool bars Accordian
Windows & Wizards Combobox
Panels Spinner box
Form validation Keyboard actions
Context menus Direct object resizing
Full page refresh is replaced by small content
Hyperlinks and “Submit” are replaced by a full
range of interactive events.
Micro-interaction and micro-updates lead to
Interaction is characterized by direct manipulation,
lightweight actions and in-page actions.
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?
Heuristics (1/6): Discoverability
Discoverability = user understands where a
control is located & understands what it does.
Controls should visibly communicate their purpose
Should operate consistently within the application and
consistently with other similar rich sites/desktop apps
Changes are apparent during and after.
Do business apps have the same discoverability
problems that Web 2.0 apps have?
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
links where appropriate
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
No multiple updates at a time — users might get
overwhelmed, their attention span exceeded.
Attracting attention through movement
and color change
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
of the page where the update will take place.
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
Users get disturbed and quickly loose their focus on
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
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
“ ” 2
RIAs bring people-centered design to
1. User/Task Analysis
• Often neglected, especially when the
initiator is the main user.
• Reduced initial feature scope
• Fallacy that “everything can be fixed
• Understanding users most crucial (not
only when business model depends on
2. Design: Conceptual
• High overlap with marketing
• Design of first contact, signup and first
run has priority
• Design for scaleability (due to easy
• 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
2. Design: Interaction
• Great possibilities for highly interactive
• Blurred mixture with classic “page
• Small path not to over do it
• Lack of modality (live validation)
• Invitation > Transition > Feedback
• Interaction is both a sophisticated tool
and a deadly weapon
• Component Model vs. Page Model
2. Design: Visual
• More than ever factor of
• 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
• Like in native apps: frame the
content, do not outshine it
• UI designers need to have lots of
knowledge (small teams)
• Risk to get lost in
• High amount of reusability
• Do not mix it too much with the
(conceptual) design phase
• 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
• Very informal on a high level, not
detailed due to high probability of
• 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.
“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
Please check http://ergosign.de for the case study.
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
• User is still in focus
• Need for continuous training/education
for UI designers
• 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 ....
UX & RIAs: UI Design Challenges
Visit us at http://www.ergosign.de