Rich Interface Design

Molecular Inc
Molecular IncInteractive Agency at Molecular
How AJAX Changes Everything Steve Mulder Rich Interface Design & Flash
The spectrum of rich interfaces ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Single-screen checkout
Opportunities for richness ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Finding stuff: the early years
AJAX to the rescue!
Wine store proof of concept  (wine.molecular.com)
Opportunities for richness ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
adidas miCoach
adidas miCoach.com
Opportunities for richness ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Nikon
NikonUSA.com
Reebok Run Easy
Reebok GoRunEasy.com
Elements of Richness
User expectations of  Web interactions are changing ,[object Object]
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
[object Object],[object Object],[object Object]
Discoverability
Root causes of usability issues * ,[object Object]
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
 
 
 
 
 
[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object]
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
1 of 86

More Related Content

More from Molecular Inc(15)

Rich Interface Design

Editor's Notes

  1. http://flickr.com/photos/soulcheck/384769773/