Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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
  • Be the first to comment

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