rich interface design
Post on 15-May-2015
6.335 Views
Preview:
DESCRIPTION
TRANSCRIPT
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar1
How AJAX Changes Everything
Steve Mulder
Rich Interface Design
& Flash
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar2
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
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar3
To Richify or Not to Richify?
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar4
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?
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar5
Single-screen checkout
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar6
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?
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar7
Finding stuff: the early years
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar8
AJAX to the rescue!
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar9
Wine store proof of concept (wine.molecular.com)
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar10
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?
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar11
adidas miCoach
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar12
adidas miCoach.com
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar13
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?
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar14
Nikon
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar15
NikonUSA.com
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar16
Reebok Run Easy
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar17
Reebok GoRunEasy.com
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar18
Elementsof Richness
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar19
User expectations of Web interactions are changing
“I want it to work like…”
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar20
Instant feedback
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar21
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar22
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar23
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar24
Faster processes
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar25
Endless.com
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar26
Backpack
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar27
SSCO
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar28
More ways to interact
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar29
Marketwatch
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar30
Wine demo
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar31
Etsy
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar32
Direct manipulation
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar33
Drag and drop Netflix
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar34
Google Finance
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar35
Differentiating experiences
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar36
Nike ID
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar37
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar38
http://www.backstageataccenture.com/
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar39
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar40
vs.
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar41
User Experience Challenges
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar42
There is more same than different
Information design challengesare universal
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar43
Parade of failures
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar44
Complexity
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar45
Wine store, version 1
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar46
What we wanted users to feel
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar47
What users actually felt
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar48
First-time vs. regular use
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar49
Run Easy: Before
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar50
Run Easy: After
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar51
adidas miCoach: display and buttons
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar52
• Prune with ferocity
• Overemphasize the core, underemphasize the cool stuff
• Be obsessive about a consistent visual system for interactivity cues
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar53
Discoverability
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar54
Discoverability60%Messaging
14%
Legibility11%
Performance11%
Gremlins3%
Drunk Facilitator
1%
Root causes of usability issues *
* Fake chart based on no data whatsoever
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar55
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
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar56
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & labeling
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar57
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar58
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar59
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar60
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar61
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar62
• Intercept natural eye scanning behavior
• Information design and hierarchy more important than ever
• Motion – the weapon of power that can also backfire
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar63
Affordance
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar64
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar65
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar66
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar67
Timing
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar68
Slowing it down
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar69
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar70
Control
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar71
Mouseover overload
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar72
Override control
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar73
adidas miCoach: desktop expectations
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar74
Familiarity
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar75
If it looks like a drop-down…
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar76
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar77
Back button expectations
• People expect the Back button to work!
• People expect Undo functionality– Most recent action, whatever that might be
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar78
DesignProcess
Warning: common sense ahead
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar79
Every web site is becoming less like a site and
more like an application
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar80
The components of the experiences we create are getting smaller
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar81
The nimble and iterative shall inherit the earth
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar82
Engineered waterfalls do not inspire
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar83
We need better visualization tools
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar84
Adobe “Thermo”
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar85
Users expect more power and complexity without sacrificing
simplicity
Copyright © 2008 Molecular, Inc. | www.molecular.com | Linked by Isobar86
Steve Muldersmulder@molecular.com
www.molecular.com/webdesignworld-chicago
top related