Mobile Prototyping Essentials                                                    Part IIRachel HinmanSenior Research Scien...
Our plan for today…8:30am - NoonWhat makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• ...
Q:   What makes mobile UX different?Q:                                       3
A    4
5:-(A
A    6
?    7
8    8
BadDecision-Making                  9
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…                          ...
…and their instincts are notA   tuned to the nuance of    mobile.                                   14
Try starting with instinct and intuition
A    Instinctnoun    A natural or innate impulse,    inclination, or tendency.                                   16
PC Prototyping    is considered a    LuxuryA                      17
A    Design involves    Instincts                      18
Mobile Prototyping is    EssentialA                             19
A          Prototyping    will help you developMobile Instincts                            20
A    21
A    Design involves    Instincts                      22
A          Prototyping    will help you developMobile Instincts                            23
Our plan for this afternoon… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overv...
Our plan for this afternoon… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overv...
Our plan for this afternoon… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overv...
Our plan for this afternoon… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overv...
Okay, let’s get started!                           28
Prototyping          29
“Whys” of prototyping  Improve your design decision-making  Communicate an Idea  Gather User Feedback  Explore the “Unknow...
Communicating an Idea or Experience             YouTube Video        31
Gather User Feedback                       32
Explore the Unknowns                       33
Fine-Tune an Idea                    34
Two Genres             35
Experiential Prototyping                           36
Tactical Prototyping                       37
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                           40
41
42
Context Matters                  43
Context will likely be  your blindside                         44
Experiential Prototypingwill help you understand          context                           45
Experiential Prototypes  Body Storming  Storyboarding  Speed Dating Prototypes  Concept Videos
Experiential Prototypes  Body Storming  Storyboarding  Speed Dating Prototypes  Concept Videos
Experiential Prototypes  Body Storming  Storyboarding  Speed Dating Prototypes  Concept Videos
Q:   “…users are just trying to muddle     through situations in their lives.Q:     They often act without rationalizing.”...
Plans & Situated ActionMutual Reconfiguration
Q:   Suchman’s theory of mutual     reconfiguration suggests a person’sQ:     capacity to act (their agency) is     reconf...
54
55
Bodystorming               57
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 ability to                      ...
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                66
Experiential Prototypes  Body Storming  Storyboarding  Speed Dating Prototypes  Concept Videos
Storyboarding            68
Why Storyboard?                  69
1. In mobile, Context Matters                                70
Even in situations in which a spirit of exploration and freedom exist, where facultyare“Hey, I’ve got this work beyond phy...
72
73
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...
79
80
Select a concept…                    81
Your Design Challenge!Storyboarding 1 Select one concept you’d like to explore more   deeply using the storyboarding techn...
30Minutes
Experiential Prototypes  Body Storming  Storyboarding  Speed Dating Prototypes  Concept Videos
Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating   ...
Scott Davidoff of CMU                                     •Few design tools                                     •High Cost...
Experiential Prototypes  Body Storming  Storyboarding  Speed Dating Prototypes  Concept Videos
Speed Dating PrototypesBuilds on three theories: 1   Abundance brings perspective.     Need to cross boundaries to know 2 ...
Step OneIdentify most promisingconcepts                          92
Step TwoCreate storyboards thatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Des...
Step ThreePresent storyboards tousers & gather feedback                          94
Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating   95
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           ...
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...
Already talked about….                         Great mobile UIs                         speak their power                 ...
Already talked about….                    Edit!!!                              102
Already talked about….              Ruthless               Editing                         103
Already talked about….   A                         104
A Brave NUI World               105
106
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                        108
Most mobile smartphoneshave touchscreens withNatural User Interfaces                          109
GUIs Become Brittle on a Mobile Device                  110
113
Eight Principles of NUIs1.   Principle of Performance Aesthetics2.   Principle of Direct Manipulation3.   Principle of Sca...
1. Principle of Performance Aesthetics                NUI experiences should be like an                ocean voyage, the p...
2. Principle of Direct Manipulation                   Touch screens and gestural                   interaction functionali...
3. Principle of Scaffolding                                        Scaffolding is strong cue or                           ...
4. Principle of Contextual Environments                  Unlike GUIs that will present a user                  with the sa...
5. Principle of the Super Real                   Unlike GUIs that contains information                   in a cascading se...
6. Principle of Social Interaction                    Unlike GUI laptops that are                    optimized for individ...
7. Principle of Spatial Representation                       Unlike GUI systems, where an                       icon serve...
8. Principle of Seamlessness                      Touchscreens, sensors                      embedded in hardware, and    ...
GUI/NUI Chasm                123
Q:Q:
Key differences between     NUI and GUI                          125
Defining Attributes ofGUIs…                         126
GUI Mental Model =Computer as tool                     127
GUI = Recognition“What you see is what you get”                            128
GUI = Metaphorics, containment and place                                       129
GUIs = Heavy Chrome, Icons & Buttons                                       130
Defining Attributes ofNUIs…                         131
NUI Mental Model =Computer as media                     132
NUI = Intuition“What you do is what you get”                            133
NUI = Fluid, Unmediated, and Organic                                       134
NUIs = Content is the Star                         135
GUI = Experiences are anchored                             136
NUI = Experiences Unfold                      137
NUIs Unfold Like a Game                          138
NUIs Can Feel Anchor-less                       139
140
Mobile Experiences UnfoldPatterns for how mobile experiences unfoldand progressively reveal their nature 1 The Nested Doll...
Nested Doll Pattern                 142
Hub and Spoke Pattern                   143
Bento Box Pattern                    144
Filtered View Pattern                   145
Design Challenge!From GUI to NUI 1 Identify an interaction sequence you’d like to    recreate using NUI principles. 2 Sket...
147
148
149
150
151
REMEMBER!It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…  Understanding the diff...
GUI to NUI TranslationFocus on....   Boulder to Pebbles - Create UIs that   speak their power with Ruthless   Editing!   N...
30 Minutes
Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos co...
1. Sketch screen layouts.                                                                             156Photo 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                               ...
5-10 Minutes
Q:    Now you can really start to haveQ:      some fun!
• Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors
Q:What revisions canQ: you make now?
Design Challenge!From GUI to NUI Modifications 1 Now that your concept is on the device, what    new interactions does the...
20 Minutes
3Key Learnings                170
1. Sketching Rocks!                  171
2. Get into the NUI Paradigm                to design for it
3. Get your work on a device                                                             as quickly as you                ...
3. GET YOUR WORK ON A                                                      DEVICE AS QUICKLY                              ...
175
176
177
supermodel
Use the medium you’re         designing for
Making it pretty…
181
Tactical Prototypes  Sketching  In-Screen Mobile Prototypes  Mobile Browser Prototypes  Keynote/Powerpoint Prototypes  Fla...
Keynote/Powerpoint Prototypes                                183
184
Reasons for Prototypingin Keynote/Powerpoint  It’s super efficient and fast!  Level of fidelity is high – gives you an end...
http://keynotopia.com/                         186
Even in situations in which a spirit of exploration and freedom exist, where facultyare free to experiment to workIn closi...
Fidelity           188
Failure          189
Prototyping is not a Panacea                           190
Mobile presents anopportunity to invent newways for users to interactwith information.                             191
Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
Q:Q:
PC Prototyping    is considered a    LuxuryA
Mobile Prototyping is    EssentialA
A           Prototyping     will help you develop    Mobile Instincts                             196
Thank you!Email:rachelhinman@gmail.com
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Upcoming SlideShare
Loading in...5
×

Mobile Prototyping Essentials Workshop: Part 2

2,208

Published on

Published in: Design
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,208
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
142
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Mobile Prototyping Essentials Workshop: Part 2

  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?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the WildNoon – 1pm - LUNCH1:30pm – 5:30pmMobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype
  3. 3. Q: What makes mobile UX different?Q: 3
  4. 4. A 4
  5. 5. 5:-(A
  6. 6. A 6
  7. 7. ? 7
  8. 8. 8 8
  9. 9. BadDecision-Making 9
  10. 10. The final diamonds are where gooddesign decisions matter most……and where designers new to mobilehave the least domain specific skilland confidence. 10
  11. 11. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 11
  12. 12. Highly variable context and environmentSmall screen size and limited text inputUI takes up the entire screenDifficult to multi-task and easy to get lost 12
  13. 13. Designers new to mobileA don’t have the domain specific skills or heuristics to lean on… 13
  14. 14. …and their instincts are notA tuned to the nuance of mobile. 14
  15. 15. Try starting with instinct and intuition
  16. 16. A Instinctnoun A natural or innate impulse, inclination, or tendency. 16
  17. 17. PC Prototyping is considered a LuxuryA 17
  18. 18. A Design involves Instincts 18
  19. 19. Mobile Prototyping is EssentialA 19
  20. 20. A Prototyping will help you developMobile Instincts 20
  21. 21. A 21
  22. 22. A Design involves Instincts 22
  23. 23. A Prototyping will help you developMobile Instincts 23
  24. 24. Our plan for this afternoon… 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 24
  25. 25. Our plan for this afternoon… 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. Our plan for this afternoon… 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 26
  27. 27. Our plan for this afternoon… 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 Three hands-on activities 27
  28. 28. Okay, let’s get started! 28
  29. 29. Prototyping 29
  30. 30. “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea 30
  31. 31. Communicating an Idea or Experience YouTube Video 31
  32. 32. Gather User Feedback 32
  33. 33. Explore the Unknowns 33
  34. 34. Fine-Tune an Idea 34
  35. 35. Two Genres 35
  36. 36. Experiential Prototyping 36
  37. 37. Tactical Prototyping 37
  38. 38. 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. 38
  39. 39. 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. 39
  40. 40. Experiential Prototyping 40
  41. 41. 41
  42. 42. 42
  43. 43. Context Matters 43
  44. 44. Context will likely be your blindside 44
  45. 45. Experiential Prototypingwill help you understand context 45
  46. 46. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  47. 47. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  48. 48. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  49. 49. Q: “…users are just trying to muddle through situations in their lives.Q: They often act without rationalizing.” ~ Andrew Hinton Interactions 2012
  50. 50. Plans & Situated ActionMutual Reconfiguration
  51. 51. 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.
  52. 52. 54
  53. 53. 55
  54. 54. Bodystorming 57
  55. 55. 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 existed before,people are illogical, 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. 58
  56. 56. 1. Select groups of five to eight participants in a troupe.Photo by Christian Crumlish (xian), 2009 on Flickr 59
  57. 57. 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 60
  58. 58. 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. 61Photo by Christian Crumlish (xian), 2009 on Flickr
  59. 59. 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 62
  60. 60. 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 63
  61. 61. 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 64
  62. 62. Bodystorming will help you capture the emotional tenor of mobile interactions 65
  63. 63. Design in Context 66
  64. 64. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  65. 65. Storyboarding 68
  66. 66. Why Storyboard? 69
  67. 67. 1. In mobile, Context Matters 70
  68. 68. Even in situations in which a spirit of exploration and freedom exist, where facultyare“Hey, I’ve got this work beyond physical free to experiment to great idea …” and social constraints, our cognitive habits often get in the way. Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a rear-view mirror. We march backwards into the future.” 2. Qualify ideas
  69. 69. 72
  70. 70. 73
  71. 71. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 74
  72. 72. 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. 75
  73. 73. 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. 76
  74. 74. 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. 77
  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. Rough out the basic story Start filling in the cells. Rough out the complete story, then fill in details. 78
  76. 76. 79
  77. 77. 80
  78. 78. Select a concept… 81
  79. 79. 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.
  80. 80. 30Minutes
  81. 81. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  82. 82. Speed Dating PrototypesIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 88
  83. 83. Scott Davidoff of CMU •Few design tools •High Cost of Failure •Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 89
  84. 84. Experiential Prototypes Body Storming Storyboarding Speed Dating Prototypes Concept Videos
  85. 85. 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. 91
  86. 86. Step OneIdentify most promisingconcepts 92
  87. 87. Step TwoCreate storyboards thatdepict each conceptIllustration courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 93
  88. 88. Step ThreePresent storyboards tousers & gather feedback 94
  89. 89. Step FourCreate prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 95
  90. 90. Step FiveConduct user enactmentswith prototypesPhoto courtesy of Scott DavidoffRapidly Exploring Application Design through Speed Dating 96
  91. 91. Speed Dating Prototypes areespecially well-suited for gatheringuser impressions ofa new-to-the-world experience 97
  92. 92. Tactical Prototyping
  93. 93. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 99
  94. 94. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 100
  95. 95. Already talked about…. Great mobile UIs speak their power 101
  96. 96. Already talked about…. Edit!!! 102
  97. 97. Already talked about…. Ruthless Editing 103
  98. 98. Already talked about…. A 104
  99. 99. A Brave NUI World 105
  100. 100. 106
  101. 101. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 107
  102. 102. We’re reaching the edges of what GUI can do 108
  103. 103. Most mobile smartphoneshave touchscreens withNatural User Interfaces 109
  104. 104. GUIs Become Brittle on a Mobile Device 110
  105. 105. 113
  106. 106. Eight Principles of NUIs1. Principle of Performance Aesthetics2. Principle of Direct Manipulation3. Principle of Scaffolding4. Principle of Contextual Environments5. Principle of Super Real6. Principle of Social Interaction7. Principle of Spatial Representation8. Principle of Seamlessness
  107. 107. 1. Principle of Performance Aesthetics NUI experiences should be like an ocean voyage, the pleasure comes from the interaction, not the accomplishment. Example: Part instrument, part composition and part artwork, the iPhone application Bloom enables users to create elaborate patterns and unique melodies by simply tapping on the screen 115
  108. 108. 2. Principle of Direct Manipulation Touch screens and gestural interaction functionality enable users to feel like they are physically touching and manipulating information with their fingertips. Example: The scrolling gesture is an example of the Principle of Direct manipulation 116
  109. 109. 3. Principle of Scaffolding Scaffolding is strong cue or guide that sets a user’s expectation by giving them an indication of how the interaction will unfold.Example:The graphics that surround objects asthe are placed on a Surface Table arean example of scaffolding. 117
  110. 110. 4. Principle of Contextual Environments Unlike GUIs that will present a user with the same set of options regardless of the context it is in, NUIs are responsive to the environment and suggests what the next interaction should be. Example: Most mobile devices can locate themselves in time and space, and present interfaces that adapt to the orientation of the device. 118
  111. 111. 5. Principle of the Super Real Unlike GUIs that contains information in a cascading series of windows that resemble sheets of paper, successful NUIs extend objects in a logical way into the world of magic. Example: Gestures like “pinch/zoom” are a logical extension into the world of magic 119
  112. 112. 6. Principle of Social Interaction Unlike GUI laptops that are optimized for individual use, systems with larger NUI formats like the Microsoft Surface Table or tablets, like the iPad, lend themselves to social computing experiences. Example: Matt Jones of BERG Design Consultancy created an UI iPad sketch that explores the passable and sharable nature of the iPad as an object 120
  113. 113. 7. Principle of Spatial Representation Unlike GUI systems, where an icon serves as visual representation of information, NUIs represent information as objects. Example: NUI objects have auras, like attraction affordances pictured in this Surface Table application. 121
  114. 114. 8. Principle of Seamlessness Touchscreens, sensors embedded in hardware, and the use of gestural UIs allow NUI interactions to feel seamless for users because interactions are direct. There are fewer barriers between the user and information. Example: Coverflow UI on the iPhone is a seamless way to navigate content 122
  115. 115. GUI/NUI Chasm 123
  116. 116. Q:Q:
  117. 117. Key differences between NUI and GUI 125
  118. 118. Defining Attributes ofGUIs… 126
  119. 119. GUI Mental Model =Computer as tool 127
  120. 120. GUI = Recognition“What you see is what you get” 128
  121. 121. GUI = Metaphorics, containment and place 129
  122. 122. GUIs = Heavy Chrome, Icons & Buttons 130
  123. 123. Defining Attributes ofNUIs… 131
  124. 124. NUI Mental Model =Computer as media 132
  125. 125. NUI = Intuition“What you do is what you get” 133
  126. 126. NUI = Fluid, Unmediated, and Organic 134
  127. 127. NUIs = Content is the Star 135
  128. 128. GUI = Experiences are anchored 136
  129. 129. NUI = Experiences Unfold 137
  130. 130. NUIs Unfold Like a Game 138
  131. 131. NUIs Can Feel Anchor-less 139
  132. 132. 140
  133. 133. 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 141
  134. 134. Nested Doll Pattern 142
  135. 135. Hub and Spoke Pattern 143
  136. 136. Bento Box Pattern 144
  137. 137. Filtered View Pattern 145
  138. 138. 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. 146
  139. 139. 147
  140. 140. 148
  141. 141. 149
  142. 142. 150
  143. 143. 151
  144. 144. 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. 152
  145. 145. GUI to NUI TranslationFocus on.... Boulder to Pebbles - Create UIs that speak their power with Ruthless Editing! NUI characteristics: • Computer as Media • What you DO is what you get • Content is the interface • Unfolding NUI Unfolding Patterns • Nested Doll • Hub and Spoke • Bento Box • Filtered View
  146. 146. 30 Minutes
  147. 147. Paper In-Screen PrototypesFollowing Process documented by Diego PulidoviaUX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 155
  148. 148. 1. Sketch screen layouts. 156Photo courtesy of Diego Pulido and UX Magazine
  149. 149. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 157Photo courtesy of Diego Pulido and UX Magazine
  150. 150. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 158Photo courtesy of Diego Pulido and UX Magazine
  151. 151. 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. 159Photo courtesy of Diego Pulido and UX Magazine
  152. 152. 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. 160Photo courtesy of Diego Pulido and UX Magazine
  153. 153. 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. 161Photo courtesy of Diego Pulido and UX Magazine
  154. 154. 5-10 Minutes
  155. 155. Q: Now you can really start to haveQ: some fun!
  156. 156. • Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors
  157. 157. Q:What revisions canQ: you make now?
  158. 158. Design Challenge!From GUI to NUI Modifications 1 Now that your concept is on the device, what new interactions does the device inspire? Modify your existing interaction sequence 2 with at least one NUI-inspired interaction Create a new in-screen prototype using the 3 new NUI-inspired interaction 168
  159. 159. 20 Minutes
  160. 160. 3Key Learnings 170
  161. 161. 1. Sketching Rocks! 171
  162. 162. 2. Get into the NUI Paradigm to design for it
  163. 163. 3. Get your work on a device as quickly as you can 173Photo courtesy of Diego Pulido and UX Magazine
  164. 164. 3. GET YOUR WORK ON A DEVICE AS QUICKLY AS YOU CAN 174Photo courtesy of Diego Pulido and UX Magazine
  165. 165. 175
  166. 166. 176
  167. 167. 177
  168. 168. supermodel
  169. 169. Use the medium you’re designing for
  170. 170. Making it pretty…
  171. 171. 181
  172. 172. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 182
  173. 173. Keynote/Powerpoint Prototypes 183
  174. 174. 184
  175. 175. 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. 185
  176. 176. http://keynotopia.com/ 186
  177. 177. Even in situations in which a spirit of exploration and freedom exist, where facultyare free to experiment to workIn closing…. beyond physical and social constraints, our cognitive habits often get in the way. Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a rear-view mirror. We march backwards into the future.”
  178. 178. Fidelity 188
  179. 179. Failure 189
  180. 180. Prototyping is not a Panacea 190
  181. 181. Mobile presents anopportunity to invent newways for users to interactwith information. 191
  182. 182. Great Mobile Experiences:1 are uniquely mobile2 are sympathetic to context3 speak their power3
  183. 183. Q:Q:
  184. 184. PC Prototyping is considered a LuxuryA
  185. 185. Mobile Prototyping is EssentialA
  186. 186. A Prototyping will help you develop Mobile Instincts 196
  187. 187. Thank you!Email:rachelhinman@gmail.com
  1. A particular slide catching your eye?

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

×