Presentation held by ERGOSIGN at Webinale conference 2008 in Karlsruhe, Germany.

1. UX & RIAs: UI Design Challenges
Dieter Wallach & Sebastian C. Scholz
Webinale 2008

2. Overview
Introduction
UX and RIA defined
RIA and Heuristics
RIA and the UCD Life Cycle
Case Study
Discussion

3. 8 years ago (Garret)

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

7. UX: Wheel Model (Revang)

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

16. RIA: Approaching UI Risks
1 2
Heuristic Life Cycle
Picture Picture

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.

24. User Centered Design Lifecycle
1. Analysis
6. Implementation 2. Design
5. Specification 3. Prototype
4. Evaluation

25. 1. User/Task Analysis
Traditional Situation

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)

27. User Centered Design Lifecycle
1. Analysis
6. Implementation 2. Design
5. Specification 3. Prototype
4. Evaluation

28. 2. Design: Conceptual
Traditional Situation

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

30. 2. Design: Interaction
Traditional Situation

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

32. 2. Design: Visual
Traditional Situation

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

34. User Centered Design Lifecycle
1. Analysis
6. Implementation 2. Design
5. Specification 3. Prototype
4. Evaluation

35. 3. Prototype
Traditional Situation

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

37. User Centered Design Lifecycle
1. Analysis
6. Implementation 2. Design
5. Specification 3. Prototype
4. Evaluation

38. 4. Evaluation
Traditional Situation

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

40. User Centered Design Lifecycle
1. Analysis
6. Implementation 2. Design
5. Specification 3. Prototype
4. Evaluation

41. 5/6 Specification & Implementation

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