Android UI Design Tips
Upcoming SlideShare
Loading in...5
×
 

Android UI Design Tips

on

  • 16,159 views

 

Statistics

Views

Total Views
16,159
Views on SlideShare
15,436
Embed Views
723

Actions

Likes
23
Downloads
582
Comments
0

8 Embeds 723

http://abertoatedemadrugada.com 713
http://www.onlydoo.com 2
http://static.slidesharecdn.com 2
http://paper.li 2
https://www.pessoaseprocessos.com 1
http://twitter.com 1
http://www.techgig.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • contribute to the platform, more high quality apps = more users & 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 > the task he wants to accomplish, his context\n\nMake the right things visible > so that the user doesn’t have to dig into your app\n\nShow proper feedback > don’t make the user guess what’s going on\n\nBe predictable > don’t make the user think\n\nBe fault-tolerant > 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

Android UI Design Tips Android UI Design Tips Presentation Transcript

  • 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 Things
  • Why Should You Care
  • Why Should You Care• Better UI • Perceived Quality • Better Ratings • Better App Ranking • More Installs/Purchases
  • 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 predictable5. Be fault-tolerant
  • 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
  • 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
  • 3. Show proper feedback• Make sure the effects of an action are clear and visible• Show adequate yet unobtrusive status indicators
  • 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
  • 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.
  • Do’s and Don’ts
  • • 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
  • • 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)
  • 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 highlighting new content• Can be organized by: • Features • Categories • Accounts
  • 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 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)
  • Action Bar Recommendations• Used to bring key actions onscreen• Use consistently across your app• Not for contextual actions • Delete • Edit • Call
  • Quick Actions
  • Quick Actions
  • 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
  • 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
  • Search Bar
  • Search Bar
  • 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
  • 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, developer houses• You can bring value to the platform• 300000 Android users activated daily
  • Official Documentation• http://goo.gl/Uhh1 • Icon Design Guidelines and Templates • Widget Design Guidelines • Activity and Task Design Guidelines • Menu Design Guidelines
  • Google I/O 2010 Videos• http://goo.gl/IJzVq • Android UI Design Patterns • The world of ListView • Writing zippy Android Applications • ...
  • Books/Presentations• Professional Android 2 Application Development• Android UI Design Patterns & Best Practices• Radioactive Yak App Surgery• Tapworthy Screencast• Android UI Design Tips
  • 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