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