Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android UI Design Tips

18,816 views

Published on

Published in: Technology
  • Be the first to comment

Android UI Design Tips

  1. 1. Android UI Design Tips by Luis Abreu
  2. 2. IntroductionLuís Abreu is aDeveloper with anInterest in User Interface and User ExperienceAndroid early adopter
  3. 3. Why Do I Care?• End-User • Aesthetics • Quality • More likely to install/purchase
  4. 4. Agenda• Why Should You Care• Principles of Interface Design• Do’s and Don’ts• Android UI Design Patterns• The State of Things
  5. 5. Why Should You Care
  6. 6. Why Should You Care• Better UI • Perceived Quality • Better Ratings • Better App Ranking • More Installs/Purchases
  7. 7. ExampleCycle Hire
  8. 8. Cycle Hire WidgetOriginal Redesign
  9. 9. Cycle Hire ListOriginal Redesign
  10. 10. Cycle Hire MapOriginal Redesign
  11. 11. Principles of Interface Design
  12. 12. Principles of Interface Design1. Focus on the user2. Make the right things visible3. Show proper feedback4. Be predictable5. Be fault-tolerant
  13. 13. 1. Focus on the user• Know your users • Age, skill level, culture, disabilities, etc. • What task are they trying to achieve • What kinds of devices they’ll be using • Where/when/how they’ll be using their devices• Test on real users, early and often
  14. 14. 2. Make the right things visible• The most common operations should be immediately visible and available• Secondary functionality can be reserved for the MENU button
  15. 15. 3. Show proper feedback• Make sure the effects of an action are clear and visible• Show adequate yet unobtrusive status indicators
  16. 16. 4. Be predictable• Do what the user expects • Properly manage the activity stack • Show information and actions users expect to see• Use proper affordances • If it acts like a button, make sure it looks like a button
  17. 17. 5. Be fault-tolerant• Constrain possible operations to only those that make sense • Disable UI elements when appropriate• Limit the number of irreversible actions• Prefer ‘undo’ to confirmation dialogs • Use as few modal dialogs as possible.
  18. 18. Do’s and Don’ts
  19. 19. • DON’T reinvent the • DON’T hijack the back wheel or menu buttons• DON’T port the UI from other platforms• DON’T use small font sizes• DON’T overuse modal progress and confirmation dialogs
  20. 20. • DO create resources • DO properly manage for all different screen the activity stack densities • DO think about the• DO make large, obvious device and context your tap targets (buttons, list app will be used items) • DO use native icons• DO follow existing UI Guidelines (Icon, Activity, Menu, Widget)
  21. 21. DO try to work with a UI Designer,Illustrator/Animator as soon as possible
  22. 22. Android UI Design Patterns
  23. 23. “A design pattern is a generalreusable solution to acommonly occurring problem.” — Good Old Wikipedia
  24. 24. Android UI Design Patterns• Dashboard• Action Bar• Quick Actions• Search Bar• Tabs• Lists• ...
  25. 25. Dashboard
  26. 26. Dashboard
  27. 27. Dashboard “What can I do with this app? What’s new?”• A quick intro to an app, revealing capabilities and proactively highlighting new content• Can be organized by: • Features • Categories • Accounts
  28. 28. Dashboard Recommendations• Highlight what’s new• Focus on the 3-8 most important features
  29. 29. Action Bar
  30. 30. Action Bar
  31. 31. Action Bar “How can I do <common action> quickly?”• Dedicated real estate at top of the screen to support navigation and frequently used operations• Replaces title bar• Best for actions common across your app • Search • Refresh • Compose• Can provide a quick link back to dashboard (or other app home)
  32. 32. Action Bar Recommendations• Used to bring key actions onscreen• Use consistently across your app• Not for contextual actions • Delete • Edit • Call
  33. 33. Quick Actions
  34. 34. Quick Actions
  35. 35. Quick Actions “What can I do with this thing?”• Action popup triggered from distinct visual target• Minimally disruptive to screen context• Actions are straightforward• Fast & fun
  36. 36. Quick Actions Recommendations• Use when items have competing internal targets• Most important and obvious actions• Use when the item doesn’t have a meaningful detail view• Don’t use in contexts which support multiple selection
  37. 37. Search Bar
  38. 38. Search Bar
  39. 39. Search Bar “How can I find something?”• Consistent pop-in search form anchored to top of screen• Replaces action bar (if present)• Support suggestions• Can use a Quick Action selector to alter search mode • Alternately, can offer suggestions for primary search mode, and additional items for triggering other modes
  40. 40. Search Bar Recommendations• Use for simple searches• Present rich suggestions• Use the same behavior
  41. 41. The State of Things
  42. 42. Android Market• Many Low Quality Apps • Room for improvement• Low perception of value makes users less willing to pay, developer houses• You can bring value to the platform• 300000 Android users activated daily
  43. 43. Official Documentation• http://goo.gl/Uhh1 • Icon Design Guidelines and Templates • Widget Design Guidelines • Activity and Task Design Guidelines • Menu Design Guidelines
  44. 44. Google I/O 2010 Videos• http://goo.gl/IJzVq • Android UI Design Patterns • The world of ListView • Writing zippy Android Applications • ...
  45. 45. Books/Presentations• Professional Android 2 Application Development• Android UI Design Patterns & Best Practices• Radioactive Yak App Surgery• Tapworthy Screencast• Android UI Design Tips
  46. 46. Other• Android UI Patterns Flickr Collection• Android Applications Flickr Collection• Android Drawables Explorer
  47. 47. Wrap Up• Use the Patterns, Luke• There’s plenty of room for improvement• UI Design: it pays back
  48. 48. Thank You• Twitter - @lmjabreu• Email - lmjabreu@gmail.com

×