On-phone Prototype Examples Image Credit: Anthony Armonenderiz http://anthonyarmendariz.carbonmade.com/ Deliverable Details While your Interaction Map took a broad, low resolution look at all of the potential user ﬂows of your app, the On-phone Prototype requires a narrow focus and higher resolution. Do not build a functional app. Instead, prepare 4-6 high-resolution views (screenshots like the example shown above) that can be viewed in a sequence. These screens should be viewable in proper order within an iPhone or iPod touch photo album. A user should be able to swipe from one image to the next and get a good understanding of your application’s point of view and goals. Your 4-6 views do not need to be the ﬁrst launch of your app. If a diﬀerent user ﬂow provides a more eﬀective means of communicating your POV, design and present that ﬂow instead. Before Thursday (2/16) at 8:00 AM, email your 4-6 images to firstname.lastname@example.org. Each image should be: • Sized 640px wide x 960px tall (iPhone retina display dimensions) • In .png format • Named in their proper sequence: (e.g. MyAppNameP1.png, MyAppNameP2.png, etc.) Evaluation Design for mobile phones must be clear and concise. Users evaluate new apps within the ﬁrst few minutes after launch. If their ﬁrst user experience is confusing, boring or ineﬀective, most users won’t come back. Your classmates and the teaching team will evaluate your images on an iPhone as if it was their own. Your prototype will be evaluated with the following questions: • Does it communicate your POV in the ﬁrst 60 seconds? • Can the user understand how to achieve their primary task with your 4-6 views? • Does it match user expectations with conventions? • Do individual screens have a clear hierarchy that elevates the most important visual elements and interactions? • Does the overall experience maintain consistent use of elements and interactions? • Does it carefully consider copy and text communication?
Resources For On-phone Prototype Deliverable Mobile Design Patterns: http://mobile-patterns.com/ http://www.mobilepatterns.com/ http://pttrns.com/ http://www.lovelyui.com/ Design Elements: (templates, buttons, icons, etc) For Keynote: http://keynotopia.com/iphone-prototyping/ (scroll to bottom for low-res templates) http://keynotekungfu.com/ http://www.raizlabs.com/2011/06/wireframe-toolkit-for-keynote-and-powerpoint/ For Illustrator and Photoshop: http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements http://www.teehanlax.com/downloads/9 Basic Interaction Design Principles 1. Clearly communicate your point of view 2. Be consistent throughout the entire user experience 3. Match user expectations with past experience 4. Focus on the primary task and provide an obvious, logical path to accomplish It 5. Elevate the most important elements (use hierarchy, contrast, color, depth) 6. Give clear and consistent feedback to user interactions 7. Carefully consider your copy (written word) 8. Consider the context (where and when) of use 9. Consider the entire experience above the individual interactions Advice For Success • Don’t forget your visual design principles from DP1 • Find a successful mobile app and deconstruct it for inspiration and learning • Beg, borrow and steal free resources, images, tools, icons, buttons, graphics etc, • As always...most iterations wins! • Scope your app for the learning goals of the assignment... aka: KEEP IT SIMPLE!