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
    + Emoti...
User Experience (UX) defined



 “                                                                                        ...
UX: Honeycomb Model (Morville)

                                Useful

      UX                        If it's not useful...
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 effe...
UX and Behavior: Adding Context


                        •   Where am I going?
                            Where was I?

...
UX and Behavior 2: Interface & user
  Lewin‘s (adapted) equation:

                           B=f(U,E)
     Behavior is a ...
Rich Internet Applications (RIA) defined



                     Web based
                     Highly interactive
       ...
RIA: Desktop Behavior Emulation


  •                       •
      Drag & Drop             Non-HTML controls

  •        ...
RIA: Impact

   Full page refresh is replaced by small content
   updates.

   Hyperlinks and “Submit” are replaced by a f...
RIA: Potential UX risks
 Temptation to over- and abuse richness

       How to ensure that changes when updating parts on ...
RIA: Approaching UI Risks




       1                     2
      Heuristic             Life Cycle
       Picture        ...
Heuristics (1/6): Discoverability


    Discoverability = user understands where a
    control is located & understands wh...
Heuristics (2/6): Back & Bookmark



   Ensure that the back button and bookmarking work


   Back-buttons are often used ...
Heuristics (3/6): Change Communication

   With partial page updates, it’s very important to make sure
   that people noti...
Heuristics (4/6): Feedback


 •   Provide feedback when changes are not immediate

 •   In a traditional Web site, waiting...
Heuristics (5/6): Adding Content




   Don‘t add large amounts of content to a page!

     Adding too much can make the r...
Heuristics (6/6): Accessibility




  •   RIAs are often very difficult (if not impossible) for
      people with certain ...
RIAs & User-Centered Design



  “                                                      ”
      RIAs are typically develop...
User Centered Design Lifecycle




                      1. Analysis

 6. Implementation                    2. Design




...
1. User/Task Analysis

   Traditional Situation
1. User/Task Analysis


                 In RIAs
               • Often neglected, especially when the
                 in...
User Centered Design Lifecycle




                      1. Analysis

 6. Implementation                    2. Design




...
2. Design: Conceptual

  Traditional Situation
2. Design: Conceptual

                In RIAs
              • High overlap with marketing
              • Design of first...
2. Design: Interaction

  Traditional Situation
2. Design: Interaction
                  In RIAs
                • Great possibilities for highly interactive
            ...
2. Design: Visual

 Traditional Situation
2. Design: Visual


                    In RIAs
                •   More than ever factor of
                    different...
User Centered Design Lifecycle




                      1. Analysis

 6. Implementation                    2. Design




...
3. Prototype

 Traditional Situation
3. Prototype



                 In RIAs
               • UI designers need to have lots of
                 knowledge (sm...
User Centered Design Lifecycle




                      1. Analysis

 6. Implementation                    2. Design




...
4. Evaluation

  Traditional Situation
4. Evaluation

                  In RIAs
                • Rarely formal evaluations (only
                  in special pu...
User Centered Design Lifecycle




                      1. Analysis

 6. Implementation                    2. Design




...
5/6 Specification & Implementation
5. Specification


                     In RIAs
                   • Very informal on a high level, not
                  ...
6. Implementation




 “                                                                   ”
     “I will say that most, i...
Case Study




       Please check http://ergosign.de for the case study.
RIA & UCD Life Cycle

             • UCD life cycle still applicable
             • Faster — more iterations likely
      ...
Conclusion

  •   Use the potentials of RIAs with care

  •   RIAs can be:
      •   entire applications

      •   certai...
UX & RIAs: UI Design Challenges

   Visit us at http://www.ergosign.de
Upcoming SlideShare
Loading in...5
×

UX & RIAs: UI Design Challenges (ERGOSIGN)

8,284

Published on

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

Published in: Design, Business, Technology
2 Comments
77 Likes
Statistics
Notes
  • Hello, great presentation. Can you send copy to my email: mary.tung@gmail.com. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • hey nice presentation... really worth looking into... can i have a copy of the same on my mail tosrisri@gmail.com. thanks in advance.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,284
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
2
Likes
77
Embeds 0
No embeds

No notes for slide

Transcript of "UX & RIAs: UI Design Challenges (ERGOSIGN)"

  1. 1. UX & RIAs: UI Design Challenges Dieter Wallach & Sebastian C. Scholz Webinale 2008
  2. 2. Overview Introduction UX and RIA defined RIA and Heuristics RIA and the UCD Life Cycle Case Study Discussion
  3. 3. 8 years ago (Garret)
  4. 4. Usability defined Usability = Efficiency + Effectiveness User + Emotional Appeal Task Context
  5. 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. 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. 7. UX: Wheel Model (Revang)
  8. 8. UX: Return on Invest Application: a platform for common banking operations ROI = net benefits/cost = 163%
  9. 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. 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. 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. 12. Rich Internet Applications (RIA) defined Web based Highly interactive Desktop-app emulating Fluidly responsive No HTML-page/refresh model Cinematic effects
  13. 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. 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. 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. 16. RIA: Approaching UI Risks 1 2 Heuristic Life Cycle Picture Picture
  17. 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. 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. 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. 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. 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. 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. 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. 24. User Centered Design Lifecycle 1. Analysis 6. Implementation 2. Design 5. Specification 3. Prototype 4. Evaluation
  25. 25. 1. User/Task Analysis Traditional Situation
  26. 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. 27. User Centered Design Lifecycle 1. Analysis 6. Implementation 2. Design 5. Specification 3. Prototype 4. Evaluation
  28. 28. 2. Design: Conceptual Traditional Situation
  29. 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. 30. 2. Design: Interaction Traditional Situation
  31. 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. 32. 2. Design: Visual Traditional Situation
  33. 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. 34. User Centered Design Lifecycle 1. Analysis 6. Implementation 2. Design 5. Specification 3. Prototype 4. Evaluation
  35. 35. 3. Prototype Traditional Situation
  36. 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. 37. User Centered Design Lifecycle 1. Analysis 6. Implementation 2. Design 5. Specification 3. Prototype 4. Evaluation
  38. 38. 4. Evaluation Traditional Situation
  39. 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. 40. User Centered Design Lifecycle 1. Analysis 6. Implementation 2. Design 5. Specification 3. Prototype 4. Evaluation
  41. 41. 5/6 Specification & Implementation
  42. 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. 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. 44. Case Study Please check http://ergosign.de for the case study.
  45. 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. 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. 47. UX & RIAs: UI Design Challenges Visit us at http://www.ergosign.de

×