Mobile Prototyping Essentials                                                    Part IIRachel HinmanSenior Research Scien...
Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs...
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs...
Q:   What makes mobile UX different?Q:                                       5
A    6
7:-(A
A    8
?    9
10  10
BadDecision-Making                  11
The final diamonds are where gooddesign decisions matter most……and where designers new to mobilehave the least domain spec...
Seated in a relatively predictable environment          Large screen enables multi-tasking             Keyboard and a mous...
Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to m...
Designers new to mobileA   don‟t have the domain    specific skills or heuristics to    lean on.                          ...
PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype            16
PC Prototyping    is considered a    LuxuryA                      17
Mobile Prototyping is    EssentialA                             18
The best wayto develop those skillsis to prototype earlyand often.                          19
APrototypes are the ultimatedecision-making aid                              20
Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview of si...
Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six p...
Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six p...
Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six p...
Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six p...
Okay, let‟s get started!                           26
Prototyping          27
“Whys” of prototyping  Improve your design decision-making  Communicate an Idea  Gather User Feedback  Explore the “Unknow...
Communicating an Idea or Experience             YouTube Video        29
Gather User Feedback                       30
Explore the Unknowns                       31
Fine-Tune an Idea                    32
Two Genres             33
Experiential Prototyping                           34
Tactical Prototyping                       35
Experiential Prototyping:Best suited for design explorations where:   1    You are working on a “broader”        mobile pr...
Tactical Prototyping:Best suited for design explorations where: 1   You are working on a “focused”     mobile project. 2  ...
Experiential Prototyping                           38
39
40
Context Matters                  41
Context will likely be  your blindside                         42
Context Framework                    43
Context Framework                    44
Experiential Prototypingwill help you understand          context                           45
Experiential Prototyping:Best suited for design explorations where:      You are working on a “broader”  1   mobile projec...
Experiential Prototypes  Body Storming  Speed Dating Prototypes  Storyboarding  Concept Videos
Experiential Prototypes  Body Storming  Speed Dating Prototypes  Storyboarding  Concept Videos
Bodystorming               49
Through Lines
In reality… people‟s lives are messy
Similar to improvisational theater, body storminginvolves acting out possible scenarios or usecases with actors and props....
1. Select groups of five to eight                                           participants in a troupe.Photo by Christian Cr...
1. Select groups of five to eight                                            participants in a troupe.                    ...
3. Every player must have a                                            role; there should be no                           ...
4. Props can have                                             feelings, thoughts, and the                                 ...
5. Have a narrator or color commentator who    can explain things. The narrator can    pretend the scenario is like televi...
6. De-brief after each scenario. What did   the group learn? What was surprising?   What seemed important? Capture what   ...
Bodystorming will help you capture  the emotional tenor of mobile          interactions                                   ...
Design in Context                64
Experiential Prototypes  Body Storming  Speed Dating Prototypes  Storyboarding  Concept Videos
Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating   ...
Scott Davidoff of CMU                                     •Few design tools                                     •High Cost...
Speed Dating PrototypesBuilds on three theories: 1   Abundance brings perspective.     Need to cross boundaries to know 2 ...
Step OneIdentify mostpromisingconcepts                69
Step TwoCreate storyboardsthatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Desi...
Step ThreePresent storyboards tousers & gatherfeedback                         71
Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating   72
Step FiveConduct user enactmentswith prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design throug...
Speed Dating Prototypes areespecially well-suited for gatheringuser impressions ofa new-to-the-world experience           ...
Experiential Prototypes  Body Storming  Speed Dating Prototypes  Storyboarding  Concept Videos
Storyboarding            76
77
Mobile UX Storyboarding  Identify the central idea(s) you are  trying to communicate.                                     ...
Mobile UX Storyboarding  Identify the central idea(s) you are  trying to communicate.  Create a character and identify the...
Mobile UX Storyboarding  Identify the central idea(s) you are  trying to communicate.  Create a character and identify the...
Mobile UX Storyboarding  Identify the central idea(s) you are  trying to communicate.  Create a character and identify the...
Mobile UX Storyboarding  Identify the central idea(s) you are  trying to communicate.  Create a character and identify the...
83
84
Your Design Challenge!Storyboarding 1 Select one concept you‟d like to explore more   deeply using the storyboarding techn...
30 Minutes
Experiential Prototypes  Body Storming  Speed Dating Prototypes  Storyboarding  Concept Videos
Concept VideosNokia 888 communicator concept phone design by Tamer Nakisci                    91
92
9393
Concept VideosPros•High Impact•Highly Shareable•Good for High-Level Ideas•Technology still in development                 ...
Concept VideosPros                   Cons•High Impact           •Resource Intensive!!!•Highly Shareable      •Skill Intens...
Tactical Prototyping
Tactical Prototypes  Sketching/Paper Prototyping  In-Screen Mobile Prototypes  Mobile Browser Prototypes  Keynote/Powerpoi...
Tactical Prototypes  Sketching/Paper Prototyping  In-Screen Mobile Prototypes  Mobile Browser Prototypes  Keynote/Powerpoi...
Sketching        99
Great mobile UIsspeak their power                100
Ruthless Editing           101
A Brave NUI World               102
103
Seated in a relatively predictable environment          Large screen enables multi-tasking             Keyboard and a mous...
We‟re reaching the edges       of what GUI can do                        105
Most mobile smartphoneshave touchscreens withNatural User Interfaces                          106
GUIs Become Brittle on a Mobile Device                  107
110
GUI/NUI Chasm                111
Key differences between     NUI and GUI                          112
Defining Attributes ofGUIs…                         113
GUI Mental Model =Computer as tool                     114
GUI = Recognition“What you see is what you get”                            115
GUI = Metaphorics, containment and place                                       116
GUIs = Heavy Chrome, Icons & Buttons                                       117
Defining Attributes ofNUIs…                         118
NUI Mental Model =Computer as media                     119
NUI = Intuition“What you do is what you get”                            120
NUI = Fluid, Unmediated, and Organic                                       121
NUIs = Content is the Star                         122
Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to m...
GUI = Experiences are anchored                             124
NUI = Experiences Unfold                      125
NUIs Unfold Like a Game                          126
NUIs Can Feel Anchor-less                       127
128
Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll...
Nested Doll Pattern                 130
Hub and Spoke Pattern                   131
Bento Box Pattern                    132
Filtered View Pattern                   133
A               Trick to unfolding =    Information boulders to pebbles                                      134
Your Design Challenge!From GUI to NUI 1 Identify an interaction sequence you‟d like to    recreate using NUI principles. 2...
REMEMBER!It‟s easy to go crazy and try to do it all.Instead, focus on applying what we‟ve covered…  Understanding the diff...
137
30 Minutes
Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos co...
1. Sketch screen layouts.                                                                             140Photo courtesy of...
1. Sketch screen layouts.                                                 2. Scan or photograph                           ...
1. Sketch screen layouts.                                                 2. Scan or photograph                           ...
4. Save the resized                                                 images in a file format                               ...
4. Save the resized                                                 images in a file format                               ...
4. Save the resized                                                 images in a file format                               ...
Your Design Challenge!Create an in-screen prototype.  Hang your screen designs on the wall.  Photograph each design.  Tran...
Tactical Prototypes  Sketching  In-Screen Mobile Prototypes  Mobile Browser Prototypes  Keynote/Powerpoint Prototypes  Fla...
Keynote/Powerpoint Prototypes                                148
149
Reasons for Prototypingin Keynote/Powerpoint  It‟s super efficient and fast!  Level of fidelity is high – gives you an end...
151
Tactical Prototypes  Sketching  In-Screen Mobile Prototypes  Mobile Browser Prototypes  Keynote/Powerpoint Prototypes  Fla...
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
Shapeshifting
156
“We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
A    158
159
Q:   “I think a lot of web design in the   past five to ten years is actuallyQ:   just a reflection of print again.   We‟v...
Q:   “Our obsession with layout     (carried over from print design)Q:     keeps us from seizing much     bigger opportuni...
162
Shapeshifting
Plans & Situated ActionMutual Reconfiguration
Q:   Suchman‟s theory of mutual     reconfiguration suggests a person‟sQ:     capacity to act (their agency) is     reconf...
168
Q:Q:        Two     Design Implications
Q:Q:     1. Shift in contextual assumptions
Q:Q:               2. Shift in our sensibilities     around content as a design material
Q:Q:     1. Shift in contextual assumptions
A
A    Throughout the design process,    our work should be situated in    the contexts where it will be used.
Go to the Gemba
Go to the Gemba
Go to the Gemba
Q:Q:               2. Shift in our sensibilities     around content as a design material
Design as the manipulation of materials.
Q:Q:              Pages and screens     are not our design material
Content as a design material.
“Right now many designers end upfocusing a lot of energy on the overlyingQ:view – the whole template and look andfeel. But...
“For so much digital content, there is nogood metaphor to render anymore – thecontent is just information, text andimages ...
Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
Mark Weiser
Q:Q:
“The most profound technologiesQ:are those that disappear.Q:They weave themselves into thefabric of everyday life until th...
Q:Q:     Tab   Pad          Yard-Sized Board                 1991
2010
Mobile devices arethe gateway drug for ubicomp
Following toddlers into the future
“I like cuddling up in bed with NetflixQ:on the iPad instead of sitting in frontof the TV. It‟s more comfortable toQ:go to...
“It‟s almost like my blankie…Q:I curl up in bed with it, or on thecouch. I usually have it withQ:me, regardless of extenua...
“It’s almost like my blankie…”
Say Goodbye to Done
This should look familiar…                             213
This should look familiar…        The web has evolved around a            task-efficiency model.           Mobile can be d...
Tasks are about completion…                              215
Tasks are about completion…Possibilities are interactions thataccrue over time…                                      216
Tasks are about completion…Possibilities are interactions thataccrue over time…… or facilitateexploration…                ...
Tasks are about completion…Possibilities are interactions thataccrue over time…                                ..or are ab...
219
220
221
222
223
224
Fidelity           226
Failure          227
Prototyping is not a Panacea                           228
PC Prototyping    is considered a    LuxuryA
Mobile Prototyping is    EssentialA
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Mobile presents anopportunity to invent newways for users to interactwith information.                             232
Thank you!Email:rachel.hinman@nokia.comTemplates and Online Resources:www.rachelhinman.com/mobile_prototyping_essentials
Oh! By the way, I‟m writing a book..The Mobile FrontierA Guide for DesigningMobile ExperiencesExpected Publication: May 20...
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Upcoming SlideShare
Loading in...5
×

Mobile Prototyping Essentials - Part II

3,203

Published on

Mobile prototyping workshop withe Rosenfeld Media - May 24

Published in: Design, Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,203
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
236
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide
  • Instead, the web was built upon a static model – the web page. And we’ve allowed those pages to become bloated and unweildy…
  • Mobile Prototyping Essentials - Part II

    1. 1. Mobile Prototyping Essentials Part IIRachel HinmanSenior Research ScientistNokia Research LabPalo Alto, California USA Hinman
    2. 2. Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good HandNoon – 1:30pm - LUNCH1:30pm – 5:30pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Translating GUI to NUI• Creating an In-Screen Prototype
    3. 3. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    4. 4. Our plan for today…8:30am - NoonWhat makes mobile UX different?Three Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild• Creating a Good HandNoon – 1pm - LUNCH1pm – 5pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Translating GUI to NUI• Creating an In-Screen Prototype
    5. 5. Q: What makes mobile UX different?Q: 5
    6. 6. A 6
    7. 7. 7:-(A
    8. 8. A 8
    9. 9. ? 9
    10. 10. 10 10
    11. 11. BadDecision-Making 11
    12. 12. The final diamonds are where gooddesign decisions matter most……and where designers new to mobilehave the least domain specific skilland confidence. 12
    13. 13. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 13
    14. 14. Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 14
    15. 15. Designers new to mobileA don‟t have the domain specific skills or heuristics to lean on. 15
    16. 16. PrototypePrototypePrototypePrototypePrototypePrototypePrototypePrototype 16
    17. 17. PC Prototyping is considered a LuxuryA 17
    18. 18. Mobile Prototyping is EssentialA 18
    19. 19. The best wayto develop those skillsis to prototype earlyand often. 19
    20. 20. APrototypes are the ultimatedecision-making aid 20
    21. 21. 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. 22. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview 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. 23. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview 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. 24. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview 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 24
    25. 25. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview 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 25
    26. 26. Okay, let‟s get started! 26
    27. 27. Prototyping 27
    28. 28. “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea 28
    29. 29. Communicating an Idea or Experience YouTube Video 29
    30. 30. Gather User Feedback 30
    31. 31. Explore the Unknowns 31
    32. 32. Fine-Tune an Idea 32
    33. 33. Two Genres 33
    34. 34. Experiential Prototyping 34
    35. 35. Tactical Prototyping 35
    36. 36. Experiential Prototyping:Best suited for design explorations where: 1 You are working on a “broader” mobile project. 2 Target mobile hardware and software scope is unknown. (perhaps being created). 3 The design space is relatively unchartered. 36
    37. 37. Tactical Prototyping:Best suited for design explorations where: 1 You are working on a “focused” mobile project. 2 Target mobile hardware and software scope is known. 3 The design space is relatively known. 37
    38. 38. Experiential Prototyping 38
    39. 39. 39
    40. 40. 40
    41. 41. Context Matters 41
    42. 42. Context will likely be your blindside 42
    43. 43. Context Framework 43
    44. 44. Context Framework 44
    45. 45. Experiential Prototypingwill help you understand context 45
    46. 46. Experiential Prototyping:Best suited for design explorations where: You are working on a “broader” 1 mobile project. 2 Target mobile hardware and software scope is unknown. (perhaps being created). 3 The design space is relatively unchartered.
    47. 47. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
    48. 48. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
    49. 49. Bodystorming 49
    50. 50. Through Lines
    51. 51. In reality… people‟s lives are messy
    52. 52. Similar to improvisational theater, body storminginvolves acting out possible scenarios or usecases with actors and props. Unlike computer-based technology that is logic based and onlymakes visible the conditions that existedbefore, people areillogical, perceptive, aware, and self-correcting.Body storming is a technique that helps captureand harness these messy yet essential aspectsof human behavior and account for them in themobile design process. 56
    53. 53. 1. Select groups of five to eight participants in a troupe.Photo by Christian Crumlish (xian), 2009 on Flickr 57
    54. 54. 1. Select groups of five to eight participants in a troupe. 2. 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 58
    55. 55. 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. 59Photo by Christian Crumlish (xian), 2009 on Flickr
    56. 56. 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 60
    57. 57. 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 61
    58. 58. 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 62
    59. 59. Bodystorming will help you capture the emotional tenor of mobile interactions 63
    60. 60. Design in Context 64
    61. 61. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
    62. 62. Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 66
    63. 63. Scott Davidoff of CMU •Few design tools •High Cost of Failure •Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 67
    64. 64. Speed Dating PrototypesBuilds on three theories: 1 Abundance brings perspective. Need to cross boundaries to know 2 they exist. Multiple low-cost engagements with 3 multiple concepts enables a broader perspective to emerge. 68
    65. 65. Step OneIdentify mostpromisingconcepts 69
    66. 66. Step TwoCreate storyboardsthatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 70
    67. 67. Step ThreePresent storyboards tousers & gatherfeedback 71
    68. 68. Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 72
    69. 69. Step FiveConduct user enactmentswith prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 73
    70. 70. Speed Dating Prototypes areespecially well-suited for gatheringuser impressions ofa new-to-the-world experience 74
    71. 71. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
    72. 72. Storyboarding 76
    73. 73. 77
    74. 74. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 78
    75. 75. 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. 79
    76. 76. 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. 80
    77. 77. 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. 81
    78. 78. 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. 82
    79. 79. 83
    80. 80. 84
    81. 81. Your Design Challenge!Storyboarding 1 Select one concept you‟d like to explore more deeply using the storyboarding technique. Storyboard one scenario using the templates 2 provided. Remember to identify the key issues the 3 character faces and rough out the complete story before filling in details.
    82. 82. 30 Minutes
    83. 83. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
    84. 84. Concept VideosNokia 888 communicator concept phone design by Tamer Nakisci 91
    85. 85. 92
    86. 86. 9393
    87. 87. Concept VideosPros•High Impact•Highly Shareable•Good for High-Level Ideas•Technology still in development 94
    88. 88. Concept VideosPros Cons•High Impact •Resource Intensive!!!•Highly Shareable •Skill Intensive•Good for High-Level •Cultural Fit Ideas •Concept videos don‟t•Technology still in make bad ideas good. development 95
    89. 89. Tactical Prototyping
    90. 90. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 97
    91. 91. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 98
    92. 92. Sketching 99
    93. 93. Great mobile UIsspeak their power 100
    94. 94. Ruthless Editing 101
    95. 95. A Brave NUI World 102
    96. 96. 103
    97. 97. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 104
    98. 98. We‟re reaching the edges of what GUI can do 105
    99. 99. Most mobile smartphoneshave touchscreens withNatural User Interfaces 106
    100. 100. GUIs Become Brittle on a Mobile Device 107
    101. 101. 110
    102. 102. GUI/NUI Chasm 111
    103. 103. Key differences between NUI and GUI 112
    104. 104. Defining Attributes ofGUIs… 113
    105. 105. GUI Mental Model =Computer as tool 114
    106. 106. GUI = Recognition“What you see is what you get” 115
    107. 107. GUI = Metaphorics, containment and place 116
    108. 108. GUIs = Heavy Chrome, Icons & Buttons 117
    109. 109. Defining Attributes ofNUIs… 118
    110. 110. NUI Mental Model =Computer as media 119
    111. 111. NUI = Intuition“What you do is what you get” 120
    112. 112. NUI = Fluid, Unmediated, and Organic 121
    113. 113. NUIs = Content is the Star 122
    114. 114. Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 123
    115. 115. GUI = Experiences are anchored 124
    116. 116. NUI = Experiences Unfold 125
    117. 117. NUIs Unfold Like a Game 126
    118. 118. NUIs Can Feel Anchor-less 127
    119. 119. 128
    120. 120. Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll Pattern 2 The Hub and Spoke Pattern 3 The Bento Box Pattern 4 The Filtered View Pattern 129
    121. 121. Nested Doll Pattern 130
    122. 122. Hub and Spoke Pattern 131
    123. 123. Bento Box Pattern 132
    124. 124. Filtered View Pattern 133
    125. 125. A Trick to unfolding = Information boulders to pebbles 134
    126. 126. Your Design Challenge!From GUI to NUI 1 Identify an interaction sequence you‟d like to recreate using NUI principles. 2 Sketch out the interaction using the templates provided. 3 Identify how you‟d like your mobile experience to unfold. 135
    127. 127. REMEMBER!It‟s easy to go crazy and try to do it all.Instead, focus on applying what we‟ve covered… 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. 136
    128. 128. 137
    129. 129. 30 Minutes
    130. 130. Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 139
    131. 131. 1. Sketch screen layouts. 140Photo courtesy of Diego Pulido and UX Magazine
    132. 132. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 141Photo courtesy of Diego Pulido and UX Magazine
    133. 133. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 142Photo courtesy of Diego Pulido and UX Magazine
    134. 134. 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. 143Photo courtesy of Diego Pulido and UX Magazine
    135. 135. 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. 144Photo courtesy of Diego Pulido and UX Magazine
    136. 136. 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. 145Photo courtesy of Diego Pulido and UX Magazine
    137. 137. Your Design Challenge!Create an in-screen prototype. 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…. 146
    138. 138. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 147
    139. 139. Keynote/Powerpoint Prototypes 148
    140. 140. 149
    141. 141. Reasons for Prototypingin 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. 150
    142. 142. 151
    143. 143. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 152
    144. 144. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
    145. 145. Shapeshifting
    146. 146. 156
    147. 147. “We made the webin the image ofourselves, and inthe U.S., thatmeans OBESE.”~Jason Grigsby
    148. 148. A 158
    149. 149. 159
    150. 150. Q: “I think a lot of web design in the past five to ten years is actuallyQ: just a reflection of print again. We‟ve been designing for one context, which isn‟t much better than a PDF document.” ~ Bryan Rieger 160
    151. 151. Q: “Our obsession with layout (carried over from print design)Q: keeps us from seizing much bigger opportunities on mobile.” ~ Luke Wroblewski 161
    152. 152. 162
    153. 153. Shapeshifting
    154. 154. Plans & Situated ActionMutual Reconfiguration
    155. 155. Q: Suchman‟s theory of mutual reconfiguration suggests a person‟sQ: capacity to act (their agency) is reconfiguredwhen it comes into contact with another thing or person - thathuman action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.
    156. 156. 168
    157. 157. Q:Q: Two Design Implications
    158. 158. Q:Q: 1. Shift in contextual assumptions
    159. 159. Q:Q: 2. Shift in our sensibilities around content as a design material
    160. 160. Q:Q: 1. Shift in contextual assumptions
    161. 161. A
    162. 162. A Throughout the design process, our work should be situated in the contexts where it will be used.
    163. 163. Go to the Gemba
    164. 164. Go to the Gemba
    165. 165. Go to the Gemba
    166. 166. Q:Q: 2. Shift in our sensibilities around content as a design material
    167. 167. Design as the manipulation of materials.
    168. 168. Q:Q: Pages and screens are not our design material
    169. 169. Content as a design material.
    170. 170. “Right now many designers end upfocusing a lot of energy on the overlyingQ:view – the whole template and look andfeel. But the smaller the screen gets, theQ:less that stuff matters.One of the most important things we‟vestarted looking at is writing and workingwith APIs rather than designing „pages‟for one context.”~Stephanie Rieger
    171. 171. “For so much digital content, there is nogood metaphor to render anymore – thecontent is just information, text andimages – so new approaches toQ:interaction and visual UI design areneeded.”~Mike Kruzeniski
    172. 172. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
    173. 173. Mark Weiser
    174. 174. Q:Q:
    175. 175. “The most profound technologiesQ:are those that disappear.Q:They weave themselves into thefabric of everyday life until they areindistinguishable from it.”~ Mark WeiserThe Computer for the 21st Century
    176. 176. Q:Q: Tab Pad Yard-Sized Board 1991
    177. 177. 2010
    178. 178. Mobile devices arethe gateway drug for ubicomp
    179. 179. Following toddlers into the future
    180. 180. “I like cuddling up in bed with NetflixQ:on the iPad instead of sitting in frontof the TV. It‟s more comfortable toQ:go to bed with a movie the sameway I used to go to bed with abook”~ NorbertiPad Study Participant
    181. 181. “It‟s almost like my blankie…Q:I curl up in bed with it, or on thecouch. I usually have it withQ:me, regardless of extenuatingcircumstances ”~ EriniPad Study Participant
    182. 182. “It’s almost like my blankie…”
    183. 183. Say Goodbye to Done
    184. 184. This should look familiar… 213
    185. 185. This should look familiar… The web has evolved around a task-efficiency model. Mobile can be different. 214
    186. 186. Tasks are about completion… 215
    187. 187. Tasks are about completion…Possibilities are interactions thataccrue over time… 216
    188. 188. Tasks are about completion…Possibilities are interactions thataccrue over time…… or facilitateexploration… 217
    189. 189. Tasks are about completion…Possibilities are interactions thataccrue over time… ..or are about… or facilitate SENSINGexploration… INTENT! 218
    190. 190. 219
    191. 191. 220
    192. 192. 221
    193. 193. 222
    194. 194. 223
    195. 195. 224
    196. 196. Fidelity 226
    197. 197. Failure 227
    198. 198. Prototyping is not a Panacea 228
    199. 199. PC Prototyping is considered a LuxuryA
    200. 200. Mobile Prototyping is EssentialA
    201. 201. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
    202. 202. Mobile presents anopportunity to invent newways for users to interactwith information. 232
    203. 203. Thank you!Email:rachel.hinman@nokia.comTemplates and Online Resources:www.rachelhinman.com/mobile_prototyping_essentials
    204. 204. Oh! By the way, I‟m writing a book..The Mobile FrontierA Guide for DesigningMobile ExperiencesExpected Publication: May 2012Follow along…
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×