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

Like this? Share it with your network

Share

Android UI Design Tips

  • 290,999 views
Uploaded on

Original at:...

Original at:
http://docs.google.com/fileview?id=0BxEWAcbuDzg1NGNiZmVhNDgtMWIyNi00MTU4LTkwYjEtNGQxODkzOTMzNjM0&hl=en

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @bocha58 thank you
    Are you sure you want to
    Your message goes here
  • Proo download http://www.mediafire.com/?t39rxi3m3u9g12b
    Are you sure you want to
    Your message goes here
  • Try this Link Which Will Work for Css and android

    http://tiru-experience.blogspot.in/2013/09/border-designs-for-css-and-android.html
    Are you sure you want to
    Your message goes here
  • We just released PortKit: UX Metaphor Equivalents for iOS & Android

    http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

    It has side by side comparisons of the native ui widgets and links to downloadable PSDs for designing.
    Are you sure you want to
    Your message goes here
  • download link: https://docs.google.com/file/d/0BxEWAcbuDzg1NGNiZmVhNDgtMWIyNi00MTU4LTkwYjEtNGQxODkzOTMzNjM0/edit?pli=1&hl=en#
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
290,999
On Slideshare
239,484
From Embeds
51,515
Number of Embeds
349

Actions

Shares
Downloads
0
Comments
52
Likes
829

Embeds 51,515

http://y-anz-m.blogspot.com 14,203
http://y-anz-m.blogspot.jp 12,806
http://www.andreabaccega.com 1,975
http://www.android.es 1,555
http://techmaster.vn 993
http://grigio.org 982
http://www.droidweb.com 784
http://www.mccalv.com 764
http://zzomen.tistory.com 700
http://droidweb.com 664
http://blog.gbinghan.com 635
http://localhost 606
http://blog.dreamcss.com 572
http://and.roid.es 552
http://howto-android-google.blogspot.in 533
http://maciku.blogspot.com 515
http://www.soan.jp 514
http://maciku.blogspot.tw 478
http://howto-android-google.blogspot.com 443
http://econsultancy.com 425
http://slashwong.blog.com 392
http://camob.tistory.com 390
http://www.usercentered.de 370
http://www.cnscorpio.cn 345
http://www.danschultze.com 335
https://www.axurer.com 329
http://www.smartlab.at 294
http://www.melissawilfley.com 293
http://d.hatena.ne.jp 277
http://www.scoop.it 270
http://www.androidnoodles.com 264
http://mistake-theory.blogspot.com 255
http://gengrenjie.com 244
http://paper.li 242
http://webcache.googleusercontent.com 239
http://www.charlesen.fr 218
http://skillschool.co.in 215
http://mobilemojitos.com 207
http://mistake-theory.blogspot.in 197
http://cmdafstuderen2012.wordpress.com 172
http://www.skillschool.co.in 165
http://www.axurer.com 162
http://blog.cohen-rose.org 154
http://www.hksilicon.com 152
http://blog.arubaitoshain.info 144
https://brunel.blackboard.com 141
http://alexiscasa.tistory.com 124
http://findingrogan.blogspot.com 123
https://blackboard.brunel.ac.uk 114
http://krugerdavid.com 110

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. User Interface Design Tips July 2010
  • 2. Why should I care about UI? Better UI Perceived quality + polish Better ratings Better app ranking More installs/purchases 2
  • 3. Agenda – Android UI design tips 1.  Do’s and don’ts 2.  Design philosophy and considerations 3.  UI framework features you should definitely be using 4.  New UI design patterns 5.  Icons and guidelines 3
  • 4. Do’s and don’ts
  • 5.   DON’T simply port   DON’T create rigid, your UI from other absolute-positioned platforms layouts –  Users should feel right at home   DON’T use px units, with your app use dp (or sp for text) on their device –  Balance your brand   DON’T use small font and platform look sizes   DON’T overuse modal progress & confirmation dialogs 5
  • 6.   DO create versions of   DO support D-pad & all resources for high trackball navigation density screens   DO properly manage   DO make large, the activity stack obvious tap targets (buttons, list items)   DO properly handle orientation changes   DO follow Android icon guidelines   DO use theme/style, dimension, color   DO use proper resources to reduce margins and padding redundancy 6
  • 7. DO work with visual and interaction designer(s) 7
  • 8. Design philosophy and considerations
  • 9. Android design philosophy   Clear vs. “simple”   Content vs. chrome   Consistent yet engaging –  Elegant variation   Enhanced by the cloud –  Maintain user’s context across desktop and mobile 9
  • 10. Principles of good interface design* 1.  Focus on the user 2.  Make the right things visible 3.  Show proper feedback 4.  Be predictable 5.  Be fault-tolerant * Some material borrowed from Donald Norman’s The Design of Everyday Things 10
  • 11. 1. Focus on the user   Know your users –  Age, skill level, culture, disabilities, etc. –  What they want to do with your app –  What kinds of devices they’ll be using –  Where/when/how they’ll be using their devices   Design with a ‘user-first’ mentality –  Users are generally task-driven   Test on real users, early and often 11
  • 12. 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 12
  • 13. 3. Show proper feedback   Have at least 4 states (<selector>) for all interactive UI elements: default disabled focused pressed   Make sure the effects of an action are clear and visible   Show adequate yet unobtrusive progress indicators 13
  • 14. 4. Be predictable   Do what the user expects –  Properly interact with the activity stack –  Show information and actions users expects to see (requires testing or observation)   Use proper affordances –  If something is clickable, make sure it looks clickable! 14
  • 15. If complex instructions are required, rethink your design. 15
  • 16. 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 –  In fact, use as few modal dialogs as possible. They’re obtrusive. 16
  • 17. “If an error is possible, someone will make it.” – Donald Norman, author, The Design of Everyday Things 17
  • 18. Design considerations   Physical screen size   Screen density   Portrait & landscape orientations   Primary UI interaction method –  Touch-screen –  D-pad/trackball   Soft & physical keyboard 18
  • 19. Design considerations   Awareness about the ways in which devices can vary is very important   Read through the CDD to learn about possible device UI variations –  http://source.android.com/compatibility   Screen size & density breakdown –  http://developer.android.com/resources/ dashboard/screens.html 19
  • 20. UI framework features you should definitely be using
  • 21. <RelativeLayout> 21
  • 22. Resource qualifiers   One .apk contains all resources   System chooses at runtime which resources to use 22
  • 23. 9-patch drawables – foo.9.png   Similar to CSS3 border-image   Border pixels indicate stretchable regions   Make both -mdpi and -hdpi versions! 23
  • 24. Selector (state list) drawables foo.xml: <selector> <item android:drawable="@drawable/foo_disabled" android:state_enabled="false" ... /> <item android:drawable="@drawable/foo_pressed" android:state_pressed="true" ... /> <item android:drawable="@drawable/foo_focused" android:state_focused="true" ... /> <item android:drawable="@drawable/foo_default" /> </selector> 24
  • 25. Selector (state list) drawables foo_default.png foo_disabled.png foo_focused.png foo_pressed.png foo_default.png foo_disabled.png foo_focused.png foo_pressed.png 25
  • 26. Layer drawables – XML + PNGs + + Drawable.setColorFilter(
 0xA4C639,
 ...); foo_border.9.png foo_mask.9.png 26
  • 27. Layer drawables – XML + PNGs = Rendered output (resizable w/ 9-patch) 27
  • 28. New UI design patterns
  • 29. New UI design patterns Borrowed from the Android UI design patterns talk at Google I/O 2010 http://code.google.com/events/io/2010/sessions/ android-ui-design-patterns.html 29
  • 30. New UI design patterns   Dashboard   Action Bar   Quick Actions 30
  • 31. New UI design patterns   Dashboard   Action Bar   Quick Actions 31
  • 32. New UI design patterns   Dashboard   Action Bar   Quick Actions 32
  • 33. New UI design patterns   Dashboard   Action Bar   Quick Actions 33
  • 34. Dashboard “What can I do with this app?” “What’s new?” 34
  • 35. Dashboard – Recommendations   Focus on 3-6 most important app sections   Highlight what’s new   Be flavorful – it’s your first impression 35
  • 36. Action Bar “How can I do <common action> quickly?” 36
  • 37. Action Bar – Recommendations   Bring key, app-wide actions onscreen   Help to convey a sense of place   Use consistently within your app   Provide ‘home’ mechanism – logo or dedicated button   DON’T use for contextual actions 37
  • 38. Quick Actions “What can I do with <this object>?” 38
  • 39. Icons and guidelines
  • 40. New Android icon style Tactile • Rendered • Forward Facing • Top-lit Synecdoche • Diverse shapes, materials
  • 41. Icon guidelines Guidelines and templates are available at: http://developer.android.com/guide/practices/ ui_guidelines/icon_design.html 41
  • 42. Questions?
  • 43. Copyrights and Trademarks   Android, Google are registered trademarks of Google Inc.   All other trademarks and copyrights are the property of their respective owners. 43