Nick will explore the best practices of user experience by reviewing some of the most popular and highly trafficked websites today such as eBay, Amazon, Toyota, Flickr, Twitter, Netflix and more. ...
Nick will explore the best practices of user experience by reviewing some of the most popular and highly trafficked websites today such as eBay, Amazon, Toyota, Flickr, Twitter, Netflix and more. Nick will identify and explain both good an bad experiences on these sites on the merits of visual design, information architecture, interaction, and ease of use. If there is time we will open the floor for audience submissions and to provide quick feedback and areas of improvement.
Niels Groen, User Experience Designer at EngeeNice talk! Only thing I don't agree with is the 'myth' of 7 items in a list. You're referring to a telephone menu, but the big difference is that I don't have the telephone menu visibly in front of me, so I need to remember. On a web site I do, so if the items are ordered (and maybe even grouped) in a nice way the mind can handle way way over 7 items. What do you think?10 months ago
3M UK at 3M UKI love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!2 years ago
Alex Debkaliuk, UX Practitioner at rabota.uaTwitter fixed most of it except for 'threading'. :) Thanks for a good presentation. Glad to realise was thinking in the right direction. :)
And you're a fast speaker! Great quality for making presentations. :)3 years ago
Are you sure you want to
Nick Finck, Director of UX at projekt202The audio for this presentation is once again working thanks to help from the Slideshare tech staff. Apparently the conference removed all of last year's media... not exactly sure why.3 years ago
WebVisions 2008
Nick Finck
May 22nd, 2008
WebVisions, Portland
UX Best Practices
1
WebVisions 2008
Who the hell is this guy?
• Blue Flavor
Director of User Experience, co-founder, partner
http://www.blueflavor.com
• Digital Web Magazine
Publisher and founder
http://www.digital-web.com
• User Experience Network
Seattle Local Ambassador
http://www.uxnet.org
• My Personal Site
http://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
UX Defined
“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
WebVisions 2008
What things factor in to the ideal user
experience?
Bu
s
ine
sd
ss
ee
N
Co
er
n
str
Us
ain
s t
Technical Requirements
6
WebVisions 2008
Who controls the User Experience?
7
WebVisions 2008
Who controls the User Experience?
8
WebVisions 2008
Who controls the User Experience?
Usability Information Information Web Interaction
Specialist Designer Architect Designer Designer
9
WebVisions 2008
Who controls the User Experience?
Usability Information Information Web Interaction
Specialist Designer Architect Designer Designer
Content Human Factors Identity Taxonomist Interactive
Specialist Expert Designer Marketer
10
WebVisions 2008
Who controls the User Experience?
Usability Information Information Web Interaction
Specialist Designer Architect Designer Designer
Content Human Factors Identity Taxonomist Interactive
Specialist Expert Designer Marketer
UX Lead 11
WebVisions 2008
Criteria
12
WebVisions 2008
The Criteria I Used
13
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
Usability
Specialist
14
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
Usability Information
Specialist Designer
15
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
Usability Information Information
Specialist Designer Architect
16
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
• Visual Aesthetic (Visual Design)
Usability Information Information Web
Specialist Designer Architect Designer
17
WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
• Visual Aesthetic (Visual Design)
• Functionality (Interaction Design)
Usability Information Information Web Interaction
Specialist Designer Architect Designer Designer
18
WebVisions 2008
The Sites
19
WebVisions 2008
The sites I looked at:
• Amazon
• eBay
• Flickr
• Netflix
• Target
• Toyota
• Twitter
• Zillow
20
WebVisions 2008
Amazon.com
21
WebVisions 2008
Amazon.com
22
WebVisions 2008
Amazon.com
Nice!
23
WebVisions 2008
Amazon.com
Umm?
24
WebVisions 2008
Amazon.com
Eek!
25
WebVisions 2008
Amazon.com
Which
button do I click
to add it to my
wishlist?!
26
WebVisions 2008
Some of the key problems:
• Data Driven
User experience driven mostly by data analysis
(quantitative) and not user input (qualitative)
• Improper Functionality
Navigational functionality should always properly
support the level of information on a site
• Business Trumping
Business 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
Ok, a lot of information
but not a bad start.
30
WebVisions 2008
eBay.com
Wow, ok, way too
many links to possibly read
through at once!
31
WebVisions 2008
eBay.com
Exceptionally
well designed!
32
WebVisions 2008
Some of the key problems:
• Data Driven
User experience driven mostly by user input (qualitative)
and not data analysis (quantitative)
• Design Details
Always give every page of a site as much attention as
the next when designing. All pages added up make up
the user experience.
• Navigation Breath
Navigation 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
Good break down of
information in navigation
37
WebVisions 2008
Flickr.com
Overwhelming and
incomplete information
38
WebVisions 2008
Flickr.com
Clearly thought through
on all aspects of UX
40
WebVisions 2008
Some of the key problems:
• Community Driving Architecture
Community functionality (Folksonomies) should never
drive a site’s architecture and navigation, it should be a
supplement
• Browse & Search
Websites should never rely on search as primary
navigation
• By Popularity vs. See All
If 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
A bit too many options
but not too bad!
44
WebVisions 2008
Netflix.com
Wait, how do I browse
genres again??
45
WebVisions 2008
Netflix.com
Nicely done,
but how do I instantly play
movies?
46
WebVisions 2008
Netflix.com
Ok, no, I just want
to add this one move to
my Queue!
47
WebVisions 2008
Netflix.com
Ok, there is my
Queue, but whatʼs this
Instant tab for?
48
WebVisions 2008
Some of the key problems:
• Alternative Facets of Information
Allow users to clearly see the primary information on a
given screen, don’t overwhelm the user with other facets
of that information
• Add vs. Play
If your product has two ways of purchasing, make it
inherent in the existing architecture
• Don’t Distract
Do 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
Very nice!
52
WebVisions 2008
Target.com
Not bad, could be a
little more refined.
53
WebVisions 2008
Target.com
Excellent work
but clean up that
whitespace.
54
WebVisions 2008
Target.com
Using pop-ups
here is not such a
good idea.
55
WebVisions 2008
Target.com
Great work!
56
WebVisions 2008
Some of the key problems:
• Restricting Features
Technology and features should never limit or restrict
users and systems from accessing them
• Simplify Navigation
The amount of options and paths in a navigation should
never overwhelm the user
• Design Refinement
When 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
Well done,
good visuals!
60
WebVisions 2008
Toyota.com
Pretty good
execution tho a bit
gratuitous.
61
WebVisions 2008
Toyota.com
Products as
navigation, nicely
done.
62
WebVisions 2008
Toyota.com
Good product
comparison, but what about
the competitors?
63
WebVisions 2008
Some of the key problems:
• Unnecessary Pages
Don’t make users click through extra pages when they
don’t need to.
• Over use of technology
Keep pages accessible don’t use limiting technology if
its not absolutely needed.
• Restricted comparison
Allow 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
Where
did the thread
go?
67
WebVisions 2008
Twitter.com
They replied, but to
what message?
68
WebVisions 2008
Twitter.com
Well this page was
hard to find!
69
WebVisions 2008
Twitter.com
I am following them, but
are they following me?
70
WebVisions 2008
Some of the key problems:
• Threading
Site-based messaging systems should always be
threaded.
• My Profile
Make the user profile or “my page” easy to find and
globally accessible
• Show relevant information
Always 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
Oren Farhi
Thanks for a good presentation. Glad to realise was thinking in the right direction. :)
And you're a fast speaker! Great quality for making presentations. :) 3 years ago