User Experience Best Practices

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.blueﬂavor.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.nickﬁnck.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 • Netﬂix • 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 eBay.com Exceptionally poorly designed! 33

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 Properly customized search results 39

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 Netﬂix.com 42

WebVisions 2008 Netﬂix.com 43

WebVisions 2008 Netﬂix.com A bit too many options but not too bad! 44

WebVisions 2008 Netﬂix.com Wait, how do I browse genres again?? 45

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

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

WebVisions 2008 Netﬂix.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 reﬁned. 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 Reﬁnement 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 ﬁnd! 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

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

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

http://komunitasweb.com	3287
http://www.soraxdesign.de	1767
http://sparxoo.com	494
http://uxfactory.com	448
http://www.slideshare.net	292
http://postsby.thechadengle.com	147
http://mycourses.tstc.edu	142
http://www.uxfactory.com	141
http://iatelevision.blogspot.com	131
http://otaleonardo.me	129
http://uxbite.com	114
http://www.otaleonardo.com	106
http://www.usability.by	69
http://www.guerillagirl.de	55
http://www.jaykay.pe.kr	49
http://marcogriffiths.wordpress.com	46
http://www.hanrss.com	31
http://nickfinck.com	31
http://www.netbramha.com	25
http://sanjaykumarux.blogspot.com	22
http://www.sparxoo.com	21
https://cabrillo.blackboard.com	19
http://idyeah.com	17
http://givemecake.dev-work.com	15
http://hyunsu.dd.gl	15
http://feeds.feedburner.com	13
http://www.adamsleight.com	11
http://edicolaeuropea.blogspot.com	9
http://www.lmodules.com	8
http://nayatop21.tistory.com	8
http://www.edmodo.com	8
http://www.bluewavemedia.ca	8
http://www.future-proof.jp	7
http://www.coisasdewebdesigner.com	6
http://simpleandopen.blogspot.com	6
http://www.userfree.cn	5
http://onjung.tistory.com	5
https://online.cabrillo.edu	5
http://blog.idyeah.com	5
http://translate.googleusercontent.com	4
http://wildfire.gigya.com	4
http://sharonite.blogspot.com	3
http://dubdeli.blogspot.com	3
http://scrxx.hosting.paran.com	3
file://	3
http://21t0p21.tistory.com	2
http://feeds2.feedburner.com	2
https://www.soraxdesign.de	2
http://paper.li	2
http://uxfactory.tistory.com	2
http://silveryu.tumblr.com	2
http://utswebteam.posterous.com	2
http://xss.yandex.net	2
http://jaykay.pe.kr	2
http://apprentieweb.blogspot.com	2
http://webcache.googleusercontent.com	2
http://webdude.posterous.com	2
http://static.slidesharecdn.com	2
http://www.sanjaykumardesign.com	1
http://trend.wk.to	1
http://mail74.paran.com	1
http://blog.naver.com	1
http://sanjaykumarux.blogspot.in	1
http://www.zenbinder.com	1
http://oops.wk.to	1
http://blogpolls.net	1
http://localhost	1
http://surf.googlemashups.com	1
http://a0.twimg.com	1
http://static.slideshare.net	1
http://historiasdecolectivos.blogspot.com	1
http://www.windbusinessfactor.it	1
http://sparklemeplenty.blogspot.com	1
https://learn.uark.edu	1
http://www.uxd.cl	1
http://207.46.192.232	1
http://bbc6448.tistory.com	1
http://www.sharonite.blogspot.com	1
http://www.innocept.dk	1
http://www.loveux.com	1
http://baca.wk.to	1
http://uedindia.com	1
http://posterous.com	1
http://iatelevision.blogspot.de	1

User Experience Best Practices

by Nick Finck on May 27, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

84 Embeds 7,789

Statistics

User Experience Best Practices — Webinar Transcript