User Experience Best Practices
Upcoming SlideShare
Loading in...5
×
 

User Experience Best Practices

on

  • 166,111 views

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.

Statistics

Views

Total Views
166,111
Views on SlideShare
152,598
Embed Views
13,513

Actions

Likes
393
Downloads
4,498
Comments
16

166 Embeds 13,513

http://komunitasweb.com 4911
http://www.soraxdesign.de 2974
http://uxfactory.com 641
http://sparxoo.com 600
http://www.basisboek-onlinemarketing.nl 350
http://www.slideshare.net 292
http://uxbite.com 282
http://iatelevision.blogspot.com 280
http://samuelwiederkehr.tumblr.com 254
http://www.uxaday.com 234
http://www.uxfactory.com 165
http://rogertsai.com 148
http://postsby.thechadengle.com 147
http://mycourses.tstc.edu 142
http://shawwebsitedesign.jimdo.com 129
http://otaleonardo.me 129
http://www.otaleonardo.com 106
http://iatelevision.blogspot.de 100
http://www.sparxoo.com 94
http://sparks.ustwo.co.uk 90
http://www.guerillagirl.de 87
http://www.usability.by 81
http://idyeah.com 76
https://pulse.neudesic.com 75
http://www37.jimdo.com 66
http://uxgrid.wordpress.com 56
https://twitter.com 53
http://www.jaykay.pe.kr 49
http://iatelevision.blogspot.co.uk 48
http://sanjaykumarux.blogspot.com 46
http://marcogriffiths.wordpress.com 46
http://www.netbramha.com 39
http://basisboek-onlinemarketing.nl 33
http://iatelevision.blogspot.com.es 33
http://nickfinck.com 31
http://t648.tistory.com 31
http://www.hanrss.com 31
http://nayatop21.tistory.com 30
http://hkim01.blogspot.com 24
https://cabrillo.blackboard.com 22
http://iatelevision.blogspot.ca 21
http://feeds.feedburner.com 19
http://www.bagtheweb.com 17
http://hyunsu.dd.gl 15
http://iatelevision.blogspot.com.br 15
http://iatelevision.blogspot.fr 15
http://givemecake.dev-work.com 15
http://iatelevision.blogspot.dk 13
http://iatelevision.blogspot.it 13
http://www.bluewavemedia.ca 11
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 16 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi came across the video, the slides look very helpful however I cannot hear the audio. Is there some way you can help?
    Are you sure you want to
    Your message goes here
    Processing…
  • Highly informative!
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice 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?
    Are you sure you want to
    Your message goes here
    Processing…
  • Infomative
    Are you sure you want to
    Your message goes here
    Processing…
  • Good work. Enjoyed it. Thanks for sharing. http://www.clickandsendparcel.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

User Experience Best Practices Presentation Transcript

  • 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