The document discusses the user experience (UX) of rich internet applications (RIAs). It provides tips for designing the UX of RIAs, such as telling a story to understand user needs, designing interactions between elements, and defining events and results. The document also discusses RIA development considerations like checking default API values, creating style guides, and describing show/hide behaviors of elements.

1. The UX of Rich Internet Apps Kate Walser  CX Insights @kwalser

2. 2

3. 3

5. Display, hide messages

6. Reveal interaction options on hover, click 4

7. Our Challenge How do you begin to describe how a rich app should work? Source: Cerner Corporation, Physician Express App 5

8. 6

9. 7

10. Question #1 How would you describe design differences between Facebook and Google+? 8

11. Write a storyto understand what people want 9

12. Design a play to create a great UX 10

13. 1. Tell the story Main screens Screen flow 11

14. 2. Pick ‘lead actors’ Forms, widgets Content, data Grids, lists 12

15. 3. Use props to support audience Feedback, validation Field-level help Contextual Information Accessibility 13

16. 4. Position and move actors Positioning Layering Relationships between elements 14

17. 5. Set the mood for actors Transition effects Types of movements Light, fade effects 15

18. 6. Design the set & costumes Colors, images Themes / skins Style sheets CSS image sprites 16

19. Frameworks 17

20. 18

21. Question #2 What would a developer want to know? 19

22. A Small Code Sample FormPanelupadcForm = new FormPanel(); upadcForm.setHeading(“User Focus Form”); upadcForm.setWidth(350); FormLayout layout = new FormLayout(); layout.setLabelWidth(75); layout.setLabelAlign(LabelAlign.TOP); upadcForm.setLayout(layout); TextField<String> firstName = new TextField<String>() firstName.setFieldLabel(“First name”) firstName.setAllowBlank(false); upadcForm.add(firstName, formData); 20

23. DevelopersExplicitly stated… FormPanelupadcForm = new FormPanel(); upadcForm.setHeading(“User Focus Form”); upadcForm.setWidth(350); FormLayout layout = new FormLayout(); layout.setLabelWidth(75); layout.setLabelAlign(LabelAlign.TOP); upadcForm.setLayout(layout); TextField<String> firstName = new TextField<String>() firstName.setFieldLabel(“First name”) firstName.setAllowBlank(false); upadcForm.add(firstName, formData); Form will be 300px wide Labels will be above fields ”First name” field is required 21

24. FrameworkImplicitly stated… FormPanel uses setFieldWidth(int)Sets the default field width (defaults to 210). FormLayout is meant to be a single column. It uses a combo of tables and absolute positioning All widgets, including state drop-down will be 200 px wide You will not be able to “easily” add help icons or elements next to fields BTW, you have 2 “theme” options – blue or gray. Unless you enable ARIA – then black with orange and white. 22

25. App UX Considerations Primary – How big is the screen, what’s on it? Window size Widget selection, size, alignment Layout, spacing Helper widgets, icons Secondary – How do they work? Transition effects Widget look / appearance on disabling, read-only Relative positioning vs. absolute No rights / roles – should widgets appear? 23

26. A. Take a look at the API Search for “default” anything… Width Transitions Behaviors Show / Hide results Do things reappear where / how expected? 24

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…” Shawn Welch From Idea to App: Creating iOS UI, Animations, and Gestures 25

28. B. Create an RIA style guide Define and agree to vocabulary Different message types Color, position, timing Selection listeners Single click, Double click, Hover Transition effects Use VIDEO or Step 1, 2, 3, to describe Lookup / Reference options Field-level help, Hover behavior 26

29. API Items to Check DEFAULT anything… Width Transitions Behaviors Inheritance For the major widgets, does the inheritance make sense? Show / Hide results Do things reappear where / how expected? 27

30. C. Define the events and results for any interactive elements Should a grid row open when [clicked or double-clicked]? Does the widget act similarly to a non-RIA widget? Should a [hover menu or pop-up window] appear when a user hovers over a friend’s name? 28

31. Tools can help Axure iRise Omnigraffle Visio PowerPoint Flash Etc. 29

32. D. Describe show/hide behavior Where do things appear? How long do they appear? How do they move in and out? 30

33. Think of RIA as a Play Cast of characters Positioning, relationships Movements, transitions Set design 31

34. Questions? Kate Walser Kate [at] cxinsights [dot] com @kwalser (571) 281-2626 32 Slides, materials will be posted by 9/30 http://www.cxinsights.com/userfocus

35. Pattern Libraries jQuery http://api.jquery.com/browser/ (click thru left nav to find items (e.g., html()), then view example in dotted line box below code example) http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery Sencha Touch KitchenSink http://dev.sencha.com/deploy/touch/examples/kitchensink/ Bill Scott, Designing Web Interfaceshttp://www.flickr.com/photos/designingwebinterfaces/ 33