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

Mobile Prototyping Essentials

on

  • 22,774 views

 

Statistics

Views

Total Views
22,774
Views on SlideShare
18,660
Embed Views
4,114

Actions

Likes
141
Downloads
1,066
Comments
6

58 Embeds 4,114

http://blog.i2fly.com 1082
http://www.scoop.it 480
http://www.usercentered.de 382
http://kobewan.com 371
http://www.conseilsmarketing.fr 214
http://uxaustralia.com.au 183
http://lonewolflibrarian.wordpress.com 169
http://rosenfeldmedia.com 148
http://www.rosenfeldmedia.com 145
http://lmalita.wordpress.com 111
http://www.uxabilidad.com 86
http://crossthebreeze.posterous.com 81
http://localhost 77
http://www.macromedios.net 65
http://paper.li 54
http://grap2256.posterous.com 51
https://twitter.com 47
http://feeds.feedburner.com 39
http://user-experience-specialist.blogspot.com 35
http://us-w1.rockmelt.com 34
http://keenux.com 33
http://www.linkedin.com 30
http://iml.isobarkorea.co.kr 27
http://www.twylah.com 20
http://ashtergroup.blogspot.com 19
http://lanyrd.com 17
http://www.uxgeek.co 15
http://eventifier.co 13
http://www.conseilsmarketing.com 12
http://ruben.i.conferize.com 10
http://titulo5.uprh.edu 10
http://staging.conferize.com 6
http://www.newsblur.com 5
http://www.idestudio.kr 5
http://sapientnyxd.posterous.com 4
http://posterous.com 3
http://www.slideshare.net 3
http://nowlab.isobarkorea.co.kr 3
http://user-experience-specialist.blogspot.de 2
https://www.linkedin.com 2
http://uxd.isobarkorea.co.kr 2
http://dandandans.dropmark.com 2
http://statichtmlapp.heroku.com 2
http://michelleadams.posterous.com 1
http://news.google.com 1
http://pinterest.com 1
http://macromedios.net 1
http://translate.googleusercontent.com 1
http://trunk.ly 1
http://blogs.yoni.bz 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

16 of 6 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Get a lot from you there! Thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • UX prototyping
    Are you sure you want to
    Your message goes here
    Processing…
  • Interesting Presentation indeed. Check out Fluid UI (www.fluidui.com). A new iPhone and Android prototyping tool – built from the ground up for the design of mobile touch screen UI.

    It's got full iPhone and Android widget sets, image uploads, fully linked prototypes, touch gestures, animated page transitions and on-device testing a click.
    Are you sure you want to
    Your message goes here
    Processing…
  • Terrific, in-depth presentation with tons of useful references and links. Thanks much for posting!
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation but sometimes prototyping tools are useful and time saving...
    Check out http://proto.io the only web app built specifically for developing high-fidelity fully interactive mobile app prototypes.
    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 Essentials
      UX Australia 2011
      Rachel Hinman
      Senior Research Scientist
      Nokia Research Lab
      Palo Alto, California USA
      Hinman
    • I used to be a web designer, too
      2
    • What makes mobile UX different?
      Q:
      Q:
      3
    • A
      What are the similarities
      4
    • What are the similarities
      A
      :-(
      5
    • A
      What are the similarities
      6
    • ?
      7
    • 8
      Web designers know how to work in a rapidly evolving field
      8
    • Web designers know how to work in a rapidly evolving field
      Bad Decision-Making
      9
    • The final diamonds are where good design decisions matter most…
      …and where designers new to mobile have the least domain specific skill and confidence.
      10
    • Seated in a relatively predictable environment
      Large screen enables multi-tasking
      Keyboard and a mouse for input
      11
    • 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
      12
    • Designers new to mobile don’t have the domain specific skills or heuristics to lean on.
      A
      13
    • Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      Prototype
      14
    • PC Prototypingis considered a
      A
      Um… duh!
      Luxury
      15
    • Mobile Prototyping is
      Essential
      A
      16
    • The best way to develop those skills is to prototype early
      and often.
      17
    • A
      Prototypes are the ultimate
      decision-making aid
      18
    • Our plan for today…
      Our plan for today
      Review the four “whys” of mobile prototyping
      Identify the two genres of prototyping and overview of six prototyping methods
      Review the key differences between NUI and GUI interfaces
      Overview of animation principles that can be incorporated into your mobile experiences
      Three hands-on activities
      19
    • Our plan for today…
      Our plan for today
      Review the four “whys” of mobile prototyping
      Identify the two genres of prototyping and overview of six prototyping methods
      Review the key differences between NUI and GUI interfaces
      Overview of animation principles that can be incorporated into your mobile experiences
      Three hands-on activities
      20
    • Our plan for today…
      Our plan for today
      Review the four “whys” of mobile prototyping
      Identify the two genres of prototyping and overview of six prototyping methods
      Review the key differences between NUI and GUI interfaces
      Overview of animation principles that can be incorporated into your mobile experiences
      Three hands-on activities
      21
    • Our plan for today…
      Our plan for today
      Review the four “whys” of mobile prototyping
      Identify the two genres of prototyping and overview of six prototyping methods
      Review the key differences between NUI and GUI interfaces
      Overview of animation principles that can be incorporated into your mobile experiences
      Three hands-on activities
      22
    • Our plan for today…
      Our plan for today
      Review the four “whys” of mobile prototyping
      Identify the two genres of prototyping and overview of six prototyping methods
      Review the key differences between NUI and GUI interfaces
      Overview of animation principles that can be incorporated into your mobile experiences
      Three hands-on activities
      23
    • Okay, let’s get started!
      Okay… let’s get started
      24
    • Prototyping
      25
    • steal this slide!
      “Whys” of prototyping
      Improve your design decision-making
      Communicate an Idea
      Gather User Feedback
      Explore the “Unknowns”
      Fine-tune an Idea
      26
    • Communicating an Idea or Experience
      YouTube Video
      27
    • Hypothesis vs. Agenda
      Gather User Feedback
      28
    • Hypothesis vs. Agenda
      Explore the Unknowns
      29
    • Hypothesis vs. Agenda
      Fine-Tune an Idea
      30
    • Two Genres
      31
    • Hypothesis vs. Agenda
      Experiential Prototyping
      32
    • Tactical Prototyping
      33
    • 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.
      34
    • 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.
      35
    • Experiential Prototyping
      36
    • 37
    • 38
    • Context Matters
      39
    • Context will likely beyour blindside
      40
    • Context Framework
      Context Framework
      steal this slide!
      41
    • Context Framework
      Context Framework
      steal this slide!
      42
    • Experiential Prototypingwill help you understand
      context
      43
    • Sympathy to context principles
      Experiential Prototyping:
      Best suited for design explorations where:
      You are working on a “broader” mobile project.
      1
      Target mobile hardware and software scope is unknown.(perhaps being created).
      2
      The design space is relatively unchartered.
      3
    • What we learned from the web
      Experiential Prototypes
      Body Storming
      Speed Dating Prototypes
      Concept Videos
      Storyboarding
    • Paper Prototype example
      Bodystorming
      46
    • Through Lines
    • 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.
      53
    • Select groups of five to eight participants in a troupe.
      Photo by Christian Crumlish (xian), 2009 on Flickr
      54
    • 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
      55
    • 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.
       
      56
      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
      57
    • 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
      58
    • 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
      59
    • Bodystorming will help you capture the emotional tenor of mobile interactions
      60
    • Paper Prototype example
      Design in Context
      61
    • What we learned from the web
      Experiential Prototypes
      Body Storming
      Speed Dating Prototypes
      Concept Videos
      Storyboarding
    • Paper Prototype example
      Speed Dating Prototypes
      Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
      63
    • Paper Prototype example
      Scott Davidoff of CMU
      • Few design tools
      • High Cost of Failure
      • Unpredictable social consequences
      Rapidly Exploring Application Design through Speed Dating
      64
    • Speed Dating Prototypes
      Builds on three theories:
      1
      Abundance brings perspective.
      Need to cross boundaries to know they exist.
      2
      Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
      3
      65
    • “in the wild” ideation
      Step One
      Identify most promising
      concepts
      66
    • Paper Prototype example
      Step Two
      Create storyboards thatdepict each concept
      Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
      67
    • Paper Prototype example
      Step Three
      Present storyboards tousers & gather feedback
      68
    • Step Four
      Create prototypes
      Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
      69
    • Step Five
      Conduct user enactments with prototypes
      Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
      70
    • Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience
      71
    • What we learned from the web
      Experiential Prototypes
      Body Storming
      Speed Dating Prototypes
      Concept Videos
      Storyboarding
    • Paper Prototype example
      Concept Videos
      Nokia 888 communicator concept phone design by Tamer Nakisci
      73
    • Paper Prototype example
      74
    • Paper Prototype example
      75
      75
    • Paper Prototype example
      Concept Videos
      Pros
      • High Impact
      • Highly Shareable
      • Good for High-Level Ideas
      • Technology still in development
      76
    • 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.
      77
    • The first step of creating a concept video is….
      78
    • What we learned from the web
      Experiential Prototypes
      Body Storming
      Speed Dating Prototypes
      Concept Videos
      Storyboarding
      79
    • Paper Prototype example
      Storyboarding
      80
    • “in the wild” ideation
      81
    • What we learned from the web
      Mobile UX Storyboarding
      Identify the central idea(s) you are trying to communicate.
      82
    • 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.
      83
    • 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 a basic story.
      84
    • 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 a basic story.
      Start filling in the cells. Rough out the complete story, then fill in details.
      85
    • 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.
      86
    • Paper Prototype example
      87
    • Paper Prototype example
      88
    • Pivoting people through information
      Your Design Challenge!
      Storyboarding
      Activity
      89
    • Pivoting people through information
      Your Design Challenge!
      Storyboarding: Ideas
      Activity
      90
    • Your Design Challenge!
      Storyboarding
      Activity
      Select one concept you’d like to explore more deeply using the storyboarding technique.
      Storyboard one scenario using the templates provided.
      Remember to identify the key issues the character faces and rough out the complete story before filling in details.
      1
      2
      3
    • Hypothesis vs. Agenda
      Tactical Prototyping
    • What we learned from the web
      steal this slide!
      Tactical Prototypes
      Sketching/Paper Prototyping
      In-Screen Mobile Prototypes
      Mobile Browser Prototypes
      Keynote/Powerpoint Prototypes
      Flash Prototype
      Platform Specific Prototype
      93
    • steal this slide!
      Tactical Prototypes
      Sketching/Paper Prototyping
      In-Screen Mobile Prototypes
      Mobile Browser Prototypes
      Keynote/Powerpoint Prototypes
      Flash Prototype
      Platform Specific Prototype
      94
    • Hypothesis vs. Agenda
      Sketching
      95
    • Hypothesis vs. Agenda
      Great mobile UIs
      speak their power
      96
    • Speak their power?
      Huh?
      Q:
      A
      97
    • A light switch
      98
    • Shopping cart
      99
    • 100
    • We can annotate expectations in the web world
      We can annotate expectations
      in the web world
      101
    • We can annotate expectations in the web world
      REALLY!Look inside the book
      Free two-day shipping
      Look inside the book
      Get it new OR used!
      Sell mine
      Add to cart
      Shipping!
      Collectible!
      Maybe a kindle!
      102
    • Options have to be apparent and intuitive in mobile for people to
      103
    • 104
      Text entry will never be easy
      Design for partial attention andinterruption
    • How do you make interfaces that speak their power
      How do I create mobile interfaces that “speak their power”?
      Q:
      A
      105
    • Web designers know how to work in a rapidly evolving field
      Edit!!!
      106
    • Web designers know how to work in a rapidly evolving field
      RuthlessEditing
      107
    • 108
      Wireframe
      A Brave NUI World
    • Wireframe
      109
    • Seated in a relatively predictable environment
      Large screen enables multi-tasking
      Keyboard and a mouse for input
      110
    • 111
      Wireframe
      We’re reaching the edges
      of what GUI can do
    • Wireframe
      Most mobile smartphones
      have touchscreens with Natural User Interfaces
      112
    • 113
      Wireframe
      GUIs Become Brittle
      on a Mobile Device
    • Hypothesis vs. Agenda
    • Hypothesis vs. Agenda
    • 116
      Wireframe
    • Wireframe
      GUI/NUI Chasm
      117
    • Key differences between NUI and GUI
      Okay… let’s get started
      118
    • Defining Attributes of
      GUIs…
      119
    • Paper Prototype example
      GUI Mental Model =
      Computer as tool
      120
    • Paper Prototype example
      GUI = Recognition
      “What you see is what you get”
      121
    • Wireframe
      GUI = Metaphorics, containment and place
      122
    • GUIs = Heavy Chrome, Icons & Buttons
      123
    • Defining Attributes of
      NUIs…
      124
    • Paper Prototype example
      NUI Mental Model =
      Computer as media
      125
    • Paper Prototype example
      NUI = Intuition
      “What you do is what you get”
      126
    • 127
      Wireframe
      NUI = Fluid, Unmediated, and Organic
    • NUIs = Content is the Star
      It’s like a game of cards
      128
    • 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
      129
    • Paper Prototype example
      GUI = Experiences are anchored
      130
    • Paper Prototype example
      NUI = Experiences Unfold
      131
    • Paper Prototype example
      NUIs Unfold Like a Game
      132
    • NUIs Can Feel Anchor-less
      133
    • Differences in the mobile environment
      134
    • The Nested Doll Pattern
      1
      Sympathy to context principles
      steal this slide!
      Mobile Experiences Unfold
      Patterns for how mobile experiences unfold and progressively reveal their nature
      The Hub and Spoke Pattern
      2
      The Bento Box Pattern
      3
      The Filtered View Pattern
      4
      135
    • Paper Prototype example
      Nested Doll Pattern
      136
    • Paper Prototype example
      Hub and Spoke Pattern
      137
    • Paper Prototype example
      Bento Box Pattern
      138
    • Paper Prototype example
      Filtered View Pattern
      139
    • How do you make interfaces that speak their power
      A
      Trick to unfolding =
      Information boulders to pebbles
      140
    • How do you make interfaces that speak their power
      A
      141
    • A
      142
    • Pivoting people through information
      Your Design Challenge!
      From GUI to NUI
      Activity
      143
    • Pivoting people through information
      Your Design Challenge!
      From GUI to NUI
      Activity
      Identify an interaction sequence you’d like to recreate using NUI principles.
      Sketch out the interaction using the templates provided.
      Identify how you’d like your mobile experience to unfold.
      1
      2
      3
      144
    • Pivoting people through information
      145
    • Pivoting people through information
      146
    • REMEMBER!
      It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…
      Activity
      Understanding the differences between graphical and natural user interfaces.
      Experimenting with how your mobile experience can unfold and and progressively reveal its nature.
      Play around with the unfolding patterns that have been presented… or invent some of your own.
      147
    • Differences in the mobile environment
      148
    • Paper In-Screen Prototypes
      Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine
      149
    • Paper Prototype example
      1. Sketch screen layouts.
       
        
      150
      Photo courtesy of Diego Pulido and UX Magazine
    • Paper Prototype example
      1. Sketch screen layouts.
       
      2. Scan or photograph
      the sketches.
       
       
      151
      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.
       
       
       
       
      152
      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.
       
       
       
      153
      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.
       
        
       
       
      154
      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.
       
       
       
       
       
      155
      Photo courtesy of Diego Pulido and UX Magazine
    • Your Design Challenge!
      Create an in-screen prototype.
      Activity
      Hang your screen designs on the wall.
      Photograph each design.
      Transfer photos from the camera to computer and make any sizing adjustments.
      Sync images to your mobile device and swipe away….
      156
    • 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
      157
    • Paper Prototype example
      Paper Prototyping
      158
    • 159
    • Paper Prototype example
      Mobile Browser Prototypes
      160
    • Paper Prototype example
      Keynote/Powerpoint Prototypes
      161
    • Paper Prototype example
      162
    • Paper Prototype example
      LOGO
      Tagline
      Edit
      163
    • Paper Prototype example
      LOGO
      Tagline
      Sydney Opera House
      There is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
      Edit
      164
    • Paper Prototype example
      LOGO
      Tagline
      Sydney Opera House
      There is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
      Edit
      165
    • Paper Prototype example
      LOGO
      Tagline
      Sydney Opera House
      There is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
      Edit
      166
    • Paper Prototype example
      LOGO
      Tagline
      LOGO
      Tagline
      Sydney Opera House
      There is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world – a symbol for not only a city, but a whole country and continent.
      Edit
      Edit
      167
      167
      Paper Prototype example
    • Paper Prototype example
      LOGO
      Tagline
      Edit
      168
    • What we learned from the web
      Reasons for Prototyping in Keynote/Powerpoint
      steal this slide!
      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.
      169
    • What we learned from the web
      Reasons for Prototyping in Keynote/Powerpoint
      steal this slide!
      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.
      170
    • Paper Prototype example
      Motion:
      New Design Material
      171
    • 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.
      172
    • Paper Prototype example
      Twelve Basic Principles
      of Animation
      173
    • Paper Prototype example
      Principle One
      Squash and Stretch
      174
    • Paper Prototype example
      Principle One
      Squash and Stretch
      175
    • Paper Prototype example
      Principle Two
      Anticipation
      176
    • Paper Prototype example
      Principle Two
      Anticipation
      177
    • Paper Prototype example
      Principle Three
      Staging
      178
    • Paper Prototype example
      Principle Three
      Staging
      179
    • Paper Prototype example
      Principle Four
      Straight Ahead
      and Pose to Pose
      180
    • Paper Prototype example
      Principle Four
      Straight Ahead
      and Pose to Pose
      181
    • Paper Prototype example
      Principle Five
      Follow Through
      and Overlapping Action
      182
    • Paper Prototype example
      Principle Five
      Follow Through
      and Overlapping Action
      183
    • Paper Prototype example
      Principle Six
      Slow in and Out
      184
    • Paper Prototype example
      Principle Six
      Slow in and Out
      185
    • Paper Prototype example
      Principle Seven
      Arcs
      186
    • Paper Prototype example
      Principle Seven
      Arcs
      187
    • Paper Prototype example
      Principle Eight
      Secondary Action
      188
    • Paper Prototype example
      Principle Eight
      Secondary Action
      189
    • Paper Prototype example
      Principle Nine
      Timing
      190
    • Paper Prototype example
      Principle Nine
      Timing
      191
    • Paper Prototype example
      Principle Ten
      Exaggeration
      192
    • Paper Prototype example
      Principle Ten
      Exaggeration
      193
    • Paper Prototype example
      Principle Eleven and Twelve
      Solid Drawing and Appeal
      194
    • Paper Prototype example
      Specifying Transitions
      Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions
      195
    • What we learned from the web
      Transitions and AnimationMethods for specifying motion:
      Hand drawn sketches.
      Include specifications on wireframes.
      Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.
      196
    • Paper Prototype example
      Motion is an Art.
      There are no formulas.
      197
    • Fidelity
      198
    • Paper Prototype example
      Failure
      199
    • Paper Prototype example
      Prototyping is not a Panacea
      200
    • PC Prototypingis considered a
      A
      Um… duh!
      Luxury
    • Mobile Prototyping is
      A
      Um… duh!
      Essential
    • Thanks, and next up…
      Thank you!
      Email:
      rachel.hinman@nokia.com
      Templates and Online Resources:
      www.rachelhinman.com/mobile_prototyping_essentials
    • 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
    • Different platforms express characteristics differently
      206
      Wireframe