WebVisions 2008




Nick Finck
May 22nd, 2008
WebVisions, Portland

UX Best Practices



                                 ...
WebVisions 2008



 Who the hell is this guy?
• Blue Flavor
 Director of User Experience, co-founder, partner
 http://www....
WebVisions 2008



 What I am going to be talking about
• Overview of UX

• The Criteria

• The Sites

• Key Takeaways

• ...
WebVisions 2008




What is User Experience?



                                        4
WebVisions 2008



 UX Defined

“User Experience (abbreviated: UX) is the
 quality of experience a person has when
 interac...
WebVisions 2008



What things factor in to the ideal user
experience?




                         Bu
                   ...
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...
WebVisions 2008



Who controls the User Experience?



   Usability     Information   Information      Web       Interact...
WebVisions 2008



Who controls the User Experience?



   Usability     Information   Information      Web       Interact...
WebVisions 2008




Criteria



                             12
WebVisions 2008



The Criteria I Used




                                        13
WebVisions 2008



 The Criteria I Used
• Ease of Use (Usability)




         Usability
         Specialist

            ...
WebVisions 2008



 The Criteria I Used
• Ease of Use (Usability)

• Intuitiveness (Information Design)




         Usabi...
WebVisions 2008



 The Criteria I Used
• Ease of Use (Usability)

• Intuitiveness (Information Design)

• Structure (Info...
WebVisions 2008



 The Criteria I Used
• Ease of Use (Usability)

• Intuitiveness (Information Design)

• Structure (Info...
WebVisions 2008



 The Criteria I Used
• Ease of Use (Usability)

• Intuitiveness (Information Design)

• Structure (Info...
WebVisions 2008




The Sites



                              19
WebVisions 2008



  The sites I looked at:
• Amazon

• eBay

• Flickr

• Netflix

• Target

• Toyota

• Twitter

• Zillow
...
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?!




           ...
WebVisions 2008



  Some of the key problems:
• Data Driven
  User experience driven mostly by data analysis
  (quantitat...
WebVisions 2008




eBay.com



                             28
WebVisions 2008



eBay.com




                             29
WebVisions 2008



eBay.com




    Ok, a lot of information
     but not a bad start.




                               ...
WebVisions 2008



eBay.com




        Wow, ok, way too
    many links to possibly read
       through at once!




     ...
WebVisions 2008



eBay.com




   Exceptionally
   well designed!




                                      32
WebVisions 2008



eBay.com




    Exceptionally
   poorly designed!




                                        33
WebVisions 2008



  Some of the key problems:
• Data Driven
  User experience driven mostly by user input (qualitative)
 ...
WebVisions 2008




Flickr.com



                               35
WebVisions 2008



Flickr.com




                               36
WebVisions 2008



Flickr.com




       Good break down of
    information in navigation




                            ...
WebVisions 2008



Flickr.com




       Overwhelming and
     incomplete information




                                ...
WebVisions 2008



Flickr.com




    Properly customized
       search results




                                      ...
WebVisions 2008



Flickr.com




    Clearly thought through
     on all aspects of UX




                              ...
WebVisions 2008



  Some of the key problems:
• Community Driving Architecture
  Community functionality (Folksonomies) s...
WebVisions 2008




Netflix.com



                               42
WebVisions 2008



Netflix.com




                               43
WebVisions 2008



Netflix.com




    A bit too many options
       but not too bad!




                                 ...
WebVisions 2008



Netflix.com




    Wait, how do I browse
      genres again??




                                     ...
WebVisions 2008



Netflix.com




         Nicely done,
   but how do I instantly play
           movies?




            ...
WebVisions 2008



Netflix.com




      Ok, no, I just want
   to add this one move to
        my Queue!




             ...
WebVisions 2008



Netflix.com




       Ok, there is my
    Queue, but whatʼs this
      Instant tab for?




           ...
WebVisions 2008



  Some of the key problems:
• Alternative Facets of Information
  Allow users to clearly see the primar...
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.




                                      ...
WebVisions 2008



Target.com




     Excellent work
    but clean up that
     whitespace.




                         ...
WebVisions 2008



Target.com




     Using pop-ups
    here is not such a
      good idea.




                         ...
WebVisions 2008



Target.com




   Great work!




                                   56
WebVisions 2008



  Some of the key problems:
• Restricting Features
  Technology and features should never limit or rest...
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.




                      ...
WebVisions 2008



Toyota.com




      Products as
    navigation, nicely
         done.




                            ...
WebVisions 2008



Toyota.com




        Good product
   comparison, but what about
      the competitors?




          ...
WebVisions 2008



  Some of the key problems:
• Unnecessary Pages
  Don’t make users click through extra pages when they
...
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?




                                       ...
WebVisions 2008



Twitter.com




    Well this page was
      hard to find!




                                         ...
WebVisions 2008



Twitter.com




    I am following them, but
     are they following me?




                          ...
WebVisions 2008



 Some of the key problems:
• Threading
  Site-based messaging systems should always be
  threaded.

• M...
WebVisions 2008




Key Takeaways



                                  72
WebVisions 2008



  Key takeaways:
• Good UX involves a proper balance of needs
  between the user, the business, and tec...
WebVisions 2008




Thank you. Questions?
nick@blueflavor.com
blueflavor.com
nickfinck.com




                              ...
WebVisions 2008




  Audience Submissions
• Twitter: nickf

• AIM/iChat: dm5o3




                                      ...
Upcoming SlideShare
Loading in...5
×

User Experience Best Practices

165,095

Published on

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.

Published in: Technology, Design
16 Comments
408 Likes
Statistics
Notes
No Downloads
Views
Total Views
165,095
On Slideshare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
4,715
Comments
16
Likes
408
Embeds 0
No embeds

No notes for slide

User Experience Best Practices

  1. 1. WebVisions 2008 Nick Finck May 22nd, 2008 WebVisions, Portland UX Best Practices 1
  2. 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. 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. 4. WebVisions 2008 What is User Experience? 4
  5. 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. 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. 7. WebVisions 2008 Who controls the User Experience? 7
  8. 8. WebVisions 2008 Who controls the User Experience? 8
  9. 9. WebVisions 2008 Who controls the User Experience? Usability Information Information Web Interaction Specialist Designer Architect Designer Designer 9
  10. 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. 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. 12. WebVisions 2008 Criteria 12
  13. 13. WebVisions 2008 The Criteria I Used 13
  14. 14. WebVisions 2008 The Criteria I Used • Ease of Use (Usability) Usability Specialist 14
  15. 15. WebVisions 2008 The Criteria I Used • Ease of Use (Usability) • Intuitiveness (Information Design) Usability Information Specialist Designer 15
  16. 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. 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. 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. 19. WebVisions 2008 The Sites 19
  20. 20. WebVisions 2008 The sites I looked at: • Amazon • eBay • Flickr • Netflix • Target • Toyota • Twitter • Zillow 20
  21. 21. WebVisions 2008 Amazon.com 21
  22. 22. WebVisions 2008 Amazon.com 22
  23. 23. WebVisions 2008 Amazon.com Nice! 23
  24. 24. WebVisions 2008 Amazon.com Umm? 24
  25. 25. WebVisions 2008 Amazon.com Eek! 25
  26. 26. WebVisions 2008 Amazon.com Which button do I click to add it to my wishlist?! 26
  27. 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. 28. WebVisions 2008 eBay.com 28
  29. 29. WebVisions 2008 eBay.com 29
  30. 30. WebVisions 2008 eBay.com Ok, a lot of information but not a bad start. 30
  31. 31. WebVisions 2008 eBay.com Wow, ok, way too many links to possibly read through at once! 31
  32. 32. WebVisions 2008 eBay.com Exceptionally well designed! 32
  33. 33. WebVisions 2008 eBay.com Exceptionally poorly designed! 33
  34. 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. 35. WebVisions 2008 Flickr.com 35
  36. 36. WebVisions 2008 Flickr.com 36
  37. 37. WebVisions 2008 Flickr.com Good break down of information in navigation 37
  38. 38. WebVisions 2008 Flickr.com Overwhelming and incomplete information 38
  39. 39. WebVisions 2008 Flickr.com Properly customized search results 39
  40. 40. WebVisions 2008 Flickr.com Clearly thought through on all aspects of UX 40
  41. 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. 42. WebVisions 2008 Netflix.com 42
  43. 43. WebVisions 2008 Netflix.com 43
  44. 44. WebVisions 2008 Netflix.com A bit too many options but not too bad! 44
  45. 45. WebVisions 2008 Netflix.com Wait, how do I browse genres again?? 45
  46. 46. WebVisions 2008 Netflix.com Nicely done, but how do I instantly play movies? 46
  47. 47. WebVisions 2008 Netflix.com Ok, no, I just want to add this one move to my Queue! 47
  48. 48. WebVisions 2008 Netflix.com Ok, there is my Queue, but whatʼs this Instant tab for? 48
  49. 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. 50. WebVisions 2008 Target.com 50
  51. 51. WebVisions 2008 Target.com 51
  52. 52. WebVisions 2008 Target.com Very nice! 52
  53. 53. WebVisions 2008 Target.com Not bad, could be a little more refined. 53
  54. 54. WebVisions 2008 Target.com Excellent work but clean up that whitespace. 54
  55. 55. WebVisions 2008 Target.com Using pop-ups here is not such a good idea. 55
  56. 56. WebVisions 2008 Target.com Great work! 56
  57. 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. 58. WebVisions 2008 Toyota.com 58
  59. 59. WebVisions 2008 Toyota.com 59
  60. 60. WebVisions 2008 Toyota.com Well done, good visuals! 60
  61. 61. WebVisions 2008 Toyota.com Pretty good execution tho a bit gratuitous. 61
  62. 62. WebVisions 2008 Toyota.com Products as navigation, nicely done. 62
  63. 63. WebVisions 2008 Toyota.com Good product comparison, but what about the competitors? 63
  64. 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. 65. WebVisions 2008 Twitter.com 65
  66. 66. WebVisions 2008 Twitter.com 66
  67. 67. WebVisions 2008 Twitter.com Where did the thread go? 67
  68. 68. WebVisions 2008 Twitter.com They replied, but to what message? 68
  69. 69. WebVisions 2008 Twitter.com Well this page was hard to find! 69
  70. 70. WebVisions 2008 Twitter.com I am following them, but are they following me? 70
  71. 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. 72. WebVisions 2008 Key Takeaways 72
  73. 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. 74. WebVisions 2008 Thank you. Questions? nick@blueflavor.com blueflavor.com nickfinck.com 74
  75. 75. WebVisions 2008 Audience Submissions • Twitter: nickf • AIM/iChat: dm5o3 75
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×