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