1.
How AJAX Changes Everything Steve Mulder Rich Interface Design & Flash

2.
The spectrum of rich interfaces <ul><li>Rich page components Rich Internet Applications </li></ul>Single-Screen Checkout Slider Drag-and-Drop Configurators In-Page Editing Auto-Suggest Microsite Interactive Charts/ Calculators

3.
To Richify or Not to Richify?

4.
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g., auto-suggest) </li></ul></ul><ul><ul><li>Avoiding errors (asynchronous validation) </li></ul></ul><ul><ul><li>Making long processes faster (e.g., registration) </li></ul></ul><ul><ul><li>Transactions </li></ul></ul><ul><ul><li>Video/audio </li></ul></ul><ul><li>Where do users want more flexibility or power? </li></ul><ul><ul><li>Selection tools </li></ul></ul><ul><ul><li>Configurators </li></ul></ul><ul><ul><li>Dashboards </li></ul></ul><ul><li>Where are brand-immersive experiences valuable and effective? </li></ul>

5.
Single-screen checkout

6.
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g., auto-suggest) </li></ul></ul><ul><ul><li>Avoiding errors (asynchronous validation) </li></ul></ul><ul><ul><li>Making long processes faster (e.g., registration) </li></ul></ul><ul><ul><li>Transactions </li></ul></ul><ul><ul><li>Video/audio </li></ul></ul><ul><li>Where do users want more flexibility or power? </li></ul><ul><ul><li>Selection tools </li></ul></ul><ul><ul><li>Configurators </li></ul></ul><ul><ul><li>Dashboards </li></ul></ul><ul><li>Where are brand-immersive experiences valuable and effective? </li></ul>

7.
Finding stuff: the early years

8.
AJAX to the rescue!

9.
Wine store proof of concept (wine.molecular.com)

10.
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g., auto-suggest) </li></ul></ul><ul><ul><li>Avoiding errors (asynchronous validation) </li></ul></ul><ul><ul><li>Making long processes faster (e.g., registration) </li></ul></ul><ul><ul><li>Transactions </li></ul></ul><ul><ul><li>Video/audio </li></ul></ul><ul><li>Where do users want more flexibility or power? </li></ul><ul><ul><li>Selection tools </li></ul></ul><ul><ul><li>Configurators </li></ul></ul><ul><ul><li>Dashboards </li></ul></ul><ul><li>Where are brand-immersive experiences valuable and effective? </li></ul>

11.
adidas miCoach

12.
adidas miCoach.com

13.
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g., auto-suggest) </li></ul></ul><ul><ul><li>Avoiding errors (asynchronous validation) </li></ul></ul><ul><ul><li>Making long processes faster (e.g., registration) </li></ul></ul><ul><ul><li>Transactions </li></ul></ul><ul><ul><li>Video/audio </li></ul></ul><ul><li>Where do users want more flexibility or power? </li></ul><ul><ul><li>Selection tools </li></ul></ul><ul><ul><li>Configurators </li></ul></ul><ul><ul><li>Dashboards </li></ul></ul><ul><li>Where are brand-immersive experiences valuable and effective? </li></ul>

14.
Nikon

15.
NikonUSA.com

16.
Reebok Run Easy

17.
Reebok GoRunEasy.com

18.
Elements of Richness

19.
User expectations of Web interactions are changing <ul><li>“ I want it to work like…” </li></ul>

20.
Instant feedback

24.
Faster processes

25.
Endless.com

26.
Backpack

27.
SSCO

28.
More ways to interact

29.
Marketwatch

30.
Wine demo

31.
Etsy

32.
Direct manipulation

33.
Drag and drop Netflix

34.
Google Finance

35.
Differentiating experiences

36.
Nike ID

38.
http://www.backstageataccenture.com/

40.
vs.

41.
User Experience Challenges

42.
There is more same than different Information design challenges are universal

43.
Parade of failures

44.
Complexity

45.
Wine store, version 1

46.
What we wanted users to feel

47.
What users actually felt

48.
First-time vs. regular use

49.
Run Easy: Before

50.
Run Easy: After

51.
adidas miCoach: display and buttons

52.
<ul><li>Prune with ferocity </li></ul><ul><li>Overemphasize the core, underemphasize the cool stuff </li></ul><ul><li>Be obsessive about a consistent visual system for interactivity cues </li></ul>

53.
Discoverability

54.
Root causes of usability issues * <ul><li>* Fake chart based on no data whatsoever </li></ul>

55.
Findability = the quality of a known item to be locatable on a web site Discoverability = the quality of a known or unknown item to be noticeable on a web page

56.
The Components of Discoverability Position Context User expectations & conventions Design Text & labeling

62.
<ul><li>Intercept natural eye scanning behavior </li></ul><ul><li>Information design and hierarchy more important than ever </li></ul><ul><li>Motion – the weapon of power that can also backfire </li></ul>

63.
Affordance

67.
Timing

68.
Slowing it down

70.
Control

71.
Mouseover overload

72.
Override control

73.
adidas miCoach: desktop expectations

74.
Familiarity

75.
If it looks like a drop-down…

77.
Back button expectations <ul><li>People expect the Back button to work! </li></ul><ul><li>People expect Undo functionality </li></ul><ul><ul><li>Most recent action, whatever that might be </li></ul></ul>

78.
Design Process Warning: common sense ahead

79.
Every web site is becoming less like a site and more like an application

80.
The components of the experiences we create are getting smaller

81.
The nimble and iterative shall inherit the earth

82.
Engineered waterfalls do not inspire

83.
We need better visualization tools

84.
Adobe “Thermo”

85.
Users expect more power and complexity without sacrificing simplicity

86.
Steve Mulder [email_address] www.molecular.com/ webdesignworld-chicago