0
Title<br />Mobile Prototyping Essentials<br />UX Australia 2011<br />Rachel Hinman<br />Senior Research Scientist  <br />N...
I used to be a web designer, too<br />2<br />
What makes mobile UX different?<br />Q:<br />Q:<br />3<br />
A<br />What are the similarities<br />4<br />
What are the similarities<br />A<br />:-(<br />5<br />
A<br />What are the similarities<br />6<br />
?<br />7<br />
8<br />Web designers know how to work in a rapidly evolving field<br />8<br />
Web designers know how to work in a rapidly evolving field<br />Bad Decision-Making<br />9<br />
The final diamonds are where good design decisions matter most…<br />…and where designers new to mobile have the least dom...
Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input...
Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited tex...
Designers new to mobile don’t have the domain specific skills or heuristics to lean on.<br />A<br />13<br />
Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Pr...
PC Prototypingis considered a  <br />A<br />Um… duh!<br />Luxury<br />15<br />
Mobile Prototyping is<br />Essential<br />A<br />16<br />
The best way to develop those skills is to prototype early <br />and often.<br />17<br />
A<br />Prototypes are the ultimate <br />decision-making aid<br />18<br />
Our plan for today…<br />Our plan for today<br />Review the  four “whys” of mobile prototyping<br />Identify the two genre...
Our plan for today…<br />Our plan for today<br />Review the  four “whys” of mobile prototyping<br />Identify the two genre...
Our plan for today…<br />Our plan for today<br />Review the  four “whys” of mobile prototyping<br />Identify the two genre...
Our plan for today…<br />Our plan for today<br />Review the  four “whys” of mobile prototyping<br />Identify the two genre...
Our plan for today…<br />Our plan for today<br />Review the  four “whys” of mobile prototyping<br />Identify the two genre...
Okay, let’s get started!<br />Okay… let’s get started<br />24<br />
Prototyping<br />25<br />
steal this slide!<br />“Whys” of prototyping<br />Improve your design decision-making<br />Communicate an Idea<br />Gather...
Communicating an Idea or Experience<br />YouTube Video<br />27<br />
Hypothesis vs. Agenda<br />Gather User Feedback<br />28<br />
Hypothesis vs. Agenda<br />Explore the Unknowns<br />29<br />
Hypothesis vs. Agenda<br />Fine-Tune an Idea<br />30<br />
Two Genres<br />31<br />
Hypothesis vs. Agenda<br />Experiential Prototyping<br />32<br />
Tactical Prototyping<br />33<br />
You are working on a “broader” mobile project.<br />1<br />Sympathy to context principles<br />Experiential Prototyping:<b...
You are working on a “focused” mobile project.<br />1<br />Sympathy to context principles<br />Tactical Prototyping:<br />...
Experiential Prototyping<br />36<br />
37<br />
38<br />
Context Matters<br />39<br />
Context will likely beyour blindside<br />40<br />
Context Framework<br />Context Framework<br />steal this slide!<br />41<br />
Context Framework<br />Context Framework<br />steal this slide!<br />42<br />
Experiential Prototypingwill help you understand<br />context<br />43<br />
Sympathy to context principles<br />Experiential Prototyping:<br />Best suited for design explorations where:<br />You are...
What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Vid...
Paper Prototype example<br />Bodystorming<br />46<br />
Through Lines<br />
In reality… people’s lives are messy<br />
Paper Prototype example<br />Similar to improvisational theater, body storming involves acting out possible scenarios or u...
Select groups of five to eight participants in a troupe. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />54<...
Paper Prototype example<br />Select groups of five to eight participants in a troupe. <br />Identify 3-5 experience scenar...
Paper Prototype example<br />3. Every player must have a role; there should be no “trees” that are just for background. Us...
Paper Prototype example<br /> 4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to ...
Paper Prototype example<br />5. Have a narrator or color commentator who can explain things. The narrator can pretend the ...
Paper Prototype example<br />6. De-brief after each scenario. What did the group learn? What was surprising? What seemed i...
Bodystorming will help you capture the emotional tenor of mobile interactions<br />60<br />
Paper Prototype example<br />Design in Context<br />61<br />
What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Vid...
Paper Prototype example<br />Speed Dating Prototypes<br />Illustration courtesy of Scott Davidoff Rapidly Exploring Applic...
Paper Prototype example<br />Scott Davidoff of CMU<br /><ul><li>Few design tools
High Cost of Failure
Unpredictable social consequences</li></ul>Rapidly Exploring Application Design through Speed Dating<br />64<br />
Speed Dating Prototypes<br />Builds on three theories:<br />1<br />Abundance brings perspective.<br />Need to cross bounda...
“in the wild” ideation<br />Step One<br />Identify most promising<br />concepts<br />66<br />
Paper Prototype example<br />Step Two<br />Create storyboards thatdepict each concept<br />Illustration courtesy of Scott ...
Paper Prototype example<br />Step Three<br />Present storyboards tousers & gather feedback<br />68<br />
Step Four<br />Create prototypes<br />Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed ...
Step Five<br />Conduct user enactments with prototypes<br />Photo courtesy of Scott Davidoff Rapidly Exploring Application...
Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience<br />71...
What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Vid...
Paper Prototype example<br />Concept Videos<br />Nokia 888 communicator concept phone design by Tamer Nakisci<br />73<br />
Paper Prototype example<br />74<br />
Paper Prototype example<br />75<br />75<br />
Paper Prototype example<br />Concept Videos<br />Pros<br /><ul><li>High Impact
Highly Shareable
Good for High-Level  Ideas
Technology still in  development </li></ul>76<br />
Paper Prototype example<br />Concept Videos<br />Pros<br />Cons<br /><ul><li>High Impact
Highly Shareable
Good for High-Level  Ideas
Technology still in  development
Resource Intensive!!!
Skill Intensive
Cultural Fit
Concept videos don’t   make bad ideas good.</li></ul>77<br />
The first step of creating a concept video is….<br />78<br />
What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Vid...
Paper Prototype example<br />Storyboarding<br />80<br />
“in the wild” ideation<br />81<br />
What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate....
What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate....
What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate....
What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate....
What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate....
Paper Prototype example<br />87<br />
Paper Prototype example<br />88<br />
Pivoting people through information<br />Your Design Challenge!<br />Storyboarding<br />Activity<br />89<br />
Pivoting people through information<br />Your Design Challenge!<br />Storyboarding: Ideas<br />Activity<br />90<br />
Your Design Challenge!<br />Storyboarding<br />Activity<br />Select one concept you’d like to explore more deeply using th...
Hypothesis vs. Agenda<br />Tactical Prototyping<br />
What we learned from the web<br />steal this slide!<br />Tactical Prototypes<br />Sketching/Paper Prototyping<br />In-Scre...
steal this slide!<br />Tactical Prototypes<br />Sketching/Paper Prototyping<br />In-Screen Mobile Prototypes<br />Mobile B...
Hypothesis vs. Agenda<br />Sketching<br />95<br />
Hypothesis vs. Agenda<br />Great mobile UIs<br />speak their power<br />96<br />
Speak their power?<br />Huh?<br />Q:<br />A<br />97<br />
A light switch<br />98<br />
Shopping cart<br />99<br />
100<br />
We can annotate expectations in the web world<br />We can annotate expectations<br />in the web world<br />101<br />
We can annotate expectations in the web world<br />REALLY!Look inside the book<br />Free two-day shipping<br />Look inside...
Options have to be apparent and intuitive in mobile for people to <br />103<br />
104<br />Text entry will never be easy<br />Design for partial attention andinterruption<br />
How do you make interfaces that speak their power<br />How do I create mobile interfaces that “speak their power”?<br />Q:...
Web designers know how to work in a rapidly evolving field<br />Edit!!!<br />106<br />
Web designers know how to work in a rapidly evolving field<br />RuthlessEditing<br />107<br />
108<br />Wireframe<br />A Brave NUI World<br />
Wireframe<br />109<br />
Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input...
111<br />Wireframe<br />We’re reaching the edges <br />of what GUI can do<br />
Wireframe<br />Most mobile smartphones<br />have touchscreens with Natural User Interfaces<br />112<br />
113<br />Wireframe<br />GUIs Become Brittle<br />on a Mobile Device<br />
Hypothesis vs. Agenda<br />
Hypothesis vs. Agenda<br />
116<br />Wireframe<br />
Wireframe<br />GUI/NUI Chasm<br />117<br />
Key differences between NUI and GUI<br />Okay… let’s get started<br />118<br />
Defining Attributes of <br />GUIs…<br />119<br />
Paper Prototype example<br />GUI Mental Model = <br />Computer as tool<br />120<br />
Paper Prototype example<br />GUI = Recognition<br />“What you see is what you get”<br />121<br />
Wireframe<br />GUI = Metaphorics, containment and place<br />122<br />
GUIs = Heavy Chrome, Icons & Buttons<br />123<br />
Defining Attributes of <br />NUIs…<br />124<br />
Paper Prototype example<br />NUI Mental Model = <br />Computer as media<br />125<br />
Paper Prototype example<br />NUI = Intuition<br />“What you do is what you get”<br />126<br />
127<br />Wireframe<br />NUI = Fluid, Unmediated, and Organic<br />
NUIs = Content is the Star<br />It’s like a game of cards<br />128<br />
Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited tex...
Paper Prototype example<br />GUI = Experiences are anchored<br />130<br />
Paper Prototype example<br />NUI = Experiences Unfold<br />131<br />
Paper Prototype example<br />NUIs Unfold Like a Game<br />132<br />
NUIs Can Feel Anchor-less<br />133<br />
Differences in the mobile environment<br />134<br />
The Nested Doll Pattern<br />1<br />Sympathy to context principles<br />steal this slide!<br />Mobile Experiences Unfold<b...
Paper Prototype example<br />Nested Doll Pattern<br />136<br />
Paper Prototype example<br />Hub and Spoke Pattern<br />137<br />
Paper Prototype example<br />Bento Box Pattern<br />138<br />
Paper Prototype example<br />Filtered View Pattern<br />139<br />
How do you make interfaces that speak their power<br />A<br />Trick to unfolding = <br />Information boulders to pebbles<b...
How do you make interfaces that speak their power<br />A<br />141<br />
A<br />142<br />
Pivoting people through information<br />Your Design Challenge!<br />From GUI to NUI<br />Activity<br />143<br />
Pivoting people through information<br />Your Design Challenge!<br />From GUI to NUI<br />Activity<br />Identify an intera...
Pivoting people through information<br />145<br />
Pivoting people through information<br />146<br />
REMEMBER!<br />It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…<br />Activity<br ...
Differences in the mobile environment<br />148<br />
Paper In-Screen Prototypes<br />Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPh...
Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />  <br />150<br />Photo courtesy of Diego Pulido and UX...
Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />2. Scan or photograph <br />    the sketches. <br /> <...
Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />2. Scan or photograph <br />    the sketches. <br />3....
Paper Prototype example<br /> 4. Save the resized images in a file format supported by the mobile device. Be mindful of th...
 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens ...
Paper Prototype example<br />4. Save the resized images in a file format supported by the mobile device. Be mindful of the...
Your Design Challenge!<br />Create an in-screen prototype.<br />Activity<br />Hang your screen designs on the wall.<br />P...
What we learned from the web<br />steal this slide!<br />Tactical Prototypes<br />Sketching<br />In-Screen Mobile Prototyp...
Paper Prototype example<br />Paper Prototyping<br />158<br />
159<br />
Paper Prototype example<br />Mobile Browser Prototypes<br />160<br />
Paper Prototype example<br />Keynote/Powerpoint Prototypes<br />161<br />
Paper Prototype example<br />162<br />
Paper Prototype example<br />LOGO<br />Tagline<br />Edit<br />163<br />
Paper Prototype example<br />LOGO<br />Tagline<br />Sydney Opera House<br />There is no doubt that the Sydney Opera House ...
Paper Prototype example<br />LOGO<br />Tagline<br />Sydney Opera House<br />There is no doubt that the Sydney Opera House ...
Paper Prototype example<br />LOGO<br />Tagline<br />Sydney Opera House<br />There is no doubt that the Sydney Opera House ...
Paper Prototype example<br />LOGO<br />Tagline<br />LOGO<br />Tagline<br />Sydney Opera House<br />There is no doubt that ...
Paper Prototype example<br />LOGO<br />Tagline<br />Edit<br />168<br />
What we learned from the web<br />Reasons for Prototyping in Keynote/Powerpoint<br />steal this slide!<br />It’s super eff...
What we learned from the web<br />Reasons for Prototyping in Keynote/Powerpoint<br />steal this slide!<br />It’s super eff...
Paper Prototype example<br />Motion:<br />New Design Material<br />171<br />
What we learned from the web<br />Animation & TransitionsA new design elements that can:<br />steal this slide!<br />Reinf...
Paper Prototype example<br />Twelve Basic Principles <br />of Animation<br />173<br />
Paper Prototype example<br />Principle One<br />Squash and Stretch<br />174<br />
Paper Prototype example<br />Principle One<br />Squash and Stretch<br />175<br />
Paper Prototype example<br />Principle Two<br />Anticipation<br />176<br />
Paper Prototype example<br />Principle Two<br />Anticipation<br />177<br />
Paper Prototype example<br />Principle Three<br />Staging<br />178<br />
Paper Prototype example<br />Principle Three<br />Staging<br />179<br />
Paper Prototype example<br />Principle Four<br />Straight Ahead <br />and Pose to Pose<br />180<br />
Paper Prototype example<br />Principle Four<br />Straight Ahead <br />and Pose to Pose<br />181<br />
Paper Prototype example<br />Principle Five<br />Follow Through<br />and Overlapping Action<br />182<br />
Paper Prototype example<br />Principle Five<br />Follow Through<br />and Overlapping Action<br />183<br />
Paper Prototype example<br />Principle Six<br />Slow in and Out<br />184<br />
Paper Prototype example<br />Principle Six<br />Slow in and Out<br />185<br />
Paper Prototype example<br />Principle Seven<br />Arcs<br />186<br />
Paper Prototype example<br />Principle Seven<br />Arcs<br />187<br />
Paper Prototype example<br />Principle Eight<br />Secondary Action<br />188<br />
Paper Prototype example<br />Principle Eight<br />Secondary Action<br />189<br />
Paper Prototype example<br />Principle Nine<br />Timing<br />190<br />
Paper Prototype example<br />Principle Nine<br />Timing<br />191<br />
Paper Prototype example<br />Principle Ten<br />Exaggeration<br />192<br />
Paper Prototype example<br />Principle Ten<br />Exaggeration<br />193<br />
Paper Prototype example<br />Principle Eleven and Twelve<br />Solid Drawing and Appeal<br />194<br />
Upcoming SlideShare
Loading in...5
×

Mobile Prototyping Essentials

23,021

Published on

Published in: Design, Technology
6 Comments
144 Likes
Statistics
Notes
  • Get a lot from you there! Thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • UX prototyping
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Interesting Presentation indeed. Check out Fluid UI (www.fluidui.com). A new iPhone and Android prototyping tool – built from the ground up for the design of mobile touch screen UI.

    It's got full iPhone and Android widget sets, image uploads, fully linked prototypes, touch gestures, animated page transitions and on-device testing a click.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Terrific, in-depth presentation with tons of useful references and links. Thanks much for posting!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation but sometimes prototyping tools are useful and time saving...
    Check out http://proto.io the only web app built specifically for developing high-fidelity fully interactive mobile app prototypes.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
23,021
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
1,099
Comments
6
Likes
144
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Prototyping Essentials"

  1. 1. Title<br />Mobile Prototyping Essentials<br />UX Australia 2011<br />Rachel Hinman<br />Senior Research Scientist <br />Nokia Research Lab <br />Palo Alto, California USA<br />Hinman<br />
  2. 2. I used to be a web designer, too<br />2<br />
  3. 3. What makes mobile UX different?<br />Q:<br />Q:<br />3<br />
  4. 4. A<br />What are the similarities<br />4<br />
  5. 5. What are the similarities<br />A<br />:-(<br />5<br />
  6. 6. A<br />What are the similarities<br />6<br />
  7. 7. ?<br />7<br />
  8. 8. 8<br />Web designers know how to work in a rapidly evolving field<br />8<br />
  9. 9. Web designers know how to work in a rapidly evolving field<br />Bad Decision-Making<br />9<br />
  10. 10. The final diamonds are where good design decisions matter most…<br />…and where designers new to mobile have the least domain specific skill and confidence.<br />10<br />
  11. 11. Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input<br />11<br />
  12. 12. Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited text input<br /> UI takes up the entire screen <br /> Difficult to multi-task and easy to get lost<br />12<br />
  13. 13. Designers new to mobile don’t have the domain specific skills or heuristics to lean on.<br />A<br />13<br />
  14. 14. Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />14<br />
  15. 15. PC Prototypingis considered a <br />A<br />Um… duh!<br />Luxury<br />15<br />
  16. 16. Mobile Prototyping is<br />Essential<br />A<br />16<br />
  17. 17. The best way to develop those skills is to prototype early <br />and often.<br />17<br />
  18. 18. A<br />Prototypes are the ultimate <br />decision-making aid<br />18<br />
  19. 19. Our plan for today…<br />Our plan for today<br />Review the four “whys” of mobile prototyping<br />Identify the two genres of prototyping and overview of six prototyping methods<br />Review the key differences between NUI and GUI interfaces<br />Overview of animation principles that can be incorporated into your mobile experiences<br />Three hands-on activities<br />19<br />
  20. 20. Our plan for today…<br />Our plan for today<br />Review the four “whys” of mobile prototyping<br />Identify the two genres of prototyping and overview of six prototyping methods<br />Review the key differences between NUI and GUI interfaces<br />Overview of animation principles that can be incorporated into your mobile experiences<br />Three hands-on activities<br />20<br />
  21. 21. Our plan for today…<br />Our plan for today<br />Review the four “whys” of mobile prototyping<br />Identify the two genres of prototyping and overview of six prototyping methods<br />Review the key differences between NUI and GUI interfaces<br />Overview of animation principles that can be incorporated into your mobile experiences<br />Three hands-on activities<br />21<br />
  22. 22. Our plan for today…<br />Our plan for today<br />Review the four “whys” of mobile prototyping<br />Identify the two genres of prototyping and overview of six prototyping methods<br />Review the key differences between NUI and GUI interfaces<br />Overview of animation principles that can be incorporated into your mobile experiences<br />Three hands-on activities<br />22<br />
  23. 23. Our plan for today…<br />Our plan for today<br />Review the four “whys” of mobile prototyping<br />Identify the two genres of prototyping and overview of six prototyping methods<br />Review the key differences between NUI and GUI interfaces<br />Overview of animation principles that can be incorporated into your mobile experiences<br />Three hands-on activities<br />23<br />
  24. 24. Okay, let’s get started!<br />Okay… let’s get started<br />24<br />
  25. 25. Prototyping<br />25<br />
  26. 26. steal this slide!<br />“Whys” of prototyping<br />Improve your design decision-making<br />Communicate an Idea<br />Gather User Feedback<br />Explore the “Unknowns”<br />Fine-tune an Idea<br />26<br />
  27. 27. Communicating an Idea or Experience<br />YouTube Video<br />27<br />
  28. 28. Hypothesis vs. Agenda<br />Gather User Feedback<br />28<br />
  29. 29. Hypothesis vs. Agenda<br />Explore the Unknowns<br />29<br />
  30. 30. Hypothesis vs. Agenda<br />Fine-Tune an Idea<br />30<br />
  31. 31. Two Genres<br />31<br />
  32. 32. Hypothesis vs. Agenda<br />Experiential Prototyping<br />32<br />
  33. 33. Tactical Prototyping<br />33<br />
  34. 34. You are working on a “broader” mobile project.<br />1<br />Sympathy to context principles<br />Experiential Prototyping:<br />Best suited for design explorations where:<br />steal this slide!<br />2<br />Target mobile hardware and software scope is unknown.(perhaps being created).<br />3<br />The design space is relatively unchartered. <br />34<br />
  35. 35. You are working on a “focused” mobile project.<br />1<br />Sympathy to context principles<br />Tactical Prototyping:<br />Best suited for design explorations where:<br />steal this slide!<br />2<br />Target mobile hardware and software scope is known.<br />3<br />The design space is relatively known.<br />35<br />
  36. 36. Experiential Prototyping<br />36<br />
  37. 37. 37<br />
  38. 38. 38<br />
  39. 39. Context Matters<br />39<br />
  40. 40. Context will likely beyour blindside<br />40<br />
  41. 41. Context Framework<br />Context Framework<br />steal this slide!<br />41<br />
  42. 42. Context Framework<br />Context Framework<br />steal this slide!<br />42<br />
  43. 43. Experiential Prototypingwill help you understand<br />context<br />43<br />
  44. 44. Sympathy to context principles<br />Experiential Prototyping:<br />Best suited for design explorations where:<br />You are working on a “broader” mobile project.<br />1<br />Target mobile hardware and software scope is unknown.(perhaps being created).<br />2<br />The design space is relatively unchartered. <br />3<br />
  45. 45. What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Videos<br />Storyboarding<br />
  46. 46. Paper Prototype example<br />Bodystorming<br />46<br />
  47. 47. Through Lines<br />
  48. 48.
  49. 49.
  50. 50.
  51. 51.
  52. 52. In reality… people’s lives are messy<br />
  53. 53. Paper Prototype example<br />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.<br />53<br />
  54. 54. Select groups of five to eight participants in a troupe. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />54<br />
  55. 55. Paper Prototype example<br />Select groups of five to eight participants in a troupe. <br />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. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />55<br />
  56. 56. Paper Prototype example<br />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.<br /> <br />56<br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />
  57. 57. Paper Prototype example<br /> 4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />57<br />
  58. 58. Paper Prototype example<br />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.<br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />58<br />
  59. 59. Paper Prototype example<br />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. <br />Photo by Christian Crumlish (xian), 2009 on Flickr<br />59<br />
  60. 60. Bodystorming will help you capture the emotional tenor of mobile interactions<br />60<br />
  61. 61. Paper Prototype example<br />Design in Context<br />61<br />
  62. 62. What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Videos<br />Storyboarding<br />
  63. 63. Paper Prototype example<br />Speed Dating Prototypes<br />Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />63<br />
  64. 64. Paper Prototype example<br />Scott Davidoff of CMU<br /><ul><li>Few design tools
  65. 65. High Cost of Failure
  66. 66. Unpredictable social consequences</li></ul>Rapidly Exploring Application Design through Speed Dating<br />64<br />
  67. 67. Speed Dating Prototypes<br />Builds on three theories:<br />1<br />Abundance brings perspective.<br />Need to cross boundaries to know they exist.<br />2<br />Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge. <br />3<br />65<br />
  68. 68. “in the wild” ideation<br />Step One<br />Identify most promising<br />concepts<br />66<br />
  69. 69. Paper Prototype example<br />Step Two<br />Create storyboards thatdepict each concept<br />Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />67<br />
  70. 70. Paper Prototype example<br />Step Three<br />Present storyboards tousers & gather feedback<br />68<br />
  71. 71. Step Four<br />Create prototypes<br />Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />69<br />
  72. 72. Step Five<br />Conduct user enactments with prototypes<br />Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating<br />70<br />
  73. 73. Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience<br />71<br />
  74. 74. What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Videos<br />Storyboarding<br />
  75. 75. Paper Prototype example<br />Concept Videos<br />Nokia 888 communicator concept phone design by Tamer Nakisci<br />73<br />
  76. 76. Paper Prototype example<br />74<br />
  77. 77. Paper Prototype example<br />75<br />75<br />
  78. 78. Paper Prototype example<br />Concept Videos<br />Pros<br /><ul><li>High Impact
  79. 79. Highly Shareable
  80. 80. Good for High-Level Ideas
  81. 81. Technology still in development </li></ul>76<br />
  82. 82. Paper Prototype example<br />Concept Videos<br />Pros<br />Cons<br /><ul><li>High Impact
  83. 83. Highly Shareable
  84. 84. Good for High-Level Ideas
  85. 85. Technology still in development
  86. 86. Resource Intensive!!!
  87. 87. Skill Intensive
  88. 88. Cultural Fit
  89. 89. Concept videos don’t make bad ideas good.</li></ul>77<br />
  90. 90. The first step of creating a concept video is….<br />78<br />
  91. 91. What we learned from the web<br />Experiential Prototypes<br />Body Storming<br />Speed Dating Prototypes<br />Concept Videos<br />Storyboarding<br />79<br />
  92. 92. Paper Prototype example<br />Storyboarding<br />80<br />
  93. 93. “in the wild” ideation<br />81<br />
  94. 94. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />82<br />
  95. 95. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />83<br />
  96. 96. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />Rough out a basic story. <br />84<br />
  97. 97. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />Rough out a basic story. <br />Start filling in the cells. Rough out the complete story, then fill in details. <br />85<br />
  98. 98. What we learned from the web<br />Mobile UX Storyboarding<br />Identify the central idea(s) you are trying to communicate. <br />Create a character and identify the key issues he/she currently faces. <br />Rough out the basic story <br />Start filling in the cells. Rough out the complete story, then fill in details. <br />86<br />
  99. 99. Paper Prototype example<br />87<br />
  100. 100. Paper Prototype example<br />88<br />
  101. 101. Pivoting people through information<br />Your Design Challenge!<br />Storyboarding<br />Activity<br />89<br />
  102. 102. Pivoting people through information<br />Your Design Challenge!<br />Storyboarding: Ideas<br />Activity<br />90<br />
  103. 103. Your Design Challenge!<br />Storyboarding<br />Activity<br />Select one concept you’d like to explore more deeply using the storyboarding technique.<br />Storyboard one scenario using the templates provided.<br />Remember to identify the key issues the character faces and rough out the complete story before filling in details. <br />1<br />2<br />3<br />
  104. 104. Hypothesis vs. Agenda<br />Tactical Prototyping<br />
  105. 105. What we learned from the web<br />steal this slide!<br />Tactical Prototypes<br />Sketching/Paper Prototyping<br />In-Screen Mobile Prototypes<br />Mobile Browser Prototypes<br />Keynote/Powerpoint Prototypes<br />Flash Prototype<br />Platform Specific Prototype<br />93<br />
  106. 106. steal this slide!<br />Tactical Prototypes<br />Sketching/Paper Prototyping<br />In-Screen Mobile Prototypes<br />Mobile Browser Prototypes<br />Keynote/Powerpoint Prototypes<br />Flash Prototype<br />Platform Specific Prototype<br />94<br />
  107. 107. Hypothesis vs. Agenda<br />Sketching<br />95<br />
  108. 108. Hypothesis vs. Agenda<br />Great mobile UIs<br />speak their power<br />96<br />
  109. 109. Speak their power?<br />Huh?<br />Q:<br />A<br />97<br />
  110. 110. A light switch<br />98<br />
  111. 111. Shopping cart<br />99<br />
  112. 112. 100<br />
  113. 113. We can annotate expectations in the web world<br />We can annotate expectations<br />in the web world<br />101<br />
  114. 114. We can annotate expectations in the web world<br />REALLY!Look inside the book<br />Free two-day shipping<br />Look inside the book<br />Get it new OR used!<br />Sell mine<br />Add to cart<br />Shipping!<br />Collectible!<br />Maybe a kindle!<br />102<br />
  115. 115. Options have to be apparent and intuitive in mobile for people to <br />103<br />
  116. 116. 104<br />Text entry will never be easy<br />Design for partial attention andinterruption<br />
  117. 117. How do you make interfaces that speak their power<br />How do I create mobile interfaces that “speak their power”?<br />Q:<br />A<br />105<br />
  118. 118. Web designers know how to work in a rapidly evolving field<br />Edit!!!<br />106<br />
  119. 119. Web designers know how to work in a rapidly evolving field<br />RuthlessEditing<br />107<br />
  120. 120. 108<br />Wireframe<br />A Brave NUI World<br />
  121. 121. Wireframe<br />109<br />
  122. 122. Seated in a relatively predictable environment<br />Large screen enables multi-tasking<br />Keyboard and a mouse for input<br />110<br />
  123. 123. 111<br />Wireframe<br />We’re reaching the edges <br />of what GUI can do<br />
  124. 124. Wireframe<br />Most mobile smartphones<br />have touchscreens with Natural User Interfaces<br />112<br />
  125. 125. 113<br />Wireframe<br />GUIs Become Brittle<br />on a Mobile Device<br />
  126. 126. Hypothesis vs. Agenda<br />
  127. 127. Hypothesis vs. Agenda<br />
  128. 128. 116<br />Wireframe<br />
  129. 129. Wireframe<br />GUI/NUI Chasm<br />117<br />
  130. 130. Key differences between NUI and GUI<br />Okay… let’s get started<br />118<br />
  131. 131. Defining Attributes of <br />GUIs…<br />119<br />
  132. 132. Paper Prototype example<br />GUI Mental Model = <br />Computer as tool<br />120<br />
  133. 133. Paper Prototype example<br />GUI = Recognition<br />“What you see is what you get”<br />121<br />
  134. 134. Wireframe<br />GUI = Metaphorics, containment and place<br />122<br />
  135. 135. GUIs = Heavy Chrome, Icons & Buttons<br />123<br />
  136. 136. Defining Attributes of <br />NUIs…<br />124<br />
  137. 137. Paper Prototype example<br />NUI Mental Model = <br />Computer as media<br />125<br />
  138. 138. Paper Prototype example<br />NUI = Intuition<br />“What you do is what you get”<br />126<br />
  139. 139. 127<br />Wireframe<br />NUI = Fluid, Unmediated, and Organic<br />
  140. 140. NUIs = Content is the Star<br />It’s like a game of cards<br />128<br />
  141. 141. Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited text input<br /> UI takes up the entire screen <br /> Difficult to multi-task and easy to get lost<br />129<br />
  142. 142. Paper Prototype example<br />GUI = Experiences are anchored<br />130<br />
  143. 143. Paper Prototype example<br />NUI = Experiences Unfold<br />131<br />
  144. 144. Paper Prototype example<br />NUIs Unfold Like a Game<br />132<br />
  145. 145. NUIs Can Feel Anchor-less<br />133<br />
  146. 146. Differences in the mobile environment<br />134<br />
  147. 147. The Nested Doll Pattern<br />1<br />Sympathy to context principles<br />steal this slide!<br />Mobile Experiences Unfold<br />Patterns for how mobile experiences unfold and progressively reveal their nature<br />The Hub and Spoke Pattern<br />2<br />The Bento Box Pattern<br />3<br />The Filtered View Pattern<br />4<br />135<br />
  148. 148. Paper Prototype example<br />Nested Doll Pattern<br />136<br />
  149. 149. Paper Prototype example<br />Hub and Spoke Pattern<br />137<br />
  150. 150. Paper Prototype example<br />Bento Box Pattern<br />138<br />
  151. 151. Paper Prototype example<br />Filtered View Pattern<br />139<br />
  152. 152. How do you make interfaces that speak their power<br />A<br />Trick to unfolding = <br />Information boulders to pebbles<br />140<br />
  153. 153. How do you make interfaces that speak their power<br />A<br />141<br />
  154. 154. A<br />142<br />
  155. 155. Pivoting people through information<br />Your Design Challenge!<br />From GUI to NUI<br />Activity<br />143<br />
  156. 156. Pivoting people through information<br />Your Design Challenge!<br />From GUI to NUI<br />Activity<br />Identify an interaction sequence you’d like to recreate using NUI principles.<br />Sketch out the interaction using the templates provided.<br />Identify how you’d like your mobile experience to unfold.<br />1<br />2<br />3<br />144<br />
  157. 157. Pivoting people through information<br />145<br />
  158. 158. Pivoting people through information<br />146<br />
  159. 159. REMEMBER!<br />It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…<br />Activity<br />Understanding the differences between graphical and natural user interfaces.<br />Experimenting with how your mobile experience can unfold and and progressively reveal its nature.<br />Play around with the unfolding patterns that have been presented… or invent some of your own. <br />147<br />
  160. 160. Differences in the mobile environment<br />148<br />
  161. 161. Paper In-Screen Prototypes<br />Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine<br />149<br />
  162. 162. Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />  <br />150<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  163. 163. Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />2. Scan or photograph <br /> the sketches. <br /> <br />  <br />151<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  164. 164. Paper Prototype example<br />1. Sketch screen layouts. <br /> <br />2. Scan or photograph <br /> the sketches. <br />3. Making sizing<br /> adjustments to the<br /> files.<br /> <br /> <br /> <br /> <br />152<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  165. 165. Paper Prototype example<br /> 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.<br /> <br /> <br /> <br />153<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  166. 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.<br />5. Import the files into the mobile device’s photo gallery. <br /> <br />  <br /> <br /> <br />154<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  167. 167. Paper Prototype example<br />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.<br />5. Import the files into the mobile device’s photo gallery. <br />6. Click and swipe away. <br /> <br /> <br /> <br /> <br /> <br />155<br />Photo courtesy of Diego Pulido and UX Magazine<br />
  168. 168. Your Design Challenge!<br />Create an in-screen prototype.<br />Activity<br />Hang your screen designs on the wall.<br />Photograph each design.<br />Transfer photos from the camera to computer and make any sizing adjustments.<br />Sync images to your mobile device and swipe away…. <br />156<br />
  169. 169. What we learned from the web<br />steal this slide!<br />Tactical Prototypes<br />Sketching<br />In-Screen Mobile Prototypes<br />Mobile Browser Prototypes<br />Keynote/Powerpoint Prototypes<br />Flash Prototype<br />Platform Specific Prototype<br />157<br />
  170. 170. Paper Prototype example<br />Paper Prototyping<br />158<br />
  171. 171. 159<br />
  172. 172. Paper Prototype example<br />Mobile Browser Prototypes<br />160<br />
  173. 173. Paper Prototype example<br />Keynote/Powerpoint Prototypes<br />161<br />
  174. 174. Paper Prototype example<br />162<br />
  175. 175. Paper Prototype example<br />LOGO<br />Tagline<br />Edit<br />163<br />
  176. 176. Paper Prototype example<br />LOGO<br />Tagline<br />Sydney Opera House<br />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.<br />Edit<br />164<br />
  177. 177. Paper Prototype example<br />LOGO<br />Tagline<br />Sydney Opera House<br />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.<br />Edit<br />165<br />
  178. 178. Paper Prototype example<br />LOGO<br />Tagline<br />Sydney Opera House<br />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.<br />Edit<br />166<br />
  179. 179. Paper Prototype example<br />LOGO<br />Tagline<br />LOGO<br />Tagline<br />Sydney Opera House<br />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.<br />Edit<br />Edit<br />167<br />167<br />Paper Prototype example<br />
  180. 180. Paper Prototype example<br />LOGO<br />Tagline<br />Edit<br />168<br />
  181. 181. What we learned from the web<br />Reasons for Prototyping in Keynote/Powerpoint<br />steal this slide!<br />It’s super efficient and fast!<br />Level of fidelity is high – gives you an end result that looks and feels like a real app.<br />Supports *some* gestures and transitions.<br />It’s as close as you can get to the real thing without digging into code. <br />169<br />
  182. 182. What we learned from the web<br />Reasons for Prototyping in Keynote/Powerpoint<br />steal this slide!<br />It’s super efficient and fast!<br />Level of fidelity is high – gives you an end result that looks and feels like a real app.<br />Supports *some* gestures and transitions.<br />It’s as close as you can get to the real thing without digging into code. <br />170<br />
  183. 183. Paper Prototype example<br />Motion:<br />New Design Material<br />171<br />
  184. 184. What we learned from the web<br />Animation & TransitionsA new design elements that can:<br />steal this slide!<br />Reinforce cognition.<br />Help users form a mental model of how information will “unfold”.<br />Provide cues for interaction.<br />Help make your experience feel more intuitive for users. <br />172<br />
  185. 185. Paper Prototype example<br />Twelve Basic Principles <br />of Animation<br />173<br />
  186. 186. Paper Prototype example<br />Principle One<br />Squash and Stretch<br />174<br />
  187. 187. Paper Prototype example<br />Principle One<br />Squash and Stretch<br />175<br />
  188. 188. Paper Prototype example<br />Principle Two<br />Anticipation<br />176<br />
  189. 189. Paper Prototype example<br />Principle Two<br />Anticipation<br />177<br />
  190. 190. Paper Prototype example<br />Principle Three<br />Staging<br />178<br />
  191. 191. Paper Prototype example<br />Principle Three<br />Staging<br />179<br />
  192. 192. Paper Prototype example<br />Principle Four<br />Straight Ahead <br />and Pose to Pose<br />180<br />
  193. 193. Paper Prototype example<br />Principle Four<br />Straight Ahead <br />and Pose to Pose<br />181<br />
  194. 194. Paper Prototype example<br />Principle Five<br />Follow Through<br />and Overlapping Action<br />182<br />
  195. 195. Paper Prototype example<br />Principle Five<br />Follow Through<br />and Overlapping Action<br />183<br />
  196. 196. Paper Prototype example<br />Principle Six<br />Slow in and Out<br />184<br />
  197. 197. Paper Prototype example<br />Principle Six<br />Slow in and Out<br />185<br />
  198. 198. Paper Prototype example<br />Principle Seven<br />Arcs<br />186<br />
  199. 199. Paper Prototype example<br />Principle Seven<br />Arcs<br />187<br />
  200. 200. Paper Prototype example<br />Principle Eight<br />Secondary Action<br />188<br />
  201. 201. Paper Prototype example<br />Principle Eight<br />Secondary Action<br />189<br />
  202. 202. Paper Prototype example<br />Principle Nine<br />Timing<br />190<br />
  203. 203. Paper Prototype example<br />Principle Nine<br />Timing<br />191<br />
  204. 204. Paper Prototype example<br />Principle Ten<br />Exaggeration<br />192<br />
  205. 205. Paper Prototype example<br />Principle Ten<br />Exaggeration<br />193<br />
  206. 206. Paper Prototype example<br />Principle Eleven and Twelve<br />Solid Drawing and Appeal<br />194<br />
  207. 207. Paper Prototype example<br />Specifying Transitions<br />Sketches Courtesy of Greg NudelmenStoryboarding iPad Transitions<br />195<br />
  208. 208. What we learned from the web<br />Transitions and AnimationMethods for specifying motion:<br />Hand drawn sketches.<br />Include specifications on wireframes.<br />Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool. <br />196<br />
  209. 209. Paper Prototype example<br />Motion is an Art.<br />There are no formulas.<br />197<br />
  210. 210. Fidelity<br />198<br />
  211. 211. Paper Prototype example<br />Failure<br />199<br />
  212. 212. Paper Prototype example<br />Prototyping is not a Panacea<br />200<br />
  213. 213. PC Prototypingis considered a <br />A<br />Um… duh!<br />Luxury<br />
  214. 214. Mobile Prototyping is<br />A<br />Um… duh!<br />Essential<br />
  215. 215. Thanks, and next up…<br />Thank you!<br />Email:<br />rachel.hinman@nokia.com<br />Templates and Online Resources:<br />www.rachelhinman.com/mobile_prototyping_essentials<br />
  216. 216. Oh! By the way, I’m writing a book..<br />The Mobile Frontier<br />A Guide for Designing Mobile Experiences<br />Expected Publication: late 2011<br />Follow along…<br />
  217. 217. Q?<br />Q&A: final break<br />
  218. 218. Different platforms express characteristics differently<br />206<br />Wireframe<br />
  1. A particular slide catching your eye?

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

×