Quick Guide for Designing Usable Mobile UI

620 views

Published on

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
620
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
13
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Quick Guide for Designing Usable Mobile UI

  1. 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. 2. Design is to invent with intent.
  3. 3. If you take away the ‘invent’ bit, you have an engineer.
  4. 4. If you take away the ‘intent’ bit, you have an artist.
  5. 5. So what is this quick guide all about? GET YOUR BASICS RIGHT STICK TO A PROCESS FOLLOW DESIGN PRINCIPLES LEARN CONTINUOUSLY
  6. 6. Get Your Basics Right1.  Stay inspired by real world2.  Observe people & context3.  Appreciate constraints but don’t let them dictate your vision
  7. 7. Stay inspired by real world
  8. 8. Observe people & context
  9. 9. Appreciate constraints but don’t letthem dictate your vision
  10. 10. Get Your Basics RightStay inspired by real world Let’s think of a mobile app to order a PizzaObserve people & contextAppreciate constraints but don’t let them dictate your vision
  11. 11. Stay inspired by real world
  12. 12. Observe people & context
  13. 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. 14. Stick to a Process1.  Scope your application2.  Tell a story through storyboard3.  Conceptualize and define a vision4.  Architect the information5.  Map the info arch to wireframes6.  Build the right interaction flow7.  Test it with real users8.  Give it a great visual polish
  15. 15. Scope your application
  16. 16. Use Case-1-  Select a pizzaUse Case-2-  Look for OffersUse Case-3-  Order QuicklyUse Case-4-  Check Order StatusUse Case-5- View Calories
  17. 17. Tell a story through storyboard http://theflippydochronicles.blogspot.in/2012/04/my-dinosaur-husband.html
  18. 18. Conceptualize and define a vision
  19. 19. Architect the information
  20. 20. Map the info arch to wireframes
  21. 21. Build the right interaction flow
  22. 22. Test it with real users
  23. 23. Give it a cool visual polish
  24. 24. Stick to a Process1.  Scope your application2.  Tell a story through storyboard3.  Conceptualize and define a vision4.  Architect the information5.  Map the info arch to wireframes6.  Build the right interaction flow7.  Test it with real users8.  Give it a great visual polish
  25. 25. Follow Design Principles1.  Be Methodical (its no abstract painting)2.  Follow a visual language3.  Keep design clean4.  Accentuate what is important5.  Make it life like6.  Make it lively7.  Let information stand out8.  Make it fit into different user and usage context
  26. 26. Be Methodical(it’s no abstract painting)
  27. 27. Define & follow a visual language
  28. 28. Keep design clean
  29. 29. Accentuate what is important
  30. 30. Make it life like
  31. 31. Make it lively
  32. 32. Let information speak
  33. 33. Make it fit into different user andusage context
  34. 34. Follow Design Principles1.  Be Methodical (its no abstract painting)2.  Follow a visual language3.  Keep design clean4.  Accentuate what is important5.  Make it life like6.  Make it lively7.  Let information stand out8.  Make it fit into different user and usage context
  35. 35. Build
  36. 36. Learn Continuously1.  Get a fair understanding of target platforms and design constraints2.  Get a good hang of pre defined standards & guidelines3.  Learn about gestures, transitions, motions & interactions4.  Keep learning
  37. 37. Get a fair understanding of targetplatforms and design constraints
  38. 38. Get a good hang of pre definedstandards & guidelines
  39. 39. Learn about gestures, transitions &motions & interactions
  40. 40. ... keep learning & keep innovating GET YOUR BASICS RIGHT STICK TO A PROCESS FOLLOW DESIGN PRINCIPLES LEARN CONTINUOUSLY
  41. 41. Coming SoonUX Workshops by PeepalDesignFollow us to stay tunedFacebook: /PeepalDesignTwitter: @peepaldesignLinkedin: company/peepaldesign
  42. 42. Some of the Image Creditshttp://www.visualquest.in/2011/04/gestalt-principles-doughnut-chartspies.htmlhttp://psychology.about.com/od/sensationandperception/ss/gestaltlaws.htmhttp://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-Caseshttp://developer.ean.com/docs/best_practices/mobile/http://www.smashingmagazine.com/smashing-newsletter-issue-47/

×