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.

1. WebVisions 2008
Nick Finck
May 22nd, 2008
WebVisions, Portland
UX Best Practices
1

2. 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

3. WebVisions 2008
What I am going to be talking about
• Overview of UX
• The Criteria
• The Sites
• Key Takeaways
• Questions
• Audience Submissions
3

4. WebVisions 2008
What is User Experience?
4

5. 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

6. 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

7. WebVisions 2008
Who controls the User Experience?
7

8. WebVisions 2008
Who controls the User Experience?
8

9. WebVisions 2008
Who controls the User Experience?
Usability Information Information Web Interaction
Specialist Designer Architect Designer Designer
9

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
10

11. 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

12. WebVisions 2008
Criteria
12

13. WebVisions 2008
The Criteria I Used
13

14. WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
Usability
Specialist
14

15. WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
Usability Information
Specialist Designer
15

16. WebVisions 2008
The Criteria I Used
• Ease of Use (Usability)
• Intuitiveness (Information Design)
• Structure (Information Architecture)
Usability Information Information
Specialist Designer Architect
16

17. 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

18. 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

19. WebVisions 2008
The Sites
19

20. WebVisions 2008
The sites I looked at:
• Amazon
• eBay
• Flickr
• Netflix
• Target
• Toyota
• Twitter
• Zillow
20

21. WebVisions 2008
Amazon.com
21

22. WebVisions 2008
Amazon.com
22

23. WebVisions 2008
Amazon.com
Nice!
23

24. WebVisions 2008
Amazon.com
Umm?
24

25. WebVisions 2008
Amazon.com
Eek!
25

26. WebVisions 2008
Amazon.com
Which
button do I click
to add it to my
wishlist?!
26

27. 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

28. WebVisions 2008
eBay.com
28

29. WebVisions 2008
eBay.com
29

30. WebVisions 2008
eBay.com
Ok, a lot of information
but not a bad start.
30

31. WebVisions 2008
eBay.com
Wow, ok, way too
many links to possibly read
through at once!
31

32. WebVisions 2008
eBay.com
Exceptionally
well designed!
32

33. WebVisions 2008
eBay.com
Exceptionally
poorly designed!
33

34. 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

35. WebVisions 2008
Flickr.com
35

36. WebVisions 2008
Flickr.com
36

37. WebVisions 2008
Flickr.com
Good break down of
information in navigation
37

38. WebVisions 2008
Flickr.com
Overwhelming and
incomplete information
38

39. WebVisions 2008
Flickr.com
Properly customized
search results
39

40. WebVisions 2008
Flickr.com
Clearly thought through
on all aspects of UX
40

41. 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

42. WebVisions 2008
Netflix.com
42

43. WebVisions 2008
Netflix.com
43

44. WebVisions 2008
Netflix.com
A bit too many options
but not too bad!
44

45. WebVisions 2008
Netflix.com
Wait, how do I browse
genres again??
45

46. WebVisions 2008
Netflix.com
Nicely done,
but how do I instantly play
movies?
46

47. WebVisions 2008
Netflix.com
Ok, no, I just want
to add this one move to
my Queue!
47

48. WebVisions 2008
Netflix.com
Ok, there is my
Queue, but whatʼs this
Instant tab for?
48

49. 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

50. WebVisions 2008
Target.com
50

51. WebVisions 2008
Target.com
51

52. WebVisions 2008
Target.com
Very nice!
52

53. WebVisions 2008
Target.com
Not bad, could be a
little more refined.
53

54. WebVisions 2008
Target.com
Excellent work
but clean up that
whitespace.
54

55. WebVisions 2008
Target.com
Using pop-ups
here is not such a
good idea.
55

56. WebVisions 2008
Target.com
Great work!
56

57. 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

58. WebVisions 2008
Toyota.com
58

59. WebVisions 2008
Toyota.com
59

60. WebVisions 2008
Toyota.com
Well done,
good visuals!
60

61. WebVisions 2008
Toyota.com
Pretty good
execution tho a bit
gratuitous.
61

62. WebVisions 2008
Toyota.com
Products as
navigation, nicely
done.
62

63. WebVisions 2008
Toyota.com
Good product
comparison, but what about
the competitors?
63

64. 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

65. WebVisions 2008
Twitter.com
65

66. WebVisions 2008
Twitter.com
66

67. WebVisions 2008
Twitter.com
Where
did the thread
go?
67

68. WebVisions 2008
Twitter.com
They replied, but to
what message?
68

69. WebVisions 2008
Twitter.com
Well this page was
hard to find!
69

70. WebVisions 2008
Twitter.com
I am following them, but
are they following me?
70

71. 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

72. WebVisions 2008
Key Takeaways
72

73. 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

74. WebVisions 2008
Thank you. Questions?
nick@blueflavor.com
blueflavor.com
nickfinck.com
74

75. WebVisions 2008
Audience Submissions
• Twitter: nickf
• AIM/iChat: dm5o3
75