Mobile UX- From Principles to Prototypes

Download Mobile UX- From Principles to Prototypes

Post on 03-Jun-2018

213 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    1/169

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    2/169

    Mobile UX

    Rachel HinmanSenior Research Scientist

    Nokia Research Lab

    Palo Alto, California USA

    Hinman

    Part I

    From Principles to Prototypes

    2004

    I used to be a web designer, too

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    3/169

    Q:Where do I begin?

    Where do I begin

    How can we streamline the checkout process

    Q:

    What can we do with

    mobile?

    Q:

    2

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    4/169

    Q:Where do I begin?

    Where do I begin

    Our plan for today8:30am - Noon

    What makes mobile UX different?

    Three Design/Mobile UX Exercises:

    Identifying Mobile Needs Ideating in the Wild

    Creating a Good Hand

    1:30pm 5:30pm

    Mobile prototyping essentials

    Three Mobile Prototyping Exercises

    Storyboarding Translating GUI to NUI

    Creating an In-Screen Prototype

    Noon 1:30pm - LUNCH

    3

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    5/169

    8:30am - Noon

    What makes mobile UX different?

    Similarities and differences between

    designing for web and mobile

    Three most important attributes of

    great mobile experiences

    A set of mobile design principles

    Three mobile design activities

    8:30am - Noon

    What makes mobile UX different?

    Similarities and differences between

    designing for web and mobile

    Three most important attributes of

    great mobile experiences

    A set of mobile design principles

    Three mobile design activities

    4

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    6/169

    8:30am - Noon

    What makes mobile UX different?

    Similarities and differences between

    designing for web and mobile

    Three most important attributes of

    great mobile experiences

    A set of mobile design principles

    Three mobile design activities

    8:30am - Noon

    What makes mobile UX different?

    Similarities and differences between

    designing for web and mobile

    Three most important attributes of

    great mobile experiences

    A set of mobile design principles

    Three mobile design activities

    5

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    7/169

    Okay, lets get started!

    Okay let"s get started

    A

    What are the similarities

    What are the similarities?:

    6

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    8/169

    UX designers know how to work

    in a rapidly evolving field

    13

    Web designers know how to work in a rapidly evolving field

    UX designers understand how to create

    experiences within technical constraints

    14

    Ability to work within technical constraints

    7

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    9/169

    UX designers use similar

    tools and processes

    15

    Similar Tools Similar processes

    A

    What are the differences?

    Q: What are the differences?:

    8

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    10/169

    A mobile phone is not a computer

    17

    A mobile phone is not a computer

    A umm. duh!

    Um duh!

    9

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    11/169

    19

    Differences in the mobile environment

    Seated in a relatively predictable environment

    Large screen enables multi-tasking

    Keyboard and a mouse for input

    20

    Differences in the mobile environment

    Seated in a relatively predictable environment

    Large screen enables multi-tasking

    Keyboard and a mouse for input

    10

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    12/169

    21

    Differences in the mobile environment

    Highly variable context and environment

    Small screen size and limited text input

    UI takes up the entire screen

    Difficult to multi-task and easy to get lost

    22

    Mobile phones started out as a one-to-one

    11

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    13/169

    They evolved

    23

    Mobile phones evolved from the landline phone

    24

    12

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    14/169

    26

    Smartphone added

    13

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    15/169

    27

    Smartphone added

    27

    The Rearview Mirror Effect

    14

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    16/169

    Even in situations in which a spirit of

    exploration and freedom exist, where faculty

    are free to experiment to work beyond physicaland social constraints, our cognitive habits

    often get in the way.

    Marshall McLuhan called it the rear-viewmirror effect, noting that We see the world

    through a rear-view mirror. We marchbackwards into the future.

    Even in situations in which a spirit of

    exploration and freedom exist, where we are

    free to experiment and work beyond physicaland social constraints,our cognitive habits often get in the way.

    Marshall McLuhan called itthe rear-view mirror effect, noting that

    We see the world through a rear-view mirror.We march backwards into the future.

    30

    Mobile presents an

    opportunity to inventnew ways for users to

    interact with information.

    15

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    17/169

    31

    iPhone

    Mobile phones arent really phones anymore

    Hypothesis vs. Agenda

    16

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    18/169

    Hypothesis vs. Agenda

    Hypothesis vs. Agenda

    17

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    19/169

    Hypothesis vs. Agenda

    A

    What are the differences?

    Whats the first step?:

    18

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    20/169

    3Steps

    37

    38

    Shift your perspective and point of view

    Step One: Become familiar

    with the medium youre designing for

    19

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    21/169

    39

    Shift your perspective and point of view

    NOEXCUSESBuy a modern mobile device

    40

    Shift your perspective and point of view

    Step Two: Mobile culture indoctrination

    20

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    22/169

    41

    Shift your perspective and point of view

    Images needed

    Observe the culture youre designing for

    42

    Shift your perspective and point of view

    Step Three: Brace yourself

    for a fast and exciting ride

    21

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    23/169

    43

    Rapid Evolution

    The rapid development of cell phones is killing

    early cell phones much faster than it's killing any

    of the early, older legacy technologies.

    I think that is a real principle... something you

    have to understand if you're going to be in this

    line of work. It's very romantic. It's very fast

    moving.

    You are building dead lumps of plastic.

    When people come out and they show you an

    iPhone, or an Android... they are showing you

    larval versions of something much more

    sophisticated.

    The world you are building right now is the

    ground floor for something much larger -- and

    the soil beneath that ground floor is violently

    unstable.

    -- Mobile Monday Amsterdam November 2008

    are uniquely mobile

    Great Mobile user experiences

    Great Mobile Experiences:

    are sympathetic to context

    speak their power3

    1

    2

    3

    22

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    24/169

    are uniquely mobile

    Great Mobile user experiences

    Great Mobile Experiences:

    are sympathetic to context

    speak their power3

    1

    2

    3

    A

    Do you remember a time

    Do you remember a

    time when the web was

    new?

    Q:

    23

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    25/169

    A

    Do you remember a time

    We need a web presence!!

    48

    Solution: Brochure - online

    Brochureware

    24

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    26/169

    we need a web presence

    A We need online commerce!!

    50

    Online commerce

    What about shipping?

    25

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    27/169

    A

    Make it like the world

    A Lets make our site like!

    52

    Southwest airlines

    26

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    28/169

    We confused the solution with the

    need.

    What we learned from the web

    Lessons Learned from Web

    We borrowed broken models.Too focused on tactics.

    We didnt focus on what the web

    could do well.

    A

    How do we not do that again?

    AHow do we NOT

    do that again?

    Q:

    27

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    29/169

    Technology can guide, but should not

    be the focus.

    Focus on needsinstead of tactics andsolutions.

    What we learned from the web

    Design PrinciplesUniquely Mobile

    Mobile is a unique & different medium

    - focus on what it can do well.

    VS.

    28

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    30/169

    What we learned from the web

    Design Principle: Uniquely Mobile

    Focus on what mobile can do well

    58

    Identify your assumptions

    vs

    29

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    31/169

    59

    Identify your assumptions

    vs

    What we learned from the web

    Design Principle: Uniquely Mobile

    Technology can help guide,

    but should not be the focus

    30

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    32/169

    What we learned from the web

    Design Principle: Uniquely Mobile

    Need vs. Solution

    62

    Identify your assumptions

    Research Techniques

    Diary Studies Contextualinterviews

    INVASIVE

    LESS INVASIVE

    RESEARCHERPRESENT

    RESEARCHERNOT PRESENT

    Deprivation

    Study

    OnlineSurvey

    Shop Alongs

    PrototypeTesting

    Traffic Studies

    Shadowing

    31

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    33/169

    63

    Identify your assumptions

    Research Techniques

    Diary Studies Contextualinterviews

    INVASIVE

    LESS INVASIVE

    RESEARCHERPRESENT

    RESEARCHERNOT PRESENT

    Deprivation

    Study

    OnlineSurvey

    Shop Alongs

    PrototypeTesting

    Traffic Studies

    Shadowing

    Use Two Techniques

    64

    Identify your assumptions

    Solution SpeakSolution NeedDatabase of Dr. Names Find a Doctor near me

    Map Get from point A to Point B

    Calendar I need to know what may happen

    Email I need to communicate

    Facebook Updates I need to feel connected

    LinkedIn I need to manage my identity

    Search I need to answer a question

    Picassa I need to share

    32

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    34/169

    65

    Identify your assumptions

    Your Design Challenge!

    Create a mobile experience for thePortland Marriott Hotel

    66

    Identify your assumptions

    Your Design Challenge!Step 1: Identifying Mobile Needs

    1.# Divide into groups

    2.# Develop a list of mobile

    needs3.# Identify top 3-5 mobile

    needs

    25 Minutes

    33

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    35/169

    are uniquely mobile

    Great Mobile user experiences

    Great Mobile Experiences:

    are sympathetic to context

    speak their power3

    1

    2

    3

    Pictures of mobile contexts

    AWhat exactly do you mean by

    mobile context ?

    Q:

    34

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    36/169

    A

    Pictures of mobile contexts

    More pictures of mobile contexts

    35

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    37/169

    Social context

    A

    Context is complex

    Context is complex!!

    36

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    38/169

    A

    Context is about

    understanding

    human relationships to

    the people, places and

    thingsin the world.

    Context is about understanding the relationships

    74

    Context Framework

    Context Framework

    37

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    39/169

    75

    Context Framework

    Context Framework

    76

    Relationships Chording

    Orchestration and Inflection

    38

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    40/169

    77

    Peanut butter

    78

    Google: Facebook

    Spatial

    39

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    41/169

    79

    Temporal

    Temporal

    80

    Spatial - peanut butter

    Social

    40

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    42/169

    81

    Google: Facebook

    Semantic

    82

    Peanut butter in Denver

    Peanut butter in Melbourne right now?

    41

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    43/169

    A

    The web is good at

    peopleand things.

    The web is really good at

    semantic relationships.

    (and okay at social relationships)

    Context is about understanding the relationships

    84

    Context Framework

    Mobile is good at places

    42

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    44/169

    85

    Context Framework

    Mobile is good at spatial

    and temporal relationships.

    86

    Google maps - PC vs. Mobile

    43

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    45/169

    Temporal and spatial relationships are underserved

    There are currently not

    many technologiesthat help us understand

    place, and temporal and

    spatial relationships.

    87

    How do you get that understanding?

    How do we get that

    understanding?

    Q:

    44

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    46/169

    Design for partial attentionand interruption

    Sympathy to context principles

    Design Principles:

    Sympathy to Context

    Reduce cognitive load

    and opportunity cost

    Ideate in the wild

    90

    Text entry will never be easy

    Design for partial attention and interruption

    45

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    47/169

    91

    Text entry will never be easy

    Design for partial attention and interruption

    92

    Cognitive Load

    46

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    48/169

    93

    Opportunity cost

    94

    Text entry will never be easy

    Ideate in the wild

    47

    UX Immersion Conference, April 2012All materials 2012

  • 8/13/2019 Mobile UX- From Principles to Prototypes

    49/169

    95

    Identify your a...