Mobile Prototyping Essentials
Upcoming SlideShare
Loading in...5
×
 

Mobile Prototyping Essentials

on

  • 18,101 views

Presentation on mobile prototyping presented at Web Directions Unplugged in Seattle, May 12 - 13, 2011

Presentation on mobile prototyping presented at Web Directions Unplugged in Seattle, May 12 - 13, 2011

Statistics

Views

Total Views
18,101
Views on SlideShare
11,623
Embed Views
6,478

Actions

Likes
71
Downloads
550
Comments
3

30 Embeds 6,478

http://www.theuxbookmark.com 1660
http://rachelhinman.com 1041
http://www.webdirections.org 1027
http://www.rachelhinman.com 914
http://www.jvetrau.com 774
http://www.rosenfeldmedia.com 328
http://www.boobox.ru 324
http://rosenfeldmedia.com 180
http://feeds.feedburner.com 169
https://pramati.qontext.com 15
http://usabilityandwebdes.collected.info 10
http://webcache.googleusercontent.com 5
url_unknown 5
http://www.feedspot.com 4
http://translate.googleusercontent.com 4
http://paper.li 3
http://www.slideshare.net 2
http://www.google.com HTTP 1
https://twitter.com 1
http://twitter.com 1
http://www.linkedin.com 1
http://feedproxy.google.com 1
http://www.twylah.com 1
http://mvuinc.tumblr.com 1
http://www.hanrss.com 1
http://chinaberry:15871 1
http://ucdteamatwps.posterous.com 1
http://strawberryj.am 1
http://www.dashdot.nl 1
http://feedly.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 Prototyping Essentials Mobile Prototyping Essentials Presentation Transcript

  • Title
    Mobile Prototyping EssentialsWeb Directions Unplugged
    Rachel Hinman
    Senior Research Scientist
    Nokia Research Lab
    Palo Alto, California USA
  • I used to be a web designer, too
  • How can we streamline the checkout process
    What makes mobile UX different?
    Q:
    Q:
  • Where do I begin
  • Where do I begin
    “I would have made different choices.”
  • Where do I begin
    Key Difference =
    Different Design Choices
  • Our plan for today…
    Our plan for today
    Identify where things usually go wrong during the mobile UX process
  • Our plan for today…
    Our plan for today
    Identify where things usually go wrong during the mobile UX process
    Review the four “whys” of prototyping
  • Our plan for today…
    Our plan for today
    Identify where things usually go wrong during the mobile UX process
    Review the four “whys” of prototyping
    Identify the two genres of mobile prototyping
  • Our plan for today…
    Our plan for today
    Identify where things usually go wrong during the mobile UX process
    Review the four “whys” of prototyping
    Identify the two genres of mobile prototyping
    Overview/how-to of six mobile prototyping methods
  • 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
  • A
    What are the similarities
  • A
    What are the similarities
  • ?
    16
    Web designers know how to work in a rapidly evolving field
  • 17
    Web designers know how to work in a rapidly evolving field
  • Bad Decision-Making
    18
    Web designers know how to work in a rapidly evolving field
  • The final diamond is where good design decisions matter most…
    19
  • The final diamond is where good design decisions matter most…
    …and where designers new to mobile have the least domain specific skill and confidence.
    20
    Web designers know how to work in a rapidly evolving field
  • Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    21
    Prototype
  • PC Prototypingis considered a
    Luxury
    A
    Um… duh!
  • Mobile Prototyping is
    Essential
    A
    Um… duh!
  • 24
    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
    25
  • Designers new to mobile don’t have the domain specific skills or heuristics to lean on.
    A
    Um… duh!
  • The best way to develop those skills is to prototype early and often.
    A
    Um… duh!
  • Prototypes are the ultimate
    decision-making aid.
    A
    Um… duh!
  • What we learned from the web
    steal this slide!
    “Whys” of prototyping
    Improve your design decision-making
    Communicate an Idea
    Gather User Feedback
    Explore the “Unknowns”
    Fine-tune an Idea
  • Communicating an Idea or Experience
    YouTube Video
  • Hypothesis vs. Agenda
    Gather User Feedback
  • Hypothesis vs. Agenda
    Exploring the Unknowns
  • Hypothesis vs. Agenda
    Fine-Tune an Idea
  • Two Genres
    34
    Web designers know how to work in a rapidly evolving field
  • Tactical Prototyping
  • Hypothesis vs. Agenda
    Experiential Prototyping
  • You are working on a “focused” mobile project.
    1
    Sympathy to context principles
    Tactical Prototyping:
    Best suited for design explorations where:
    steal this slide!
    2
    Target mobile hardware and software scope is known.
    3
    The design space is relatively known.
  • You are working on a “broader” mobile project.
    1
    Sympathy to context principles
    Experiential Prototyping:
    Best suited for design explorations where:
    steal this slide!
    2
    Target mobile hardware and software scope is unknown.(perhaps being created).
    3
    The design space is relatively unchartered.
  • Hypothesis vs. Agenda
    Tactical Prototyping
  • What we learned from the web
    steal this slide!
    Tactical Prototypes
    Sketching
    In-Screen Mobile Prototypes
    Mobile Browser Prototypes
    Keynote/Powerpoint Prototypes
    Flash Prototype
    Platform Specific Prototype
  • What we learned from the web
    steal this slide!
    Tactical Prototypes
    Sketching
    In-Screen Mobile Prototypes
    Mobile Browser Prototypes
    Keynote/Powerpoint Prototypes
    Flash Prototype
    Platform Specific Prototype
  • Hypothesis vs. Agenda
    Sketching
  • Hypothesis vs. Agenda
    Great Mobile UIs Speak their Power
  • Speak their power?
    Huh?
    Q:
    A
  • A light switch
  • Shopping cart
    46
  • Shopping cart
    47
  • We can annotate expectations in the web world
    48
    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!
  • Options have to be apparent and intuitive in mobile for people to
  • 51
    Text entry will never be easy
    Design for partial attention and interruption
  • How do you make interfaces that speak their power
    How do I create mobile interfaces that “speak their power”?
    Q:
    A
  • Edit!!!
    53
    Web designers know how to work in a rapidly evolving field
  • RuthlessEditing
    54
    Web designers know how to work in a rapidly evolving field
  • Each card speaks it’s power
    55
    It’s like a game of cards
  • Let the Content be the Star
    56
    It’s like a game of cards
  • Pivoting people through information
    57
  • Pivoting people through information
    Claiming you can’t draw get’s you labeled a “whiner”
    58
  • What we learned from the web
    steal this slide!
    Tips for Ruthless Editing
    What’s the primary purpose of this screen?
    What are the 3-5 secondary actions this screen must support?
    What is the most intuitive way to visualize this information?
    Will users know how to interact with the screen within three seconds?
    Is the information on this screen too dense? What can be removed?
  • Paper In-Screen Prototypes
    Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine
    60
    http://www.uxmag.com/design/paper-in-screen-prototyping
  • Paper Prototype example
    1. Sketch screen layouts.
     
      
    61
    Photo courtesy of Diego Pulido and UX Magazine
  • Paper Prototype example
    1. Sketch screen layouts.
     
    2. Scan or photograph
    the sketches.
     
     
    62
    Photo courtesy of Diego Pulido and UX Magazine
  • Paper Prototype example
    1. Sketch screen layouts.
     
    2. Scan or photograph
    the sketches.
    3. Making sizing
    adjustments to the
    files.
     
     
     
     
    63
    Photo courtesy of Diego Pulido and UX Magazine
  • Paper Prototype example
     4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly.
     
     
     
    64
    Photo courtesy of Diego Pulido and UX Magazine
  •  4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly
    5. Import the files into the mobile device’s photo gallery.
     
      
     
     
    65
    Photo courtesy of Diego Pulido and UX Magazine
  • Paper Prototype example
    4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly
    5. Import the files into the mobile device’s photo gallery.
    6. Click and swipe away.
     
     
     
     
     
    66
    Photo courtesy of Diego Pulido and UX Magazine
  • Paper Prototype example
    Paper Prototyping
    67
  • 68
  • Paper Prototype example
    Mobile Browser Prototypes
    69
  • Paper Prototype example
    Keynote/Powerpoint Prototypes
    70
  • Paper Prototype example
    71
  • What we learned from the web
    steal this slide!
    Reasons for Prototyping in Keynote/Powerpoint
    It’s super efficient and fast!
    Level of fidelity is high – gives you an end result that looks and feels like a real app.
    Supports *some* gestures and transitions.
    It’s as close as you can get to the real thing without digging into code.
  • What we learned from the web
    steal this slide!
    Reasons for Prototyping in Keynote/Powerpoint
    It’s super efficient and fast!
    Level of fidelity is high – gives you an end result that looks and feels like a real app.
    Supports *some* gestures and transitions.
    It’s as close as you can get to the real thing without digging into code.
  • Paper Prototype example
    SCROLL
    GUI = “Desktop” and “Pages” as Anchors
    74
  • NUIs Can Feel Anchor-less
    75
  • Paper Prototype example
    [
    ]
    +
    =
    76
  • Paper Prototype example
    =
    77
  • What we learned from the web
    Animation & TransitionsA new design elements that can:
    steal this slide!
    Reinforce cognition.
    Help users form a mental model of how information will “unfold”.
    Provide cues for interaction.
    Help make your experience feel more intuitive for users.
  • Paper Prototype example
    79
  • Practice
    80
  • How to prototype interactive iPad applications in 30 minutes or less using Apple KeynoteBy Amir Khella
    Photo courtesy of Amir Khella
    81
  • Hypothesis vs. Agenda
    Experiential Prototyping
  • 83
    Context Framework
    Context Framework
    steal this slide!
  • 84
    Context Framework
    Context Framework
    steal this slide!
  • 85
    Relationships Chording
    Orchestration and Inflection
  • You are working on a “broader” mobile project.
    1
    Sympathy to context principles
    Experiential Prototyping:
    Best suited for design explorations where:
    steal this slide!
    2
    Target mobile hardware and software scope is unknown.(perhaps being created).
    3
    The design space is relatively unchartered.
  • What we learned from the web
    Experiential Prototypes
    Storyboarding
    Body Storming
    Speed Dating Prototypes
    Concept Videos
  • Paper Prototype example
    Storyboarding
    88
  • 89
    “in the wild” ideation
  • What we learned from the web
    Mobile UX Storyboarding
    Identify the central idea(s) you are trying to communicate.
  • What we learned from the web
    Mobile UX Storyboarding
    Identify the central idea(s) you are trying to communicate.
    Create a character and identify the key issues he/she currently faces.
  • What we learned from the web
    Mobile UX Storyboarding
    Identify the central idea(s) you are trying to communicate.
    Create a character and identify the key issues he/she currently faces.
    Rough out the basic story
  • What we learned from the web
    Mobile UX Storyboarding
    Identify the central idea(s) you are trying to communicate.
    Create a character and identify the key issues he/she currently faces.
    Rough out the basic story
    Start filling in the cells. Rough out the complete story, then fill in details.
  • What we learned from the web
    Mobile UX Storyboarding
    Identify the central idea(s) you are trying to communicate.
    Create a character and identify the key issues he/she currently faces.
    Rough out the basic story
    Start filling in the cells. Rough out the complete story, then fill in details.
  • Paper Prototype example
    95
  • Paper Prototype example
    96
  • Paper Prototype example
    Bodystorming
    97
  • Through Lines
    Company Secret
    © 2010 Nokia August 2010 Hinman
    98
  • In reality… people’s lives are messy
  • Paper Prototype example
    Similar to improvisational theater, body storming involves acting out possible scenarios or use cases with actors and props. Unlike computer-based technology that is logic based and only makes visible the conditions that existed before, people are illogical, perceptive, aware, and self-correcting. Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process.
    104
  • Select groups of five to eight participants in a troupe.
    Photo by Christian Crumlish (xian), 2009 on Flickr
    105
  • Paper Prototype example
    Select groups of five to eight participants in a troupe.
    Identify 3-5 experience scenarios for your troupe to “perform.” Examples: Purchasing a cup of coffee with my iPhone, selecting which phone to purchase in a carrier’s store.
    Photo by Christian Crumlish (xian), 2009 on Flickr
    106
  • Paper Prototype example
    3. Every player must have a role; there should be no “trees” that are just for background. Use large cards that label the roles people are playing.
     
    107
    Photo by Christian Crumlish (xian), 2009 on Flickr
  • Paper Prototype example
     4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.
    Photo by Christian Crumlish (xian), 2009 on Flickr
    108
  • Paper Prototype example
    5. Have a narrator or color commentator who can explain things. The narrator can pretend the scenario is like television, using a remote to stop action, rewind, or fast-forward.
    Photo by Christian Crumlish (xian), 2009 on Flickr
    109
  • Paper Prototype example
    6. De-brief after each scenario. What did the group learn? What was surprising? What seemed important? Capture what you learned from the exercise and discuss how you can integrate it into what happens next.
    Photo by Christian Crumlish (xian), 2009 on Flickr
    110
  • Paper Prototype example
    Design in Context
    111
  • Paper Prototype example
    Speed Dating Prototypes
    Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    112
  • Paper Prototype example
    Scott Davidoff of CMU
    • Few design tools
    • High Cost of Failure
    • Unpredictable social consequences
    Rapidly Exploring Application Design through Speed Dating
    113
  • Speed Dating Prototypes
    Builds on three theories:
    Abundance brings perspective.
    1
    Sympathy to context principles
    2
    Need to cross boundaries to know they exist.
    3
    Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
  • 115
    “in the wild” ideation
  • Paper Prototype example
    1. Need Validation
    Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    116
  • Paper Prototype example
    1. Need Validation
    117
  • Paper Prototype example
    2. User Enactments
    Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    118
  • Paper Prototype example
    2. User Enactments
    Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    119
  • Paper Prototype example
    Concept Videos
    Nokia 888 communicator concept phone design by Tamer Nakisci
    120
  • Paper Prototype example
    121
  • Paper Prototype example
    122
  • Paper Prototype example
    Concept Videos
    Pros
    • High Impact
    • Highly Shareable
    • Good for High-Level Ideas
    • Technology still in development
    123
  • Paper Prototype example
    Concept Videos
    Pros
    Cons
    • High Impact
    • Highly Shareable
    • Good for High-Level Ideas
    • Technology still in development
    • Resource Intensive!!!
    • Skill intensive
    • Cultural Fit
    • Concept videos don’t make bad ideas good.
    124
  • Paper Prototype example
    Things to remember…
    125
  • Paper Prototype example
    Fidelity
    126
  • Paper Prototype example
    Failure
    127
  • Paper Prototype example
    Prototyping is not a Panacea
    128
  • Our plan for today…
    Our plan for today
    Identify where things usually go wrong during the mobile UX process
    Review the four “whys” of prototyping
    Identify the two genres of mobile prototyping
    Overview/how-to of six mobile prototyping methods
  • PC Prototypingis considered a
    Luxury
    A
    Um… duh!
  • Mobile Prototyping is
    Essential
    A
    Um… duh!
  • Good luck
    Good luck!
  • Thanks, and next up…
    Thank you!
    Email:
    rachel.hinman@nokia.com
  • Oh! By the way, I’m writing a book..
    The Mobile Frontier
    A Guide for Designing Mobile Experiences
    Expected Publication: late 2011
    Follow along…
  • Q?
    Q&A: final break