Mobile UX Essentials - Silicon Valley IxDA/BayChi
Upcoming SlideShare
Loading in...5
×
 

Mobile UX Essentials - Silicon Valley IxDA/BayChi

on

  • 24,703 views

Recent innovations are causing an inflection point in the mobile UX landscape, providing the opportunity to invent new and more human ways for people to interact with information. But where do ...

Recent innovations are causing an inflection point in the mobile UX landscape, providing the opportunity to invent new and more human ways for people to interact with information. But where do designers who are steeped in the static desktop-computing paradigm begin? The purpose of this talk is to help UX designers and other UX professionals answer that very question. I'll share the three most important mobile design principles to consider when creating a mobile user experience, some mobile design exercises, and mobile prototyping tips.

Statistics

Views

Total Views
24,703
Views on SlideShare
19,522
Embed Views
5,181

Actions

Likes
138
Downloads
1,144
Comments
2

55 Embeds 5,181

http://smallsurfaces.com 1605
http://www.baychi.org 1201
http://www.smallsurfaces.com 456
http://blog.i2fly.com 383
http://howiechang.com 271
http://mobilegui.net 194
http://whos.blogs.ua.sapo.pt 174
http://greatmobileux.com 157
http://www.inventinginteractive.com 121
http://lieveld.nl 86
http://thomas-yung.posterous.com 82
http://www.dmolsen.com 82
http://thenokiareview.com 69
http://getdonovan.com 58
http://innovation-synergy-groups.blogspot.com 38
http://campusphere.de 26
http://www.felgner.ch 24
http://paper.li 18
http://blogs.ua.sapo.pt 16
http://dmolsen.com 16
http://stats.ilicco.com 10
http://translate.googleusercontent.com 8
http://felgner.ch 8
http://ogilvyux.posterous.com 7
http://www.linkedin.com 7
http://posterous.com 6
http://edicolaeuropea.blogspot.com 6
https://ymodules.yammer.com 5
http://safe.tumblr.com 5
http://ergonomilk.com 5
http://static.slidesharecdn.com 4
http://www.techgig.com 3
http://ame.posterous.com 3
http://storify.com 3
http://us-w1.rockmelt.com 2
https://www.linkedin.com 2
http://uxchat.posterous.com 2
http://www.netvibes.com 1
http://apps.staging.webdoc.com 1
http://feeds.feedburner.com 1
http://clipboard.com 1
http://sandbox.clipboard.com 1
http://preview-local.dmolsen.com 1
https://twitter.com 1
http://innovation-synergy-groups.blogspot.fr 1
http://zootool.com 1
http://www.google.dk 1
http://g4e.posterous.com 1
http://honyaku.yahoofs.jp 1
https://p.yammer.com 1
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
  • 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 - Silicon Valley IxDA/BayChi Mobile UX Essentials - Silicon Valley IxDA/BayChi Presentation Transcript

  • Mobile UX EssentialsSilicon Valley IxDA
    Rachel Hinman
    Senior Research Scientist
    Nokia Research Lab
    Palo Alto, California USA
    Title
  • 2004
  • Where do I begin?
    Q:
    Where do I begin
  • 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 the PC and mobile
  • Our plan for today…
    Our plan for today
    Similarities and differences between designing for the PC and mobile
    Three most important attributes of great mobile experiences
  • Our plan for today…
    Our plan for today
    Similarities and differences between designing for the PC 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 the PC and mobile
    Three most important attributes of great mobile experiences
    A set of mobile design principles
    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
  • 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 we are free to experiment and 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 UX presents you with the opportunity to invent new ways for people to interact with information.
  • 31
    iPhone
    Mobile phones aren’t really phones anymore
  • Hypothesis vs. Agenda
  • Hypothesis vs. Agenda
    Work outside the contours
    of your own assumptions
  • Hypothesis vs. Agenda
  • What are the differences?
    What’s the first step?
    A
    Q:
  • 36
    Shift your perspective and point of view
    Step One: Know the medium you’re designing for
  • 37
    Shift your perspective and point of view
    NO EXCUSES!
    Buy a modern mobile device
  • 38
    Shift your perspective and point of view
    Step Two: Participate in the cultureyou are designing for
  • 39
    Shift your perspective and point of view
    Images needed
    Cultivate mobile “mindfulness”
  • 40
    Shift your perspective and point of view
    Step Three: Embrace the chaos
  • 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
    41
  • 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
  • 46
    Solution: Brochure - online
    Brochureware
  • “we need a web presence”
    “We need online commerce!”
    !
    A
  • 48
    Online commerce
    What about shipping?
  • Make it like the world
    “Let’s make our site like…”
    !
    A
    A
  • 50
    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.
  • Design Principle: Uniquely Mobile Focus on what mobile can do well
  • What we learned from the web
    Design Principle: Uniquely Mobile Focus on what mobile can do well
  • vs
    56
    Identify your assumptions
  • 57
    Identify your assumptions
    vs
  • 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
    60
  • 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
    61
  • 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
    62
  • 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
  • 70
    Context Framework
    Context Framework
    steal this slide!
  • 71
    Context Framework
    Context Framework
    steal this slide!
  • 72
    Relationships Chording
    Orchestration and Inflection
  • 73
    Peanut butter
  • 74
    Google: Facebook
    Spatial
  • 75
    Temporal
    Temporal
  • Spatial - peanut butter
    Social
    76
  • Google: Facebook
    Semantic
    77
  • 78
    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!
    80
  • Context Framework
    Mobile is good at spatial and temporal relationships.
    steal this slide!
    81
  • 82
    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.
    83
  • 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
    86
    Text entry will never be easy
  • 87
    Text entry will never be easy
    Design for partial attention and interruption
  • Reduce cognitive load and opportunity cost
    88
  • 89
    Text entry will never be easy
    Ideate in the wild…
  • 90
    Wand in the world
    Your Design Challenge!
    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
  • 91
    “in the wild” ideation
    Activity
    Go outside and brainstorm ideas
  • 92
    “in the wild” ideation
    Activity
    Sketch your ideas…
  • Context Framework
    Mobile is good at places…
    steal this slide!
    93
  • Context Framework
    Mobile is good at places…
    steal this slide!
    94
  • 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
    97
  • Shopping cart
    98
  • Shopping cart
    99
  • We can annotate expectations in the web world
    100
    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
    101
  • Options in mobile have to be readily apparent
    102
    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!
    105
    Wireframe
  • 106
    Wireframe
    GUI = Metaphorics, containment and place
  • 107
    Wireframe
    Recognition vs. Recall
  • 108
    Wireframe
    We’re reaching the edges of what GUI can do
  • 109
    Wireframe
    It’s not longer “what you see is what you get…”
  • 110
    Wireframe
    …now it’s “what you do is what you get”
  • 111
    Wireframe
    Different platforms express characteristics differently
  • 112
    Wireframe
    steal this slide!
  • 113
    Wireframe
    Ruthless editing is part of the NUI design process
  • Say Goodbye to 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 and Web 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
    The Mobile Frontier
    www.rosenfeldmedia.com/books/mobile-design/
    Friday, February 18th
    http://www.uxhongkong.com/
    157
  • 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