• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile UX Essentials
 

Mobile UX Essentials

on

  • 6,222 views

Slides from Mobile UX Essentials workshop at UX Australia, 2010

Slides from Mobile UX Essentials workshop at UX Australia, 2010

Statistics

Views

Total Views
6,222
Views on SlideShare
5,209
Embed Views
1,013

Actions

Likes
33
Downloads
250
Comments
2

7 Embeds 1,013

http://research.nokia.com 846
http://www.uxaustralia.com.au 106
http://fritzboyle.com 25
http://lanyrd.com 17
http://www.linkedin.com 8
https://www.linkedin.com 6
http://www.techgig.com 5
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile UX Essentials Mobile UX Essentials Presentation Transcript

    • Mobile UX EssentialsUX Australia 2010
      Rachel Hinman
      Senior Research Scientist
      Nokia Research Lab
      Palo Alto, California USA
      Title
    • 2004
      I used to be a web designer, too
    • Where do I begin?
      Q:
      Where do I begin
    • How can we streamline the checkout process
      What can we do with mobile?
      Q:
      Q:
    • Where do I begin?
      Q:
      Where do I begin
    • Our plan for today…
      Our plan for today
      Similarities and differences between designing for web and mobile
    • Our plan for today…
      Our plan for today
      Similarities and differences between designing for web and mobile
      Three most important attributes of great mobile experiences
    • Our plan for today…
      Our plan for today
      Similarities and differences between designing for web and mobile
      Three most important attributes of great mobile experiences
      A set of mobile design principles
    • Our plan for today…
      Our plan for today
      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
    • Along the way…
      Along the way
      Watch for slides with this orange label!
      Slides Worth Keeping
      Design Principles
      Design Activities
      Shameless Opinion
    • Okay, let’s get started!
      Okay… let’s get started
    • A
      What are the similarities
      What are the similarities?
      Q:
    • 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
    • UX designers use similar tools and processes
      15
      Similar Tools… Similar processes
    • What are the differences?
      What are the differences?
      A
      Q:
    • A mobile phone is not a computer
      17
      A mobile phone is not a computer
    • umm…. duh!
      A
      Um… duh!
    • 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
    • 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
      21
    • 22
      Mobile phones started out as a one-to-one
    • They evolved
      23
    • Mobile phones evolved from the landline phone
      24
    • 26
      Smartphone… added
    • 27
      Smartphone… added
      Opinion!
      27
    • Hypothesis vs. Agenda
      The Rearview Mirror
    • Hypothesis vs. Agenda
      Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical and social constraints, our cognitive habits often get in the way. Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a rear-view mirror. We march backwards into the future.”
      Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical and social constraints, our cognitive habits often get in the way. Marshall McLuhan called it“the 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 invent new ways…
      Opinion!
      Mobile presents an opportunity to invent new ways for users to interact with information.
    • 31
      iPhone
      Mobile phones aren’t really phones anymore
    • Hypothesis vs. Agenda
    • Hypothesis vs. Agenda
    • Hypothesis vs. Agenda
    • Hypothesis vs. Agenda
    • Hypothesis vs. Agenda
    • What are the differences?
      What’s the first step?
      A
      Q:
    • 39
      Shift your perspective and point of view
      Step One: Know the medium you’re designing for
    • 40
      Shift your perspective and point of view
      NO EXCUSES!
      Buy a modern mobile device
    • 41
      Shift your perspective and point of view
      Mobile Culture Indoctrination
    • 42
      Shift your perspective and point of view
      Mobile Culture Indoctrination
    • 43
      Shift your perspective and point of view
      Images needed
      Step Two: Observe the culture you’re designing for
    • 44
      Shift your perspective and point of view
      Step Three: Brace yourself for a fast and exciting ride
    • Shift your perspective and point of view
      “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
      Rapid Evolution
      45
    • 1
      are uniquely mobile
      Great Mobile user experiences
      steal this slide!
      Great Mobile Experiences:
      2
      are sympathetic to context
      3
      speak their power
    • Great Mobile Experiences:
      1
      are uniquely mobile
      Great Mobile user experiences
    • Do you remember a time…
      Do you remember a time when the web was new?
      Q:
      A
    • Do you remember a time…
      “We need a web presence!”
      !
      A
    • 50
      Solution: Brochure - online
      Brochureware
    • “we need a web presence”
      “We need online commerce!”
      !
      A
    • 52
      Online commerce
      What about shipping?
    • Make it like the world
      “Let’s make our site like…”
      !
      A
      A
    • 54
      Southwest airlines
    • What we learned from the web
      Lessons Learned from Web
      We borrowed broken models. Too focused on tactics.
      We confused the solution with the need.
      We didn’t focus on what the web could do well.
    • How do we not do that again?
      How do we NOT do that again?
      Q:
      A
      A
    • What we learned from the web
      steal this slide!
      Design PrinciplesUniquely Mobile
      Mobile is a unique & different medium- focus on what it can do well.
      Technology can guide, but should not be the focus.
      Focus on needs instead of tactics and solutions.
    • What we learned from the web
      Design Principle: Uniquely Mobile Focus on what mobile can do well
    • What we learned from the web
      Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus
    • What we learned from the web
      Design Principle: Uniquely Mobile Need vs. Solution
    • Identify your assumptions
      Research Techniques
      INVASIVE
      Prototype
      Testing
      Deprivation
      Study
      Contextual
      interviews
      Diary Studies
      RESEARCHER
      PRESENT
      RESEARCHER
      NOT PRESENT
      Online
      Survey
      Shadowing
      Shop Alongs
      Traffic
      Studies
      LESS INVASIVE
      61
    • Identify your assumptions
      Research Techniques
      INVASIVE
      Prototype
      Testing
      Deprivation
      Study
      Use Two Techniques
      Contextual
      interviews
      Diary Studies
      RESEARCHER
      PRESENT
      RESEARCHER
      NOT PRESENT
      Online
      Survey
      Shadowing
      Shop Alongs
      Traffic
      Studies
      LESS INVASIVE
      62
    • Identify your assumptions
      Research Techniques
      INVASIVE
      Prototype
      Testing
      Deprivation
      Study
      Contextual
      interviews
      Diary Studies
      RESEARCHER
      PRESENT
      RESEARCHER
      NOT PRESENT
      Online
      Survey
      Shadowing
      Shop Alongs
      Traffic
      Studies
      LESS INVASIVE
      63
    • 64
      Identify your assumptions
      Your Design Challenge!
      Step 1: Identifying Mobile Needs
      Activity
      Divide into groups
      Read your design challenge
      Develop a list of mobile needs
      Identify top 3-5 mobile needs
      20 Minutes
    • are uniquely mobile
      1
      Great Mobile user experiences
      Great Mobile Experiences:
      are sympathetic to context
      2
    • Pictures of mobile contexts
      What exactly do you mean by mobile “context” ?
      Q:
      A
    • Pictures of mobile contexts
      A
    • More pictures of mobile contexts
    • Social context
    • Context is complex
      Context is complex!
      !
      A
    • Context is about understanding human relationships to the people,places and things in the world.
      A
      Context is about understanding the relationships
    • 72
      Context Framework
      Context Framework
      steal this slide!
    • 73
      Context Framework
      Context Framework
      steal this slide!
    • 74
      Relationships Chording
      Orchestration and Inflection
    • 75
      Peanut butter
    • 76
      Google: Facebook
      Spatial
    • 77
      Temporal
      Temporal
    • Spatial - peanut butter
      Social
      78
    • Google: Facebook
      Semantic
      79
    • 80
      Peanut butter in Denver
      Peanut butter in Melbourne right now?
    • The web is good at people and things.
      The web is good at semantic relationships.
      (and okay at social relationships)
      A
      Context is about understanding the relationships
    • Context Framework
      Mobile is good at places…
      steal this slide!
      82
    • Context Framework
      Mobile is good at spatial and temporal relationships.
      steal this slide!
      83
    • 84
      Google maps - PC vs. Mobile
    • Temporal and spatial relationships are underserved
      There are currently not many technologiesthat help us understand place, and temporal and spatial relationships.
      85
    • How do you get that understanding?
      How do we get that understanding?
      Q:
    • Design for partial attention and interruption
      1
      Sympathy to context principles
      Design Principles:
      Sympathy to Context
      steal this slide!
      2
      Reduce cognitive load and opportunity cost
      3
      Ideate in the wild
    • Design for partial attention and interruption
      88
      Text entry will never be easy
    • 89
      Text entry will never be easy
      Design for partial attention and interruption
    • Opportunity cost
      90
    • 91
      Text entry will never be easy
      Ideate in the wild…
    • 92
      Wand in the world
      Your Design Challenge!
      Step 2: Sympathy to the mobile context
      Activity
      Divide into groups
      Head to the streets
      Ideate in the wild – Create 2-3 concepts based on the needs your team identified
      20-30 Minutes
    • 93
      “in the wild” ideation
      Activity
      Go outside and brainstorm ideas
    • 94
      “in the wild” ideation
      Activity
      20-30 Minutes
    • Context Framework
      Mobile is good at places…
      steal this slide!
      95
    • Context Framework
      Mobile is good at places…
      steal this slide!
      96
    • Great Mobile Experiences:
      are uniquely mobile
      1
      Great Mobile user experiences
      are sympathetic to context
      2
      speak their power
      3
    • Speak their power?
      Huh?
      Q:
      A
    • A light switch
      99
    • Shopping cart
      100
    • Shopping cart
      101
    • We can annotate expectations in the web world
      102
      We can annotate expectations in the web world
    • We can annotate expectations in the web world
      Free two-day shipping
      Look inside the book
      REALLY!Look inside the book
      Get it new OR used!
      Sell mine
      Add to cart
      Shipping!
      Collectible!
      Maybe a kindle!
      We can annotate expectations in the web world
      103
    • Options in mobile have to be readily apparent
      104
      Options have to be apparent and intuitive in mobile for people to
    • How do you make interfaces that speak their power
      How do I create mobile interfaces that “speak their power”?
      Q:
      A
    • Say good bye to done
      steal this slide!
      Design Principles:
      Interfaces that speak their power
      Understand the characteristics of GUI, NUI, OUI interfaces
      1
      2
      Grow ruthless editing skills
      3
      Say good-bye to done
    • steal this slide!
      107
      Wireframe
    • 108
      Wireframe
      We’re reaching the edges of what GUI can do
    • 109
      Wireframe
      It’s not longer “what you see it what you get…”
    • 110
      Wireframe
      …now it’s “what you do is what you get”
    • 111
      Wireframe
      Different platforms express characteristics differently
    • steal this slide!
      112
      Wireframe
    • 113
      Wireframe
      Ruthless editing is part of the NUI design process
    • Say Goodbye do done
      114
      Wireframe
    • This should look familiar…
      115
      Wireframe
    • 116
      Wireframe
      This should look familiar…
      The web has evolved around a task-efficiency model.
      Mobile is different.
    • Mobile is different….
      117
      Mobile is different
    • Mobile is different….
      118
      Mobile is different
    • 119
      Mobile is different
      Mobile is different….
      Mobile is about pivoting people through information quickly.
      It’s about exposing possibilities.
    • What’s the point?
      “What can happen?”
      “What’s the point?”
      TASK
      POSSIBILITIES
    • Tasks are about completion…
      121
      Tasks are about completion
    • 122
      Tasks are about completion
      Tasks are about completion…
      Possibilities are interactions that accrue over time…
    • Tasks are about completion
      Tasks are about completion…
      Possibilities are interactions that accrue over time…
      … or facilitate exploration…
      123
    • … or facilitate exploration…
      124
      Tasks are about completion
      Tasks are about completion…
      Possibilities are interactions that accrue over time…
      ..or are about SENSING
      INTENT!
    • 125
      Example -
    • 126
      Example -
    • 127
      Example -
    • 128
      Example -
    • 129
      Example -
    • 130
      Example -
    • How do you make interfaces that speak their power
      How do I design for possibilities?
      Q:
      A
    • How do you make interfaces that speak their power
      A
      132
    • How do you make interfaces that speak their power
      A
      133
    • How do you make interfaces that speak their power
      A
      134
    • It’s like a card game…
      135
      It’s like a game of cards
    • Each card speaks it’s power
      136
      It’s like a game of cards
    • You win with a good hand
      137
      It’s like a game of cards
    • Pivoting people through information
      Your Design Challenge!
      Step 3: Creating a good hand
      Activity
      138
    • Pivoting people through information
      139
    • Pivoting people through information
      Create a winning hand.
      Activity
      140
    • Pivoting people through information
      Create a winning hand.
      Activity
      Stitch cards together to answer the question
      Allow people to pivot through information quickly
      141
    • Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      142
      Prototype
    • 143
      Analogy of cards
      Process
      Prototype at every stage
    • 144
      Analogy of cards
      Process
      Prototyping “Swirl”
    • Pivoting people through information
      145
    • Pivoting people through information
      146
    • Paper Prototype example
      147
    • Pivoting people through information
      148
    • High fidelity prototype example
    • Can users grok it?
      Can users grok it?
      Does each screen speak it’s power?
      Can I simplify this?
      Is this intuitive?
      Q:
      Q:
      Q:
      Q:
      150
    • Analogy of cards
      steal this slide!
      Tips for mobile prototyping
      Plan for a lot of it!
      1
      Work at scale and print it out!
      2
      Get it on the device as soon as you can.
      2
      151
    • Analogy of cards
      Some info about mobile web/ and app programming:
      iPhone Apps = Xcode
      1
      Android Apps = Java (managed code)
      2
      Mobile Web Sites = Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites andWeb Apps by Brian Fling
      152
    • Where do I begin?
      Where do I begin?
      Q:
    • are uniquely mobile
      1
      Great Mobile user experiences
      steal this slide!
      Great Mobile Experiences:
      are sympathetic to context
      2
      speak their power
      3
    • Everybody starts somewhere
      Everybody starts somewhere….
    • Good luck
      Good luck!
    • Thank you!
      Email:
      rachel.hinman@nokia.com
      Thanks, and next up…
    • Resources:
      MOBILE RESOURCESUltimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413
      mooTools http://mootools.netiUI iPhone navigation (javascript):http://code.google.com/p/iui/
      jQuery (javascript):http://jquery.com/
      TweenMax (actionscript):http://blog.greensock.com/tweenmaxas3/
      Bruce Sterling speaks on the future of mobilehttp://tinyurl.com/6m7kwc
      RESOURCES
    • Q?
      Q&A: final break