The UX of Rich Internet Apps

Kate Walser CX Insights

@kwalser

2

3

4

Rich App Elements

Data refreshes without page reload• Show, hide content• Display, hide messages• Reveal interaction options on hover, click

5

Our Challenge

Click icon to add picture

How do you begin to describe how a rich app should work?

Source: Cerner Corporation, Physician Express App

6

7

8

Question #1

How would you describe design differences between Facebook and Google+?

9

Write a storyto understand what people want

10

Design a playto create a great UX

11

1. Tell the story

Main screens

Screen flow

12

2. Pick ‘lead actors’

Forms, widgets

Content, data

Grids, lists

13

3. Use props to support audience

Feedback, validation

Field-level help

Contextual Information

Accessibility

14

4. Position and move actors

Positioning

Layering

Relationships between elements

15

5. Set the mood for actors

Transition effects

Types of movements

Light, fade effects

16

6. Design the set & costumes

Colors, images

Themes / skins

Style sheets

CSS image sprites

17

Frameworks

18

19

Question #2

What would a developer want to know?

20

A Small Code Sample

FormPanel upadcForm = 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);

21

Developers

Explicitly stated…

FormPanel upadcForm = 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

22

Framework

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

23

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?

24

A. Take a look at the API

Search for “default” anything…Width

Transitions

Behaviors

Show / Hide resultsDo things reappear where / how expected?

25

“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 WelchFrom Idea to App: Creating iOS UI, Animations, and Gestures

26

B. Create an RIA style guide

Define and agree to vocabulary

Different message typesColor, position, timing

Selection listenersSingle click, Double click, Hover

Transition effectsUse VIDEO or Step 1, 2, 3, to describe

Lookup / Reference optionsField-level help, Hover behavior

27

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?

28

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?

29

Tools can help

Axure

iRise

Omnigraffle

Visio

PowerPoint

Flash

Etc.

30

D. Describe show/hide behavior

Where do things appear?

How long do they appear?

How do they move in and out?

31

Think of RIA as a Play

Cast of characters

Positioning, relationships

Movements, transitions

Set design

32

Questions?

Kate Walser

Kate [at] cxinsights [dot] com

@kwalser

(571) 281-2626

Slides, materials will be posted by 9/30http://www.cxinsights.com/userfocus

33

Pattern LibrariesjQuery

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 KitchenSinkhttp://dev.sencha.com/deploy/touch/examples/kitchensink/

Bill Scott, Designing Web Interfaceshttp://www.flickr.com/photos/designingwebinterfaces/