5. Where do I begin “I would have made different choices.”
6. Where do I begin Key Difference = Different Design Choices
7. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process
8. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping
9. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping
10. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods
11. Along the way… Along the way Watch for slides with this orange label! Slides Worth Keeping Design Principles Design Activities Shameless Opinion
20. The final diamond is where good design decisions matter most… …and where designers new to mobile have the least domain specific skill and confidence. 20 Web designers know how to work in a rapidly evolving field
24. 24 Differences in the mobile environment Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
25. 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 25
26. Designers new to mobile don’t have the domain specific skills or heuristics to lean on. A Um… duh!
27. The best way to develop those skills is to prototype early and often. A Um… duh!
29. What we learned from the web steal this slide! “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea
37. 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.
38. 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.
40. 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
41. 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
48. We can annotate expectations in the web world 48 We can annotate expectations in the web world
49. We can annotate expectations in the web world Free two-day shipping Look inside the book REALLY!Look inside the book Get it new OR used! Sell mine Add to cart Shipping! Collectible! Maybe a kindle!
50. Options have to be apparent and intuitive in mobile for people to
51. 51 Text entry will never be easy Design for partial attention and interruption
52. How do you make interfaces that speak their power How do I create mobile interfaces that “speak their power”? Q: A
53. Edit!!! 53 Web designers know how to work in a rapidly evolving field
59. What we learned from the web steal this slide! Tips for Ruthless Editing What’s the primary purpose of this screen? What are the 3-5 secondary actions this screen must support? What is the most intuitive way to visualize this information? Will users know how to interact with the screen within three seconds? Is the information on this screen too dense? What can be removed?
60. Paper In-Screen Prototypes Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine 60 http://www.uxmag.com/design/paper-in-screen-prototyping
61. Paper Prototype example 1. Sketch screen layouts. 61 Photo courtesy of Diego Pulido and UX Magazine
62. Paper Prototype example 1. Sketch screen layouts. 2. Scan or photograph the sketches. 62 Photo courtesy of Diego Pulido and UX Magazine
63. Paper Prototype example 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 63 Photo courtesy of Diego Pulido and UX Magazine
64. 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. 64 Photo courtesy of Diego Pulido and UX Magazine
65. 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. 65 Photo courtesy of Diego Pulido and UX Magazine
66. 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. 66 Photo courtesy of Diego Pulido and UX Magazine
72. What we learned from the web steal this slide! Reasons for Prototyping in 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.
73. What we learned from the web steal this slide! Reasons for Prototyping in 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.
78. 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.
86. 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.
87. What we learned from the web Experiential Prototypes Storyboarding Body Storming Speed Dating Prototypes Concept Videos
90. What we learned from the web Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate.
91. 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.
92. 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
93. 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.
94. 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.
104. 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. 104
105. Select groups of five to eight participants in a troupe. Photo by Christian Crumlish (xian), 2009 on Flickr 105
106. 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 106
107. 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. 107 Photo by Christian Crumlish (xian), 2009 on Flickr
108. 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 108
109. 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 109
110. 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 110
112. Paper Prototype example Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 112
115. Unpredictable social consequencesRapidly Exploring Application Design through Speed Dating 113
116. Speed Dating Prototypes Builds on three theories: Abundance brings perspective. 1 Sympathy to context principles 2 Need to cross boundaries to know they exist. 3 Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
141. Our plan for today… Our plan for today Identify where things usually go wrong during the mobile UX process Review the four “whys” of prototyping Identify the two genres of mobile prototyping Overview/how-to of six mobile prototyping methods