User Experience Best Practices

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

Slide 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

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

Slide 4: WebVisions 2008 What is User Experience? 4

Slide 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

Slide 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

Slide 7: WebVisions 2008 Who controls the User Experience? 7

Slide 8: WebVisions 2008 Who controls the User Experience? 8

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

Slide 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

Slide 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

Slide 12: WebVisions 2008 Criteria 12

Slide 13: WebVisions 2008 The Criteria I Used 13

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

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

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

Slide 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

Slide 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

Slide 19: WebVisions 2008 The Sites 19

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

Slide 21: WebVisions 2008 Amazon.com 21

Slide 22: WebVisions 2008 Amazon.com 22

Slide 23: WebVisions 2008 Amazon.com Nice! 23

Slide 24: WebVisions 2008 Amazon.com Umm? 24

Slide 25: WebVisions 2008 Amazon.com Eek! 25

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

Slide 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

Slide 28: WebVisions 2008 eBay.com 28

Slide 29: WebVisions 2008 eBay.com 29

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

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

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

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

Slide 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

Slide 35: WebVisions 2008 Flickr.com 35

Slide 36: WebVisions 2008 Flickr.com 36

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

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

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

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

Slide 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

Slide 42: WebVisions 2008 Netflix.com 42

Slide 43: WebVisions 2008 Netflix.com 43

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

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

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

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

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

Slide 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

Slide 50: WebVisions 2008 Target.com 50

Slide 51: WebVisions 2008 Target.com 51

Slide 52: WebVisions 2008 Target.com Very nice! 52

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

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

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

Slide 56: WebVisions 2008 Target.com Great work! 56

Slide 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

Slide 58: WebVisions 2008 Toyota.com 58

Slide 59: WebVisions 2008 Toyota.com 59

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

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

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

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

Slide 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

Slide 65: WebVisions 2008 Twitter.com 65

Slide 66: WebVisions 2008 Twitter.com 66

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

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

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

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

Slide 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

Slide 72: WebVisions 2008 Key Takeaways 72

Slide 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

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

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