On-phone Prototype                                             Examples                                                   ...
Resources For On-phone Prototype Deliverable         Mobile Design Patterns:         http://mobile-patterns.com/         h...
Upcoming SlideShare
Loading in …5

dmedia DP2 Interaction Design - Deliverable 2


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

dmedia DP2 Interaction Design - Deliverable 2

  1. 1. 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 flows 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 first launch of your app. If a different user flow provides a more effective means of communicating your POV, design and present that flow instead. Before Thursday (2/16) at 8:00 AM, email your 4-6 images to dmedia2012@gmail.com. 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 first few minutes after launch. If their first user experience is confusing, boring or ineffective, 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 first 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?
  2. 2. 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!