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

Like this? Share it with your network

Share

Mobile Prototyping Essentials

on

  • 23,319 views

 

Statistics

Views

Total Views
23,319
Views on SlideShare
19,185
Embed Views
4,134

Actions

Likes
141
Downloads
1,076
Comments
6

59 Embeds 4,134

http://blog.i2fly.com 1083
http://www.scoop.it 481
http://www.usercentered.de 383
http://kobewan.com 373
http://www.conseilsmarketing.fr 214
http://uxaustralia.com.au 183
http://lonewolflibrarian.wordpress.com 169
http://rosenfeldmedia.com 150
http://www.rosenfeldmedia.com 145
http://lmalita.wordpress.com 112
http://www.uxabilidad.com 93
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 50
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://nowlab.isobarkorea.co.kr 3
http://posterous.com 3
http://www.slideshare.net 3
https://www.linkedin.com 3
http://user-experience-specialist.blogspot.de 2
http://dandandans.dropmark.com 2
http://uxd.isobarkorea.co.kr 2
http://statichtmlapp.heroku.com 2
http://pinterest.com 1
https://storify.com 1
http://news.google.com 1
http://translate.googleusercontent.com 1
http://michelleadams.posterous.com 1
http://macromedios.net 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

15 of 6 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 Presentation Transcript

  • 1. Title
    Mobile Prototyping Essentials
    UX Australia 2011
    Rachel Hinman
    Senior Research Scientist
    Nokia Research Lab
    Palo Alto, California USA
    Hinman
  • 2. I used to be a web designer, too
    2
  • 3. What makes mobile UX different?
    Q:
    Q:
    3
  • 4. A
    What are the similarities
    4
  • 5. What are the similarities
    A
    :-(
    5
  • 6. A
    What are the similarities
    6
  • 7. ?
    7
  • 8. 8
    Web designers know how to work in a rapidly evolving field
    8
  • 9. Web designers know how to work in a rapidly evolving field
    Bad Decision-Making
    9
  • 10. 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
  • 11. Seated in a relatively predictable environment
    Large screen enables multi-tasking
    Keyboard and a mouse for input
    11
  • 12. 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
  • 13. Designers new to mobile don’t have the domain specific skills or heuristics to lean on.
    A
    13
  • 14. Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    Prototype
    14
  • 15. PC Prototypingis considered a
    A
    Um… duh!
    Luxury
    15
  • 16. Mobile Prototyping is
    Essential
    A
    16
  • 17. The best way to develop those skills is to prototype early
    and often.
    17
  • 18. A
    Prototypes are the ultimate
    decision-making aid
    18
  • 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
    19
  • 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
    20
  • 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
    21
  • 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
    22
  • 23. 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
  • 24. Okay, let’s get started!
    Okay… let’s get started
    24
  • 25. Prototyping
    25
  • 26. 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
  • 27. Communicating an Idea or Experience
    YouTube Video
    27
  • 28. Hypothesis vs. Agenda
    Gather User Feedback
    28
  • 29. Hypothesis vs. Agenda
    Explore the Unknowns
    29
  • 30. Hypothesis vs. Agenda
    Fine-Tune an Idea
    30
  • 31. Two Genres
    31
  • 32. Hypothesis vs. Agenda
    Experiential Prototyping
    32
  • 33. Tactical Prototyping
    33
  • 34. 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
  • 35. 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
  • 36. Experiential Prototyping
    36
  • 37. 37
  • 38. 38
  • 39. Context Matters
    39
  • 40. Context will likely beyour blindside
    40
  • 41. Context Framework
    Context Framework
    steal this slide!
    41
  • 42. Context Framework
    Context Framework
    steal this slide!
    42
  • 43. Experiential Prototypingwill help you understand
    context
    43
  • 44. 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
  • 45. What we learned from the web
    Experiential Prototypes
    Body Storming
    Speed Dating Prototypes
    Concept Videos
    Storyboarding
  • 46. Paper Prototype example
    Bodystorming
    46
  • 47. Through Lines
  • 48.
  • 49.
  • 50.
  • 51.
  • 52. In reality… people’s lives are messy
  • 53. 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
  • 54. Select groups of five to eight participants in a troupe.
    Photo by Christian Crumlish (xian), 2009 on Flickr
    54
  • 55. 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
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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
  • 60. Bodystorming will help you capture the emotional tenor of mobile interactions
    60
  • 61. Paper Prototype example
    Design in Context
    61
  • 62. What we learned from the web
    Experiential Prototypes
    Body Storming
    Speed Dating Prototypes
    Concept Videos
    Storyboarding
  • 63. Paper Prototype example
    Speed Dating Prototypes
    Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    63
  • 64. Paper Prototype example
    Scott Davidoff of CMU
    • Few design tools
    • 65. High Cost of Failure
    • 66. Unpredictable social consequences
    Rapidly Exploring Application Design through Speed Dating
    64
  • 67. 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
  • 68. “in the wild” ideation
    Step One
    Identify most promising
    concepts
    66
  • 69. Paper Prototype example
    Step Two
    Create storyboards thatdepict each concept
    Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    67
  • 70. Paper Prototype example
    Step Three
    Present storyboards tousers & gather feedback
    68
  • 71. Step Four
    Create prototypes
    Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    69
  • 72. Step Five
    Conduct user enactments with prototypes
    Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
    70
  • 73. Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience
    71
  • 74. What we learned from the web
    Experiential Prototypes
    Body Storming
    Speed Dating Prototypes
    Concept Videos
    Storyboarding
  • 75. Paper Prototype example
    Concept Videos
    Nokia 888 communicator concept phone design by Tamer Nakisci
    73
  • 76. Paper Prototype example
    74
  • 77. Paper Prototype example
    75
    75
  • 78. Paper Prototype example
    Concept Videos
    Pros
    • High Impact
    • 79. Highly Shareable
    • 80. Good for High-Level Ideas
    • 81. Technology still in development
    76
  • 82. Paper Prototype example
    Concept Videos
    Pros
    Cons
    • High Impact
    • 83. Highly Shareable
    • 84. Good for High-Level Ideas
    • 85. Technology still in development
    • 86. Resource Intensive!!!
    • 87. Skill Intensive
    • 88. Cultural Fit
    • 89. Concept videos don’t make bad ideas good.
    77
  • 90. The first step of creating a concept video is….
    78
  • 91. What we learned from the web
    Experiential Prototypes
    Body Storming
    Speed Dating Prototypes
    Concept Videos
    Storyboarding
    79
  • 92. Paper Prototype example
    Storyboarding
    80
  • 93. “in the wild” ideation
    81
  • 94. What we learned from the web
    Mobile UX Storyboarding
    Identify the central idea(s) you are trying to communicate.
    82
  • 95. 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
  • 96. 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
  • 97. 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
  • 98. 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
  • 99. Paper Prototype example
    87
  • 100. Paper Prototype example
    88
  • 101. Pivoting people through information
    Your Design Challenge!
    Storyboarding
    Activity
    89
  • 102. Pivoting people through information
    Your Design Challenge!
    Storyboarding: Ideas
    Activity
    90
  • 103. 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
  • 104. Hypothesis vs. Agenda
    Tactical Prototyping
  • 105. 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
  • 106. steal this slide!
    Tactical Prototypes
    Sketching/Paper Prototyping
    In-Screen Mobile Prototypes
    Mobile Browser Prototypes
    Keynote/Powerpoint Prototypes
    Flash Prototype
    Platform Specific Prototype
    94
  • 107. Hypothesis vs. Agenda
    Sketching
    95
  • 108. Hypothesis vs. Agenda
    Great mobile UIs
    speak their power
    96
  • 109. Speak their power?
    Huh?
    Q:
    A
    97
  • 110. A light switch
    98
  • 111. Shopping cart
    99
  • 112. 100
  • 113. We can annotate expectations in the web world
    We can annotate expectations
    in the web world
    101
  • 114. 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
  • 115. Options have to be apparent and intuitive in mobile for people to
    103
  • 116. 104
    Text entry will never be easy
    Design for partial attention andinterruption
  • 117. How do you make interfaces that speak their power
    How do I create mobile interfaces that “speak their power”?
    Q:
    A
    105
  • 118. Web designers know how to work in a rapidly evolving field
    Edit!!!
    106
  • 119. Web designers know how to work in a rapidly evolving field
    RuthlessEditing
    107
  • 120. 108
    Wireframe
    A Brave NUI World
  • 121. Wireframe
    109
  • 122. Seated in a relatively predictable environment
    Large screen enables multi-tasking
    Keyboard and a mouse for input
    110
  • 123. 111
    Wireframe
    We’re reaching the edges
    of what GUI can do
  • 124. Wireframe
    Most mobile smartphones
    have touchscreens with Natural User Interfaces
    112
  • 125. 113
    Wireframe
    GUIs Become Brittle
    on a Mobile Device
  • 126. Hypothesis vs. Agenda
  • 127. Hypothesis vs. Agenda
  • 128. 116
    Wireframe
  • 129. Wireframe
    GUI/NUI Chasm
    117
  • 130. Key differences between NUI and GUI
    Okay… let’s get started
    118
  • 131. Defining Attributes of
    GUIs…
    119
  • 132. Paper Prototype example
    GUI Mental Model =
    Computer as tool
    120
  • 133. Paper Prototype example
    GUI = Recognition
    “What you see is what you get”
    121
  • 134. Wireframe
    GUI = Metaphorics, containment and place
    122
  • 135. GUIs = Heavy Chrome, Icons & Buttons
    123
  • 136. Defining Attributes of
    NUIs…
    124
  • 137. Paper Prototype example
    NUI Mental Model =
    Computer as media
    125
  • 138. Paper Prototype example
    NUI = Intuition
    “What you do is what you get”
    126
  • 139. 127
    Wireframe
    NUI = Fluid, Unmediated, and Organic
  • 140. NUIs = Content is the Star
    It’s like a game of cards
    128
  • 141. 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
  • 142. Paper Prototype example
    GUI = Experiences are anchored
    130
  • 143. Paper Prototype example
    NUI = Experiences Unfold
    131
  • 144. Paper Prototype example
    NUIs Unfold Like a Game
    132
  • 145. NUIs Can Feel Anchor-less
    133
  • 146. Differences in the mobile environment
    134
  • 147. 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
  • 148. Paper Prototype example
    Nested Doll Pattern
    136
  • 149. Paper Prototype example
    Hub and Spoke Pattern
    137
  • 150. Paper Prototype example
    Bento Box Pattern
    138
  • 151. Paper Prototype example
    Filtered View Pattern
    139
  • 152. How do you make interfaces that speak their power
    A
    Trick to unfolding =
    Information boulders to pebbles
    140
  • 153. How do you make interfaces that speak their power
    A
    141
  • 154. A
    142
  • 155. Pivoting people through information
    Your Design Challenge!
    From GUI to NUI
    Activity
    143
  • 156. 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
  • 157. Pivoting people through information
    145
  • 158. Pivoting people through information
    146
  • 159. 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
  • 160. Differences in the mobile environment
    148
  • 161. Paper In-Screen Prototypes
    Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine
    149
  • 162. Paper Prototype example
    1. Sketch screen layouts.
     
      
    150
    Photo courtesy of Diego Pulido and UX Magazine
  • 163. Paper Prototype example
    1. Sketch screen layouts.
     
    2. Scan or photograph
    the sketches.
     
     
    151
    Photo courtesy of Diego Pulido and UX Magazine
  • 164. 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
  • 165. 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
  • 166.  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
  • 167. 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
  • 168. 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
  • 169. 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
  • 170. Paper Prototype example
    Paper Prototyping
    158
  • 171. 159
  • 172. Paper Prototype example
    Mobile Browser Prototypes
    160
  • 173. Paper Prototype example
    Keynote/Powerpoint Prototypes
    161
  • 174. Paper Prototype example
    162
  • 175. Paper Prototype example
    LOGO
    Tagline
    Edit
    163
  • 176. 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
  • 177. 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
  • 178. 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
  • 179. 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
  • 180. Paper Prototype example
    LOGO
    Tagline
    Edit
    168
  • 181. 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
  • 182. 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
  • 183. Paper Prototype example
    Motion:
    New Design Material
    171
  • 184. 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
  • 185. Paper Prototype example
    Twelve Basic Principles
    of Animation
    173
  • 186. Paper Prototype example
    Principle One
    Squash and Stretch
    174
  • 187. Paper Prototype example
    Principle One
    Squash and Stretch
    175
  • 188. Paper Prototype example
    Principle Two
    Anticipation
    176
  • 189. Paper Prototype example
    Principle Two
    Anticipation
    177
  • 190. Paper Prototype example
    Principle Three
    Staging
    178
  • 191. Paper Prototype example
    Principle Three
    Staging
    179
  • 192. Paper Prototype example
    Principle Four
    Straight Ahead
    and Pose to Pose
    180
  • 193. Paper Prototype example
    Principle Four
    Straight Ahead
    and Pose to Pose
    181
  • 194. Paper Prototype example
    Principle Five
    Follow Through
    and Overlapping Action
    182
  • 195. Paper Prototype example
    Principle Five
    Follow Through
    and Overlapping Action
    183
  • 196. Paper Prototype example
    Principle Six
    Slow in and Out
    184
  • 197. Paper Prototype example
    Principle Six
    Slow in and Out
    185
  • 198. Paper Prototype example
    Principle Seven
    Arcs
    186
  • 199. Paper Prototype example
    Principle Seven
    Arcs
    187
  • 200. Paper Prototype example
    Principle Eight
    Secondary Action
    188
  • 201. Paper Prototype example
    Principle Eight
    Secondary Action
    189
  • 202. Paper Prototype example
    Principle Nine
    Timing
    190
  • 203. Paper Prototype example
    Principle Nine
    Timing
    191
  • 204. Paper Prototype example
    Principle Ten
    Exaggeration
    192
  • 205. Paper Prototype example
    Principle Ten
    Exaggeration
    193
  • 206. Paper Prototype example
    Principle Eleven and Twelve
    Solid Drawing and Appeal
    194
  • 207. Paper Prototype example
    Specifying Transitions
    Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions
    195
  • 208. 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
  • 209. Paper Prototype example
    Motion is an Art.
    There are no formulas.
    197
  • 210. Fidelity
    198
  • 211. Paper Prototype example
    Failure
    199
  • 212. Paper Prototype example
    Prototyping is not a Panacea
    200
  • 213. PC Prototypingis considered a
    A
    Um… duh!
    Luxury
  • 214. Mobile Prototyping is
    A
    Um… duh!
    Essential
  • 215. Thanks, and next up…
    Thank you!
    Email:
    rachel.hinman@nokia.com
    Templates and Online Resources:
    www.rachelhinman.com/mobile_prototyping_essentials
  • 216. Oh! By the way, I’m writing a book..
    The Mobile Frontier
    A Guide for Designing Mobile Experiences
    Expected Publication: late 2011
    Follow along…
  • 217. Q?
    Q&A: final break
  • 218. Different platforms express characteristics differently
    206
    Wireframe