UX & RIAs: UI Design Challenges (ERGOSIGN)

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

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

8 years ago (Garret)

Usability defined Usability = Efficiency + Effectiveness User + Emotional Appeal Task Context

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 \"user experience\" is associated with interactive systems designers is because Don Norman didn't want his group at Apple relegated to pushing pixels in the \"user interface.\"

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

UX: Wheel Model (Revang)

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: 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?

Rich Internet Applications (RIA) defined Web based Highly interactive Desktop-app emulating Fluidly responsive No HTML-page/refresh model Cinematic effects

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

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.

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

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

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?

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

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

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.

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

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

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.

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

1. User/Task Analysis Traditional Situation

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)

2. Design: Conceptual Traditional Situation

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

2. Design: Interaction Traditional Situation

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

2. Design: Visual Traditional Situation

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

3. Prototype Traditional Situation

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

4. Evaluation Traditional Situation

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

5/6 Specification & Implementation

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.

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

Case Study 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 high discipline) • User is still in focus • Need for continuous training/education for UI designers

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 ....

UX & RIAs: UI Design Challenges Visit us at http://www.ergosign.de

UX & RIAs: UI Design Challenges (ERGOSIGN)

1 comments

Notes on slide 1

43 Favorites & 1 Group