A presentation by Roman Nurik from Google Developer Day 2010.

2. Excellence in the Android User
Experience
Roman Nurik

3. Roman Nurik
Android Developer Advocate
Google
@romannurik
I care about icons, and
I think you should too ;-)

4. Where does the
user experience
begin?

5. Hint:
It doesn’t
begin here.

6. More likely,
it starts
here:

7. Or sometimes here:

8. And where does
user experience
extend to?

9. App Usage Reviews
Recommendations
Forums Support

10. Agenda
1. Making a great first impression
2. Designing for ease of use
3. UI design + dev tips
4. New tools
5. Continuing to impress the user

11. Making a great
first impression

12. You can start
setting appropriate expectations and
impressing the user
sooner 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

13. DO DON’T

14. You don’t always have control over the
first impression.
 Press and word-of-mouth reviews
 User’s previous exposure to your brand
 Market ratings
Improving the quality of your app will help positively
influence these factors.

15. Once your app is installed,
get the user up and running
as 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

16. Your ‘home’ activity should be straightforward.
It’s also an opportunity to
show off available features, in a
highly aesthetic, consistent, yet brand-faithful way.

17. In some cases, your app
may call for a unique user
interface.
In these cases, consider
greeting the user and
educating them on the UI.
Make them feel comfortable
with your app.
Example:
Winamp for Android

18. Greeting the user with
a one-time tutorial
screen can also
inform them about app
features like widgets,
live wallpapers, or
global search

19. Designing for
ease of use

20. Clarity begets ease of use.
An ideal design process:
1. Lay out your information hierarchy
and data model
2. Choose a primary UI navigation pattern
3. Sketch or otherwise prototype your UI

21. 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)

23. Primary action bar
pattern
Alternative or
secondary
action bar
patterns

25. DO feel free to customize
the way tabs look

26. DON’T alter the back stack
if you’re using tabs

27. Scrollable tabs +
horizontal swiping
is best for
homogenous
content
Example:
News and Weather
(stock Android)

29. Prototyping tools and methods:
 Paper + pen
 Pencil for Firefox – more on this in a bit
 Adobe Fireworks – interactive prototypes

30. UI design + dev tips
(abridged)

31. http://j.mp/androiddesigntips

32.  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

33. DO localize if you’re
available globally

34. DO work with visual and
interaction designer(s)

35. Drawable XML (no PNGs!)
PNGs, 9-patch PNGs,
optimized for multi. densities
Layout XML
optimized for
physical size and orientation
Styles and themes, etc.
Strings XML localized for your
target regions

36. 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>

37. foo_default.png foo_disabled.png foo_focused.png foo_pressed.png
foo_default.png foo_disabled.png foo_focused.png foo_pressed.png

38. foo.9.png
 Similar to CSS3 border-image
 Border pixels indicate stretchable regions
 Make both -mdpi and -hdpi versions!

39. http://j.mp/androidiconguidelines

40. New tools

41. New Android UI Utilities
open source project:
 Prototyping stencils for Pencil
 Android Asset Studio
 Photoshop icon templates

42. http://j.mp/androiduiutils
http://j.mp/androidassetstudio

45. Continuing to
impress the user

46. http://j.mp/improvingappquality

47. Copyrights and Trademarks
 Android, Google are registered trademarks of
Google Inc.
 All other trademarks and copyrights are the
property of their respective owners.