User focus ux_of_ri_as
-
Upload
kate-walser -
Category
Design
-
view
758 -
download
0
description
Transcript of User focus ux_of_ri_as
![Page 1: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/1.jpg)
The UX of Rich Internet Apps
Kate Walser CX Insights
@kwalser
![Page 2: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/2.jpg)
2
![Page 3: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/3.jpg)
3
![Page 4: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/4.jpg)
4
Rich App Elements
Data refreshes without page reload• Show, hide content• Display, hide messages• Reveal interaction options on hover, click
![Page 5: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/5.jpg)
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
![Page 6: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/6.jpg)
6
![Page 7: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/7.jpg)
7
![Page 8: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/8.jpg)
8
Question #1
How would you describe design differences between Facebook and Google+?
![Page 9: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/9.jpg)
9
Write a storyto understand what people want
![Page 10: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/10.jpg)
10
Design a playto create a great UX
![Page 11: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/11.jpg)
11
1. Tell the story
Main screens
Screen flow
![Page 12: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/12.jpg)
12
2. Pick ‘lead actors’
Forms, widgets
Content, data
Grids, lists
![Page 13: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/13.jpg)
13
3. Use props to support audience
Feedback, validation
Field-level help
Contextual Information
Accessibility
![Page 14: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/14.jpg)
14
4. Position and move actors
Positioning
Layering
Relationships between elements
![Page 15: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/15.jpg)
15
5. Set the mood for actors
Transition effects
Types of movements
Light, fade effects
![Page 16: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/16.jpg)
16
6. Design the set & costumes
Colors, images
Themes / skins
Style sheets
CSS image sprites
![Page 17: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/17.jpg)
17
Frameworks
![Page 18: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/18.jpg)
18
![Page 19: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/19.jpg)
19
Question #2
What would a developer want to know?
![Page 20: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/20.jpg)
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);
![Page 21: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/21.jpg)
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
![Page 22: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/22.jpg)
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.
![Page 23: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/23.jpg)
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?
![Page 24: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/24.jpg)
24
A. Take a look at the API
Search for “default” anything…Width
Transitions
Behaviors
Show / Hide resultsDo things reappear where / how expected?
![Page 25: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/25.jpg)
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
![Page 26: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/26.jpg)
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
![Page 27: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/27.jpg)
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?
![Page 28: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/28.jpg)
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?
![Page 29: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/29.jpg)
29
Tools can help
Axure
iRise
Omnigraffle
Visio
PowerPoint
Flash
Etc.
![Page 30: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/30.jpg)
30
D. Describe show/hide behavior
Where do things appear?
How long do they appear?
How do they move in and out?
![Page 31: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/31.jpg)
31
Think of RIA as a Play
Cast of characters
Positioning, relationships
Movements, transitions
Set design
![Page 32: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/32.jpg)
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
![Page 33: User focus ux_of_ri_as](https://reader035.fdocuments.us/reader035/viewer/2022081404/559047e01a28ab362c8b462f/html5/thumbnails/33.jpg)
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/