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

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?

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?

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?

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?

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…”

“ 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

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

* 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

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

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