Embed Size (px)
DESCRIPTION
ux best practices
Citation preview
WebVisions 2008
UX Best Practices
Nick FinckMay 22nd, 2008WebVisions, Portland
1
WebVisions 2008
Who the hell is this guy?
• Blue FlavorDirector of User Experience, co-founder, partnerhttp://www.blueflavor.com
• Digital Web MagazinePublisher and founderhttp://www.digital-web.com
• User Experience NetworkSeattle Local Ambassadorhttp://www.uxnet.org
• My Personal Sitehttp://www.nickfinck.com
2
WebVisions 2008
What I am going to be talking about
• Overview of UX
• The Criteria
• The Sites
• Key Takeaways
• Questions
• Audience Submissions
3
WebVisions 2008
What is User Experience?
4
WebVisions 2008
User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specific design. is can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport.”
- User Experience Network (www.uxnet.org)
“
5
UX Defined
WebVisions 2008
6
Use
r N
eeds
Technical Requirements
Business C
onstraints
What things factor in to the ideal user experience?
WebVisions 2008
7
Who controls the User Experience?
WebVisions 2008
8
Who controls the User Experience?
WebVisions 2008
9
InformationArchitect
WebDesigner
InteractionDesigner
InformationDesigner
UsabilitySpecialist
Who controls the User Experience?
WebVisions 2008
10
InformationArchitect
WebDesigner
InteractionDesigner
InformationDesigner
UsabilitySpecialist
Who controls the User Experience?
IdentityDesigner
Taxonomist InteractiveMarketer
Human FactorsExpert
ContentSpecialist
WebVisions 2008
11
InformationArchitect
WebDesigner
InteractionDesigner
InformationDesigner
UsabilitySpecialist
Who controls the User Experience?
IdentityDesigner
Taxonomist InteractiveMarketer
Human FactorsExpert
ContentSpecialist
UX Lead
WebVisions 2008
Criteria
12
WebVisions 2008
The Criteria I Used
13
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
14
UsabilitySpecialist
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
15
InformationDesigner
UsabilitySpecialist
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
16
InformationArchitect
InformationDesigner
UsabilitySpecialist
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
• Visual Aesthetic (Visual Design)
17
InformationArchitect
WebDesigner
InformationDesigner
UsabilitySpecialist
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
• Visual Aesthetic (Visual Design)
• Functionality (Interaction Design)
18
InformationArchitect
WebDesigner
InteractionDesigner
InformationDesigner
UsabilitySpecialist
WebVisions 2008
The Sites
19
WebVisions 2008
The sites I looked at:
• Amazon
• eBay
• Flickr
• Netflix
• Target
• Toyota
• Zillow
20
WebVisions 2008
Amazon.com
21
WebVisions 2008
Amazon.com
22
WebVisions 2008
Amazon.com
23
Nice!
WebVisions 2008
Amazon.com
24
Umm?
WebVisions 2008
Amazon.com
25
Eek!
WebVisions 2008
Amazon.com
26
Which button do I click to add it to my
wishlist?!
WebVisions 2008
Some of the key problems:
• Data DrivenUser experience driven mostly by data analysis (quantitative) and not user input (qualitative)
• Improper FunctionalityNavigational functionality should always properly support the level of information on a site
• Business TrumpingBusiness drivers and business decisions should never over power the user’s needs, it should be a balance
27
WebVisions 2008
eBay.com
28
WebVisions 2008
eBay.com
29
WebVisions 2008
eBay.com
30
Ok, a lot of information but not a bad start.
WebVisions 2008
eBay.com
31
Wow, ok, way too many links to possibly read
through at once!
WebVisions 2008
eBay.com
32
Exceptionally well designed!
WebVisions 2008
eBay.com
33
Exceptionally poorly designed!
WebVisions 2008
Some of the key problems:
• Data DrivenUser experience driven mostly by user input (qualitative) and not data analysis (quantitative)
• Design DetailsAlways give every page of a site as much attention as the next when designing. All pages added up make up the user experience.
• Navigation BreathNavigation should cover breadth and depth equally, it should never lean on one more than the other.
34
WebVisions 2008
Flickr.com
35
WebVisions 2008
Flickr.com
36
WebVisions 2008
Flickr.com
37
Good break down of information in navigation
WebVisions 2008
Flickr.com
38
Overwhelming and incomplete information
WebVisions 2008
Flickr.com
39
Properly customized search results
WebVisions 2008
Flickr.com
40
Clearly thought through on all aspects of UX
WebVisions 2008
Some of the key problems:
• Community Driving ArchitectureCommunity functionality (Folksonomies) should never drive a site’s architecture and navigation, it should be a supplement
• Browse & SearchWebsites should never rely on search as primary navigation
• By Popularity vs. See AllIf you show part of a set of information you should always allow access to the remainder of that set of information
41
WebVisions 2008
Netflix.com
42
WebVisions 2008
Netflix.com
43
WebVisions 2008
Netflix.com
44
A bit too many options but not too bad!
WebVisions 2008
Netflix.com
45
Wait, how do I browse genres again??
WebVisions 2008
Netflix.com
46
Nicely done, but how do I instantly play
movies?
WebVisions 2008
Netflix.com
47
Ok, no, I just want to add this one move to
my Queue!
WebVisions 2008
Netflix.com
48
Ok, there is my Queue, but whatʼs this
Instant tab for?
WebVisions 2008
Some of the key problems:
• Alternative Facets of InformationAllow users to clearly see the primary information on a given screen, don’t overwhelm the user with other facets of that information
• Add vs. PlayIf your product has two ways of purchasing, make it inherent in the existing architecture
• Don’t DistractDo not disrupt a user trying to complete their task with upsells, calls to action, or other disruptive information
49
WebVisions 2008
Target.com
50
WebVisions 2008
Target.com
51
WebVisions 2008
Target.com
52
Very nice!
WebVisions 2008
Target.com
53
Not bad, could be a little more refined.
WebVisions 2008
Target.com
54
Excellent work but clean up that
whitespace.
WebVisions 2008
Target.com
55
Using pop-ups here is not such a
good idea.
WebVisions 2008
Target.com
56
Great work!
WebVisions 2008
Some of the key problems:
• Restricting FeaturesTechnology and features should never limit or restrict users and systems from accessing them
• Simplify NavigationThe amount of options and paths in a navigation should never overwhelm the user
• Design RefinementWhen enough changes occur in a page its important to look at the design and consider redesigning or tweaking the design when needed
57
WebVisions 2008
Toyota.com
58
WebVisions 2008
Toyota.com
59
WebVisions 2008
Toyota.com
60
Well done, good visuals!
WebVisions 2008
Toyota.com
61
Pretty good execution tho a bit
gratuitous.
WebVisions 2008
Toyota.com
62
Products as navigation, nicely
done.
WebVisions 2008
Toyota.com
63
Good product comparison, but what about
the competitors?
WebVisions 2008
Some of the key problems:
• Unnecessary PagesDon’t make users click through extra pages when they don’t need to.
• Over use of technologyKeep pages accessible don’t use limiting technology if its not absolutely needed.
• Restricted comparisonAllow users to compare not just products in a given line but all of your products side by side.
64
WebVisions 2008
Twitter.com
65
WebVisions 2008
Twitter.com
66
WebVisions 2008
Twitter.com
67
Where did the thread
go?
WebVisions 2008
Twitter.com
68
They replied, but to what message?
WebVisions 2008
Twitter.com
69
Well this page was hard to find!
WebVisions 2008
Twitter.com
70
I am following them, but are they following me?
WebVisions 2008
Some of the key problems:
• ThreadingSite-based messaging systems should always be threaded.
• My ProfileMake the user profile or “my page” easy to find and globally accessible
• Show relevant informationAlways display the information directly relevant to the task the user may be trying to accomplish on that page
71
WebVisions 2008
Key Takeaways
72
WebVisions 2008
Key takeaways:
• Good UX involves a proper balance of needs between the user, the business, and technology
• Keep things simple, don’t get in the user’s way, allow them to complete their task with ease
• Don’t short change a good UX by only paying attention to only the most critical parts, the UX is made up of the sum of all parts
• Good UX involves listening to users on both a qualitative and quantitive level, but don’t over do it
• UX is not implemented, it is adopted as a philosophy by the entire organization
73
WebVisions 2008
Thank you. Questions?
74
WebVisions 2008
Audience Submissions
75
• Twitter: nickf
• AIM/iChat: dm5o3
