quick guide for designing usable mobile ui
DESCRIPTION
TRANSCRIPT
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
Design is to invent with intent.
If you take away the ‘invent’ bit, you have an engineer.
If you take away the ‘intent’ bit, you have an artist.
So what is this quick guide all about?
GET YOUR BASICS RIGHT
STICK TO A PROCESS
FOLLOW DESIGN PRINCIPLES
LEARN CONTINUOUSLY
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
Stay inspired by real world
Observe people & context
Appreciate constraints but don’t let them dictate your vision
Get Your Basics Right
Stay inspired by real world
Observe people & context
Appreciate constraints but don’t let them dictate your vision
Let’s think of a mobile app to order a Pizza
Stay inspired by real world
Observe people & context
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
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
Scope your application
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
Tell a story through storyboard
http://theflippydochronicles.blogspot.in/2012/04/my-dinosaur-husband.html
Conceptualize and define a vision
Architect the information
Map the info arch to wireframes
Build the right interaction flow
Test it with real users
Give it a cool visual polish
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
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
Be Methodical (it’s no abstract painting)
Define & follow a visual language
Keep design clean
Accentuate what is important
Make it life like
Make it lively
Let information speak
Make it fit into different user and usage context
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
Build
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
Get a fair understanding of target platforms and design constraints
Get a good hang of pre defined standards & guidelines
Learn about gestures, transitions & motions & interactions
... keep learning & keep innovating
GET YOUR BASICS RIGHT
STICK TO A PROCESS
FOLLOW DESIGN PRINCIPLES
LEARN CONTINUOUSLY
Coming Soon UX Workshops by PeepalDesign Follow us to stay tuned Facebook: /PeepalDesign Twitter: @peepaldesign Linkedin: company/peepaldesign
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/
Some of the Image Credits