Excellence in the Android UserExperienceRoman Nurik
Roman NurikAndroid Developer AdvocateGoogle@romannurikI care about icons, andI think you should too ;-)
Where does theuser experiencebegin?
Hint:It doesn’tbegin here.
More likely,it startshere:
Or sometimes here:
And where doesuser experienceextend to?
App Usage      Reviews    Recommendations Forums        Support
Agenda1.  Making a great first impression2.  Designing for ease of use3.  UI design + dev tips4.  New tools5.  Continuing ...
Making a greatfirst impression
You can startsetting appropriate expectations andimpressing the usersooner than you think:  Have a clean, beautiful and g...
DO   DON’T
You don’t always have control over thefirst impression.  Press and word-of-mouth reviews  User’s previous exposure to yo...
Once your app is installed,get the user up and runningas quickly as possible.  Don’t require a lengthy registration proce...
Your ‘home’ activity should be straightforward.            It’s also an opportunity to        show off available features,...
In some cases, your appmay call for a unique userinterface.In these cases, considergreeting the user andeducating them on ...
Greeting the user witha one-time tutorialscreen can alsoinform them about appfeatures like widgets,live wallpapers, orglob...
Designing forease of use
Clarity begets ease of use.An ideal design process:1.  Lay out your information hierarchy    and data model2.  Choose a pr...
DO                     DON’T  Dashboard +              5+ tabs or bottom tabs   Action bar                            N...
Primary action barpatternAlternative orsecondaryaction barpatterns
DO feel free to customizethe way tabs look
DON’T alter the back stackif you’re using tabs
Scrollable tabs +horizontal swipingis best forhomogenouscontentExample:News and Weather(stock Android)
Prototyping tools and methods:  Paper + pen  Pencil for Firefox – more on this in a bit  Adobe Fireworks – interactive ...
UI design + dev tips      (abridged)
http://j.mp/androiddesigntips
  DON’T simply port your      DON’T use px units,   UI from other platforms      use dp (sp for text)  DON’T overuse mo...
DO localize if you’reavailable globally
DO work with visual andinteraction designer(s)
Drawable XML (no PNGs!)PNGs, 9-patch PNGs,optimized for multi. densitiesLayout XMLoptimized forphysical size and orientati...
foo.xml:<selector>    <item android:drawable="@drawable/foo_disabled"          android:state_enabled="false" ... />    <it...
foo_default.png   foo_disabled.png foo_focused.png   foo_pressed.pngfoo_default.png   foo_disabled.png foo_focused.png   f...
foo.9.png	  Similar to CSS3 border-image	  Border pixels indicate stretchable regions  Make both -mdpi and -hdpi versio...
http://j.mp/androidiconguidelines
New tools
New Android UI Utilitiesopen source project:  Prototyping stencils for Pencil  Android Asset Studio  Photoshop icon tem...
http://j.mp/androiduiutilshttp://j.mp/androidassetstudio
Continuing toimpress the user
http://j.mp/improvingappquality
Copyrights and Trademarks  Android, Google are registered trademarks of   Google Inc.  All other trademarks and copyrigh...
Excellence in the Android User Experience
Excellence in the Android User Experience
Excellence in the Android User Experience
Excellence in the Android User Experience
Excellence in the Android User Experience
Excellence in the Android User Experience
Upcoming SlideShare
Loading in …5
×

Excellence in the Android User Experience

7,684 views

Published on

A presentation by Roman Nurik from Google Developer Day 2010.

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

No Downloads
Views
Total views
7,684
On SlideShare
0
From Embeds
0
Number of Embeds
343
Actions
Shares
0
Downloads
220
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Excellence in the Android User Experience

  1. 1. Excellence in the Android UserExperienceRoman Nurik
  2. 2. Roman NurikAndroid Developer AdvocateGoogle@romannurikI care about icons, andI think you should too ;-)
  3. 3. Where does theuser experiencebegin?
  4. 4. Hint:It doesn’tbegin here.
  5. 5. More likely,it startshere:
  6. 6. Or sometimes here:
  7. 7. And where doesuser experienceextend to?
  8. 8. App Usage Reviews Recommendations Forums Support
  9. 9. Agenda1.  Making a great first impression2.  Designing for ease of use3.  UI design + dev tips4.  New tools5.  Continuing to impress the user
  10. 10. Making a greatfirst impression
  11. 11. You can startsetting appropriate expectations andimpressing the usersooner than you think:  Have a clean, beautiful and guideline-friendly icon  Have a unique and appropriate listing title  Have an honest and useful listing description
  12. 12. DO DON’T
  13. 13. You don’t always have control over thefirst impression.  Press and word-of-mouth reviews  User’s previous exposure to your brand  Market ratingsImproving the quality of your app will help positivelyinfluence these factors.
  14. 14. Once your app is installed,get the user up and runningas quickly as possible.  Don’t require a lengthy registration process –  Users hate typing on mobile devices  Sync user data and context immediately –  Users shouldn’t have to recreate their desktop environment on their mobile phone
  15. 15. Your ‘home’ activity should be straightforward. It’s also an opportunity to show off available features, in ahighly aesthetic, consistent, yet brand-faithful way.
  16. 16. In some cases, your appmay call for a unique userinterface.In these cases, considergreeting the user andeducating them on the UI.Make them feel comfortablewith your app.Example:Winamp for Android
  17. 17. Greeting the user witha one-time tutorialscreen can alsoinform them about appfeatures like widgets,live wallpapers, orglobal search
  18. 18. Designing forease of use
  19. 19. Clarity begets ease of use.An ideal design process:1.  Lay out your information hierarchy and data model2.  Choose a primary UI navigation pattern3.  Sketch or otherwise prototype your UI
  20. 20. DO DON’T  Dashboard +   5+ tabs or bottom tabs Action bar   Navigation sections  Top tabs (up to 4) in options menu  Sliding top tabs   On-screen back button (homogenous content)
  21. 21. Primary action barpatternAlternative orsecondaryaction barpatterns
  22. 22. DO feel free to customizethe way tabs look
  23. 23. DON’T alter the back stackif you’re using tabs
  24. 24. Scrollable tabs +horizontal swipingis best forhomogenouscontentExample:News and Weather(stock Android)
  25. 25. Prototyping tools and methods:  Paper + pen  Pencil for Firefox – more on this in a bit  Adobe Fireworks – interactive prototypes
  26. 26. UI design + dev tips (abridged)
  27. 27. http://j.mp/androiddesigntips
  28. 28.   DON’T simply port your   DON’T use px units, UI from other platforms use dp (sp for text)  DON’T overuse modal   DON’T use small font progress & sizes confirmation dialogs  DO make large,   DO support D-pad & obvious tap targets trackball navigation (buttons, list items)   DO properly manage  DO use proper margins the activity stack and padding   DO properly handle orientation changes
  29. 29. DO localize if you’reavailable globally
  30. 30. DO work with visual andinteraction designer(s)
  31. 31. Drawable XML (no PNGs!)PNGs, 9-patch PNGs,optimized for multi. densitiesLayout XMLoptimized forphysical size and orientationStyles and themes, etc.Strings XML localized for yourtarget regions
  32. 32. 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>
  33. 33. foo_default.png foo_disabled.png foo_focused.png foo_pressed.pngfoo_default.png foo_disabled.png foo_focused.png foo_pressed.png
  34. 34. foo.9.png   Similar to CSS3 border-image   Border pixels indicate stretchable regions  Make both -mdpi and -hdpi versions!
  35. 35. http://j.mp/androidiconguidelines
  36. 36. New tools
  37. 37. New Android UI Utilitiesopen source project:  Prototyping stencils for Pencil  Android Asset Studio  Photoshop icon templates
  38. 38. http://j.mp/androiduiutilshttp://j.mp/androidassetstudio
  39. 39. Continuing toimpress the user
  40. 40. http://j.mp/improvingappquality
  41. 41. Copyrights and Trademarks  Android, Google are registered trademarks of Google Inc.  All other trademarks and copyrights are the property of their respective owners.

×