Your SlideShare is downloading. ×
0
Android UI Design Tips        by Luis Abreu
IntroductionLuís Abreu is aDeveloper with anInterest in User Interface and User ExperienceAndroid early adopter
Why Do I Care?• End-User • Aesthetics   • Quality     • More likely to install/purchase
Agenda• Why Should You Care• Principles of Interface Design• Do’s and Don’ts• Android UI Design Patterns• The State of Thi...
Why Should You Care
Why Should You Care• Better UI • Perceived Quality   • Better Ratings     • Better App Ranking       • More Installs/Purch...
ExampleCycle Hire
Cycle Hire              WidgetOriginal                Redesign
Cycle Hire               ListOriginal                Redesign
Cycle Hire               MapOriginal                Redesign
Principles of Interface Design
Principles of Interface Design1. Focus on the user2. Make the right things visible3. Show proper feedback4. Be predictable...
1. Focus on the user• Know your users  • Age, skill level, culture, disabilities, etc.  • What task are they trying to ach...
2. Make the right things visible• The most common operations should be  immediately visible and available• Secondary funct...
3. Show proper feedback• Make sure the effects of an action are clear  and visible• Show adequate yet unobtrusive status  ...
4. Be predictable• Do what the user expects • Properly manage the activity stack • Show information and actions users    e...
5. Be fault-tolerant• Constrain possible operations to only  those that make sense  • Disable UI elements when appropriate...
Do’s and Don’ts
•   DON’T reinvent the     •   DON’T hijack the back    wheel                      or menu buttons•   DON’T port the UI   ...
•   DO create resources          •   DO properly manage    for all different screen         the activity stack    densitie...
DO try to work with a UI Designer,Illustrator/Animator as soon as possible
Android UI Design Patterns
“A design pattern is a generalreusable solution to acommonly occurring problem.”                 — Good Old Wikipedia
Android UI Design Patterns•   Dashboard•   Action Bar•   Quick Actions•   Search Bar•   Tabs•   Lists•   ...
Dashboard
Dashboard
Dashboard   “What can I do with this app? What’s new?”• A quick intro to an app, revealing  capabilities and proactively h...
Dashboard             Recommendations• Highlight what’s new• Focus on the 3-8 most important features
Action Bar
Action Bar
Action Bar        “How can I do <common action> quickly?”•   Dedicated real estate at top of the screen to support    navi...
Action Bar             Recommendations• Used to bring key actions onscreen• Use consistently across your app• Not for cont...
Quick Actions
Quick Actions
Quick Actions           “What can I do with this thing?”• Action popup triggered from distinct visual  target• Minimally d...
Quick Actions              Recommendations• Use when items have competing internal  targets• Most important and obvious ac...
Search Bar
Search Bar
Search Bar              “How can I find something?”•   Consistent pop-in search form anchored to top of    screen•   Replac...
Search Bar              Recommendations• Use for simple searches• Present rich suggestions• Use the same behavior
The State of Things
Android Market• Many Low Quality Apps • Room for improvement• Low perception of value makes users less  willing to pay, de...
Official Documentation•   http://goo.gl/Uhh1    •   Icon Design Guidelines and Templates    •   Widget Design Guidelines   ...
Google I/O 2010 Videos•   http://goo.gl/IJzVq    •   Android UI Design Patterns    •   The world of ListView    •   Writin...
Books/Presentations•   Professional Android 2 Application    Development•   Android UI Design Patterns & Best Practices•  ...
Other•   Android UI Patterns Flickr Collection•   Android Applications Flickr Collection•   Android Drawables Explorer
Wrap Up• Use the Patterns, Luke• There’s plenty of room for improvement• UI Design: it pays back
Thank You• Twitter - @lmjabreu• Email - lmjabreu@gmail.com
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Android UI Design Tips
Upcoming SlideShare
Loading in...5
×

Android UI Design Tips

17,083

Published on

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
17,083
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
622
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • contribute to the platform, more high quality apps = more users &amp; installs/purchases, leading to more high profile developers\n
  • Cycle Hire App Surgery - http://goo.gl/8wZN\n
  • \n
  • \n
  • \n
  • \n
  • Focus on the user &gt; the task he wants to accomplish, his context\n\nMake the right things visible &gt; so that the user doesn&amp;#x2019;t have to dig into your app\n\nShow proper feedback &gt; don&amp;#x2019;t make the user guess what&amp;#x2019;s going on\n\nBe predictable &gt; don&amp;#x2019;t make the user think\n\nBe fault-tolerant &gt; users make mistakes, help them avoid them\n
  • know thy users for they are not you - http://goo.gl/PrWVg\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×