Quick Guide for Designing Usable Mobile UI
7 likes738 views
This document provides a quick guide to designing usable mobile user interfaces. It outlines four main areas to focus on: get your basics right by staying inspired by real world examples and observing people and contexts; stick to a process like scoping your application, storyboarding, and user testing; follow design principles like keeping it clean and accentuating important information; and learn continuously about platforms, standards, and interactions. The guide gives examples for each area and emphasizes the importance of iteration and usability testing.
Quick Guide for Designing Usable Mobile UI
- 1. Quick Guide to Designing Usable Mobile UI A 80 minute workshop at Mobile World India 2013 delivered by Aurobinda Pradhan & V Durga Prasad of PeepalDesign
- 2. Design is to invent with intent.
- 3. If you take away the ‘invent’ bit, you have an engineer.
- 4. If you take away the ‘intent’ bit, you have an artist.
- 5. So what is this quick guide all about? GET YOUR BASICS RIGHT STICK TO A PROCESS FOLLOW DESIGN PRINCIPLES LEARN CONTINUOUSLY
- 6. Get Your Basics Right 1. Stay inspired by real world 2. Observe people & context 3. Appreciate constraints but don’t let them dictate your vision
- 7. Stay inspired by real world
- 8. Observe people & context
- 9. Appreciate constraints but don’t let them dictate your vision
- 10. Get Your Basics Right Stay inspired by real world Let’s think of a mobile app to order a Pizza Observe people & context Appreciate constraints but don’t let them dictate your vision
- 11. Stay inspired by real world
- 12. Observe people & context
- 13. Key Takeaways - People always look for a good deal - Based on the context they look for a meal or a snack - Decision is usually based on where the pizza is being consumed - Health conscious people tend to worry about calories/fat content, but hardly ever ask these questions while placing an order - Environmental friendly people look forward to reuse/ recycle aspects of the delivery
- 14. Stick to a Process 1. Scope your application 2. Tell a story through storyboard 3. Conceptualize and define a vision 4. Architect the information 5. Map the info arch to wireframes 6. Build the right interaction flow 7. Test it with real users 8. Give it a great visual polish
- 16. Use Case-1 - Select a pizza Use Case-2 - Look for Offers Use Case-3 - Order Quickly Use Case-4 - Check Order Status Use Case-5 - View Calories
- 17. Tell a story through storyboard http://theflippydochronicles.blogspot.in/2012/04/my-dinosaur-husband.html
- 18. Conceptualize and define a vision
- 20. Map the info arch to wireframes
- 21. Build the right interaction flow
- 22. Test it with real users
- 23. Give it a cool visual polish
- 24. Stick to a Process 1. Scope your application 2. Tell a story through storyboard 3. Conceptualize and define a vision 4. Architect the information 5. Map the info arch to wireframes 6. Build the right interaction flow 7. Test it with real users 8. Give it a great visual polish
- 25. Follow Design Principles 1. Be Methodical (its no abstract painting) 2. Follow a visual language 3. Keep design clean 4. Accentuate what is important 5. Make it life like 6. Make it lively 7. Let information stand out 8. Make it fit into different user and usage context
- 26. Be Methodical (it’s no abstract painting)
- 33. Define & follow a visual language
- 36. Accentuate what is important
- 37. Make it life like
- 38. Make it lively
- 40. Make it fit into different user and usage context
- 41. Follow Design Principles 1. Be Methodical (its no abstract painting) 2. Follow a visual language 3. Keep design clean 4. Accentuate what is important 5. Make it life like 6. Make it lively 7. Let information stand out 8. Make it fit into different user and usage context
- 42. Build
- 43. Learn Continuously 1. Get a fair understanding of target platforms and design constraints 2. Get a good hang of pre defined standards & guidelines 3. Learn about gestures, transitions, motions & interactions 4. Keep learning
- 44. Get a fair understanding of target platforms and design constraints
- 45. Get a good hang of pre defined standards & guidelines
- 46. Learn about gestures, transitions & motions & interactions
- 47. ... keep learning & keep innovating GET YOUR BASICS RIGHT STICK TO A PROCESS FOLLOW DESIGN PRINCIPLES LEARN CONTINUOUSLY
- 48. Coming Soon UX Workshops by PeepalDesign Follow us to stay tuned Facebook: /PeepalDesign Twitter: @peepaldesign Linkedin: company/peepaldesign
- 49. Some of the Image Credits http://www.visualquest.in/2011/04/gestalt-principles-doughnut-chartspies.html http://psychology.about.com/od/sensationandperception/ss/gestaltlaws.htm http://asinthecity.com/2011/05/13/explaining-personas-used-in-ux-design- %E2%80%93-part-2/ http://www.docstoc.com/docs/23416566/Writing-Effective-Use-Cases http://developer.ean.com/docs/best_practices/mobile/ http://www.smashingmagazine.com/smashing-newsletter-issue-47/