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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
