How AJAX Changes Everything Steve Mulder Rich Interface Design & Flash
The spectrum of rich interfaces Rich page components  Rich Internet Applications Single-Screen Checkout Slider Drag-and-Drop Configurators In-Page Editing Auto-Suggest Microsite Interactive Charts/ Calculators
To Richify or  Not to Richify?
Opportunities for richness What are common activities that could be easier? Searching (e.g., auto-suggest) Avoiding errors (asynchronous validation) Making long processes faster (e.g., registration) Transactions Video/audio Where do users want more flexibility or power? Selection tools Configurators Dashboards Where are brand-immersive experiences valuable and effective?
Single-screen checkout
Opportunities for richness What are common activities that could be easier? Searching (e.g., auto-suggest) Avoiding errors (asynchronous validation) Making long processes faster (e.g., registration) Transactions Video/audio Where do users want more flexibility or power? Selection tools Configurators Dashboards Where are brand-immersive experiences valuable and effective?
Finding stuff: the early years
AJAX to the rescue!
Wine store proof of concept  (wine.molecular.com)
Opportunities for richness What are common activities that could be easier? Searching (e.g., auto-suggest) Avoiding errors (asynchronous validation) Making long processes faster (e.g., registration) Transactions Video/audio Where do users want more flexibility or power? Selection tools Configurators Dashboards Where are brand-immersive experiences valuable and effective?
adidas miCoach
adidas miCoach.com
Opportunities for richness What are common activities that could be easier? Searching (e.g., auto-suggest) Avoiding errors (asynchronous validation) Making long processes faster (e.g., registration) Transactions Video/audio Where do users want more flexibility or power? Selection tools Configurators Dashboards Where are brand-immersive experiences valuable and effective?
Nikon
NikonUSA.com
Reebok Run Easy
Reebok GoRunEasy.com
Elements of Richness
User expectations of  Web interactions are changing “ I want it to work like…”
Instant feedback
 
 
 
Faster processes
Endless.com
Backpack
SSCO
More ways to interact
Marketwatch
Wine demo
Etsy
Direct manipulation
Drag and drop Netflix
Google Finance
Differentiating experiences
Nike ID
 
http://www.backstageataccenture.com/
 
vs.
User Experience Challenges
There is more same  than different Information design  challenges are universal
Parade of failures
Complexity
Wine store, version 1
What we wanted users to feel
What users actually felt
First-time vs. regular use
Run Easy: Before
Run Easy: After
adidas miCoach: display and buttons
Prune with ferocity Overemphasize the core,  underemphasize the cool stuff Be obsessive about a consistent visual system for interactivity cues
Discoverability
Root causes of usability issues * *   Fake chart based on no data whatsoever
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
The Components of Discoverability Position Context User expectations  & conventions Design Text & labeling
 
 
 
 
 
Intercept natural eye scanning behavior Information design and hierarchy more important than ever Motion – the weapon of power that can also backfire
Affordance
 
 
 
Timing
Slowing it down
 
Control
Mouseover overload
Override control
adidas miCoach: desktop expectations
Familiarity
If it looks like a drop-down…
 
Back button expectations People expect the Back button to work! People expect Undo functionality Most recent action, whatever that might be
Design Process Warning: common sense ahead
Every web site is becoming  less like a site and  more like an application
The components of the experiences    we create are getting smaller
The nimble and iterative shall inherit the earth
Engineered    waterfalls    do not    inspire
We need better  visualization tools
Adobe “Thermo”
Users expect more power and complexity  without sacrificing  simplicity
Steve Mulder [email_address] www.molecular.com/ webdesignworld-chicago

Rich Interface Design

Editor's Notes

  • #2 http://flickr.com/photos/soulcheck/384769773/