ux best practices

Download Ux Best Practices

Post on 08-Feb-2016

14 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

User Experience, UX

TRANSCRIPT

  • WebVisions 2008

    UX Best Practices

    Nick FinckMay 22nd, 2008WebVisions, Portland

    1

  • WebVisions 2008

    Who the hell is this guy?

    Blue FlavorDirector of User Experience, co-founder, partnerhttp://www.blueflavor.com

    Digital Web MagazinePublisher and founderhttp://www.digital-web.com

    User Experience NetworkSeattle Local Ambassadorhttp://www.uxnet.org

    My Personal Sitehttp://www.nickfinck.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

    User Experience (abbreviated: UX) is the quality of experience a person has when interacting with a specic design. is can range from a specic 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

    UX Defined

  • WebVisions 2008

    6

    Use

    r N

    eeds

    Technical Requirements

    Business C

    onstraints

    What things factor in to the ideal user experience?

  • WebVisions 2008

    7

    Who controls the User Experience?

  • WebVisions 2008

    8

    Who controls the User Experience?

  • WebVisions 2008

    9

    InformationArchitect

    WebDesigner

    InteractionDesigner

    InformationDesigner

    UsabilitySpecialist

    Who controls the User Experience?

  • WebVisions 2008

    10

    InformationArchitect

    WebDesigner

    InteractionDesigner

    InformationDesigner

    UsabilitySpecialist

    Who controls the User Experience?

    IdentityDesigner

    Taxonomist InteractiveMarketer

    Human FactorsExpert

    ContentSpecialist

  • WebVisions 2008

    11

    InformationArchitect

    WebDesigner

    InteractionDesigner

    InformationDesigner

    UsabilitySpecialist

    Who controls the User Experience?

    IdentityDesigner

    Taxonomist InteractiveMarketer

    Human FactorsExpert

    ContentSpecialist

    UX Lead

  • WebVisions 2008

    Criteria

    12

  • WebVisions 2008

    The Criteria I Used

    13

  • WebVisions 2008

    The Criteria I Used

    Ease of Use (Usability)

    14

    UsabilitySpecialist

  • WebVisions 2008

    The Criteria I Used

    Ease of Use (Usability)

    Intuitiveness (Information Design)

    15

    InformationDesigner

    UsabilitySpecialist

  • WebVisions 2008

    The Criteria I Used

    Ease of Use (Usability)

    Intuitiveness (Information Design)

    Structure (Information Architecture)

    16

    InformationArchitect

    InformationDesigner

    UsabilitySpecialist

  • WebVisions 2008

    The Criteria I Used

    Ease of Use (Usability)

    Intuitiveness (Information Design)

    Structure (Information Architecture)

    Visual Aesthetic (Visual Design)

    17

    InformationArchitect

    WebDesigner

    InformationDesigner

    UsabilitySpecialist

  • WebVisions 2008

    The Criteria I Used

    Ease of Use (Usability)

    Intuitiveness (Information Design)

    Structure (Information Architecture)

    Visual Aesthetic (Visual Design)

    Functionality (Interaction Design)

    18

    InformationArchitect

    WebDesigner

    InteractionDesigner

    InformationDesigner

    UsabilitySpecialist

  • WebVisions 2008

    The Sites

    19

  • WebVisions 2008

    The sites I looked at:

    Amazon

    eBay

    Flickr

    Netflix

    Target

    Toyota

    Twitter

    Zillow

    20

  • WebVisions 2008

    Amazon.com

    21

  • WebVisions 2008

    Amazon.com

    22

  • WebVisions 2008

    Amazon.com

    23

    Nice!

  • WebVisions 2008

    Amazon.com

    24

    Umm?

  • WebVisions 2008

    Amazon.com

    25

    Eek!

  • WebVisions 2008

    Amazon.com

    26

    Which button do I click to add it to my

    wishlist?!

  • WebVisions 2008

    Some of the key problems:

    Data DrivenUser experience driven mostly by data analysis (quantitative) and not user input (qualitative)

    Improper FunctionalityNavigational functionality should always properly support the level of information on a site

    Business TrumpingBusiness drivers and business decisions should never over power the users needs, it should be a balance

    27

  • WebVisions 2008

    eBay.com

    28

  • WebVisions 2008

    eBay.com

    29

  • WebVisions 2008

    eBay.com

    30

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

  • WebVisions 2008

    eBay.com

    31

    Wow, ok, way too many links to possibly read

    through at once!

  • WebVisions 2008

    eBay.com

    32

    Exceptionally well designed!

  • WebVisions 2008

    eBay.com

    33

    Exceptionally poorly designed!

  • WebVisions 2008

    Some of the key problems:

    Data DrivenUser experience driven mostly by user input (qualitative) and not data analysis (quantitative)

    Design DetailsAlways give every page of a site as much attention as the next when designing. All pages added up make up the user experience.

    Navigation BreathNavigation 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

    37

    Good break down of information in navigation

  • WebVisions 2008

    Flickr.com

    38

    Overwhelming and incomplete information

  • WebVisions 2008

    Flickr.com

    39

    Properly customized search results

  • WebVisions 2008

    Flickr.com

    40

    Clearly thought through on all aspects of UX

  • WebVisions 2008

    Some of the key problems:

    Community Driving ArchitectureCommunity functionality (Folksonomies) should never drive a sites architecture and navigation, it should be a supplement

    Browse & SearchWebsites should never rely on search as primary navigation

    By Popularity vs. See AllIf you show part of a set of information you should always allow access to the remainder of that set of information

    41

  • WebVisions 2008

    Netflix.com

    42

  • WebVisions 2008

    Netflix.com

    43

  • WebVisions 2008

    Netflix.com

    44

    A bit too many options but not too bad!

  • WebVisions 2008

    Netflix.com

    45

    Wait, how do I browse genres again??

  • WebVisions 2008

    Netflix.com

    46

    Nicely done, but how do I instantly play

    movies?

  • WebVisions 2008

    Netflix.com

    47

    Ok, no, I just want to add this one move to

    my Queue!

  • WebVisions 2008

    Netflix.com

    48

    Ok, there is my Queue, but whats this

    Instant tab for?

  • WebVisions 2008

    Some of the key problems:

    Alternative Facets of InformationAllow users to clearly see the primary information on a given screen, dont overwhelm the user with other facets of that information

    Add vs. PlayIf your product has two ways of purchasing, make it inherent in the existing architecture

    Dont DistractDo 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

    52

    Very nice!

  • WebVisions 2008

    Target.com

    53

    Not bad, could be a little more refined.

  • WebVisions 2008

    Target.com

    54

    Excellent work but clean up that

    whitespace.

  • WebVisions 2008

    Target.com

    55

    Using pop-ups here is not such a

    good idea.

  • WebVisions 2008

    Target.com

    56

    Great work!

  • WebVisions 2008

    Some of the key problems:

    Restricting FeaturesTechnology and features should never limit or restrict users and systems from accessing them

    Simplify NavigationThe amount of options and paths in a navigation should never overwhelm the user

    Design RefinementWhen 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

    60

    Well done, good visuals!

  • WebVisions 2008

    Toyota.com

    61

    Pretty good execution tho a bit

    gratuitous.

  • WebVisions 2008

    Toyota.com

    62

    Products as navigation, nicely

    done.

  • WebVisions 2008

    Toyota.com

    63

    Good product comparison, but what about

    the competitors?

  • WebVisions 2008

    Some of the key problems:

    Unnecessary PagesDont make users click through extra pages when they dont need to.

    Over use of technologyKeep pages accessible dont use limiting technology if its not absolutely needed.

    Restricted comparisonAllow users to compare not just products in a given line but all of your products side by side.

    64

  • WebVisi