rich interface design

Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar1

How AJAX Changes Everything

Steve Mulder

Rich Interface Design

& Flash


The spectrum of rich interfaces

Single-ScreenCheckout

SliderDrag-and-Drop

ConfiguratorsIn-Page Editing

Auto-Suggest

Microsite

Interactive Charts/Calculators

Rich page components Rich Internet Applications


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






– Transactions

– Video/audio


– Configurators

– Dashboards



Finding stuff: the early years


AJAX to the rescue!


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






– Transactions

– Video/audio


– Configurators

– Dashboards



adidas miCoach


adidas miCoach.com






– Transactions

– Video/audio


– Configurators

– Dashboards



Nikon


NikonUSA.com


Reebok Run Easy


Reebok GoRunEasy.com


Elementsof 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 challengesare 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


Discoverability60%Messaging

14%

Legibility11%

Performance11%

Gremlins3%

Drunk Facilitator

1%

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


DesignProcess

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 [email protected]

www.molecular.com/webdesignworld-chicago

rich interface design

Business

faster processes

long processes

common activities

errors asynchronous

weapon of power

adidas micoach

web page

web site discoverability