User focus ux_of_ri_as


Published on

Rich Web Apps presentation for UPA-DC UserFocus conference. Includes ideas for UX professionals to work more effectively with developers to create apps that users will love.

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Rich Internet applications are still abuzz.  With Flash, Flex, Google Web Toolkit, Dojo, and other frameworks, developers are ga-ga over web-based applications that function like software.  For user experience professionals, understanding what new opportunities and challenges these frameworks bring (and how to create and communicate the design to developers!) makes the difference between a clunky web-based product and a sleek, intuitive application that users will love.RIAsDesign considerationsExamplesBest practices
  • Think about a site like Slashdot – it’s meant to be a social network where people can share news and ideas.You can click on links, select radio buttons, and click buttons.To see changesIt’s your usual website.
  • Now think of an app like Facebook. You can use it on the web or on mobile.Things appear, change, have effects
  • WidgetsLayoutInteractionMovementTimingTransition effects
  • Background / SettingPurposeGoalsUsersTasks, high-level flowRequired Elements (e.g., logo, contact info…)
  • Storytelling isn’t enough for a great app anymore. Screenplay and set design will be more relevant.
  • The code framework they are using may be
  • If you have anything beyond just a simple, one-column form, it may be difficult to handle using web standards-friendly relative / flow layouts. Absolute gives you more precision…but may use tables for layout.
  • User focus ux_of_ri_as

    1. 1. The UX of Rich Internet Apps<br />Kate Walser  CX Insights<br />@kwalser<br />
    2. 2. 2<br />
    3. 3. 3<br />
    4. 4. Rich App Elements<br />Data refreshes without page reload<br /><ul><li>Show, hide content
    5. 5. Display, hide messages
    6. 6. Reveal interaction options on hover, click </li></ul>4<br />
    7. 7. Our Challenge<br />How do you begin to describe how a rich app should work?<br />Source: Cerner Corporation, Physician Express App<br />5<br />
    8. 8. 6<br />
    9. 9. 7<br />
    10. 10. Question #1<br />How would you describe design differences between Facebook and Google+?<br />8<br />
    11. 11. Write a storyto understand what people want<br />9<br />
    12. 12. Design a play<br />to create a great UX<br />10<br />
    13. 13. 1. Tell the story<br />Main screens<br />Screen flow<br />11<br />
    14. 14. 2. Pick ‘lead actors’<br />Forms, widgets<br />Content, data<br />Grids, lists<br />12<br />
    15. 15. 3. Use props to support audience<br />Feedback, validation<br />Field-level help<br />Contextual Information<br />Accessibility<br />13<br />
    16. 16. 4. Position and move actors<br />Positioning<br />Layering<br />Relationships between elements<br />14<br />
    17. 17. 5. Set the mood for actors <br />Transition effects<br />Types of movements<br />Light, fade effects<br />15<br />
    18. 18. 6. Design the set & costumes<br />Colors, images<br />Themes / skins<br />Style sheets<br />CSS image sprites<br />16<br />
    19. 19. Frameworks<br />17<br />
    20. 20. 18<br />
    21. 21. Question #2<br />What would a developer want to know?<br />19<br />
    22. 22. A Small Code Sample<br />FormPanelupadcForm = new FormPanel();<br />upadcForm.setHeading(“User Focus Form”);<br />upadcForm.setWidth(350);<br />FormLayout layout = new FormLayout();<br />layout.setLabelWidth(75);<br />layout.setLabelAlign(LabelAlign.TOP);<br />upadcForm.setLayout(layout);<br />TextField<String> firstName = new TextField<String>()<br />firstName.setFieldLabel(“First name”)<br />firstName.setAllowBlank(false);<br />upadcForm.add(firstName, formData);<br />20<br />
    23. 23. DevelopersExplicitly stated…<br />FormPanelupadcForm = new FormPanel();<br />upadcForm.setHeading(“User Focus Form”);<br />upadcForm.setWidth(350);<br />FormLayout layout = new FormLayout();<br />layout.setLabelWidth(75);<br />layout.setLabelAlign(LabelAlign.TOP);<br />upadcForm.setLayout(layout);<br />TextField<String> firstName = new TextField<String>()<br />firstName.setFieldLabel(“First name”)<br />firstName.setAllowBlank(false);<br />upadcForm.add(firstName, formData);<br />Form will be 300px wide<br />Labels will be above fields<br />”First name” field is required<br />21<br />
    24. 24. FrameworkImplicitly stated…<br />FormPanel uses setFieldWidth(int)Sets the default field width (defaults to 210).<br />FormLayout is meant to be a single column. It uses a combo of tables and absolute positioning<br />All widgets, including state drop-down will be 200 px wide<br />You will not be able to “easily” add help icons or elements next to fields<br />BTW, you have 2 “theme” options – blue or gray. Unless you enable ARIA – then black with orange and white.<br />22<br />
    25. 25. App UX Considerations<br />Primary – How big is the screen, what’s on it?<br />Window size<br />Widget selection, size, alignment<br />Layout, spacing<br />Helper widgets, icons<br />Secondary – How do they work?<br />Transition effects<br />Widget look / appearance on disabling, read-only<br />Relative positioning vs. absolute<br />No rights / roles – should widgets appear?<br />23<br />
    26. 26. A. Take a look at the API<br />Search for “default” anything…<br />Width<br />Transitions<br />Behaviors<br />Show / Hide results<br />Do things reappear where / how expected?<br />24<br />
    27. 27. “It is not as important that you learn the actual code to generate the custom UIViews (trust me when I say that it will be overwhelming), but rather focus your attention on learning the effects, styles, and applications…”<br />Shawn Welch<br />From Idea to App: Creating iOS UI, Animations, and Gestures<br />25<br />
    28. 28. B. Create an RIA style guide<br />Define and agree to vocabulary<br />Different message types Color, position, timing<br />Selection listeners Single click, Double click, Hover<br />Transition effects Use VIDEO or Step 1, 2, 3, to describe<br />Lookup / Reference options Field-level help, Hover behavior<br />26<br />
    29. 29. API Items to Check<br />DEFAULT anything…<br />Width<br />Transitions<br />Behaviors<br />Inheritance<br />For the major widgets, does the inheritance make sense?<br />Show / Hide results<br />Do things reappear where / how expected?<br />27<br />
    30. 30. C. Define the events and results for any interactive elements<br />Should a grid row open when [clicked or double-clicked]?<br />Does the widget act similarly to a non-RIA widget?<br />Should a [hover menu or pop-up window] appear when a user hovers over a friend’s name?<br />28<br />
    31. 31. Tools can help<br />Axure<br />iRise<br />Omnigraffle<br />Visio<br />PowerPoint<br />Flash<br />Etc.<br />29<br />
    32. 32. D. Describe show/hide behavior<br />Where do things appear?<br />How long do they appear?<br />How do they move in and out?<br />30<br />
    33. 33. Think of RIA as a Play<br />Cast of characters<br />Positioning, relationships<br />Movements, transitions<br />Set design<br />31<br />
    34. 34. Questions?<br />Kate Walser<br />Kate [at] cxinsights [dot] com<br />@kwalser<br />(571) 281-2626<br />32<br />Slides, materials will be posted by 9/30<br /><br />
    35. 35. Pattern Libraries<br />jQuery<br /> (click thru left nav to find items (e.g., html()), then view example in dotted line box below code example)<br /><br />Sencha Touch KitchenSink<br /><br />Bill Scott, Designing Web Interfaces<br />33<br />