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 Im