Excellence in the Android User Experience Roman Nurik

Roman Nurik Android Developer Advocate Google @romannurik

I care about icons, and I think you should too ;-)

Where does the user experience begin?

Hint: It doesn’t begin here.

More likely, it starts here:

Or sometimes here:

And where does user experience extend to?

Forums Support

Recommendations

App Usage Reviews

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

Agenda

Making a great first impression

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

DO DON’T

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.

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

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.

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

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

Designing for ease of use

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

 Dashboard + Action bar

 Top tabs (up to 4)

 Sliding top tabs (homogenous content)

 5+ tabs or bottom tabs

 Navigation sections in options menu

 On-screen back button

DO DON’T

Primary action bar pattern

Alternative or secondary action bar patterns

DO feel free to customize the way tabs look

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

Scrollable tabs + horizontal swiping is best for homogenous content

Example: News and Weather (stock Android)

Prototyping tools and methods:

 Paper + pen

 Pencil for Firefox – more on this in a bit

 Adobe Fireworks – interactive prototypes

UI design + dev tips (abridged)

http://j.mp/androiddesigntips

 DON’T simply port your UI from other platforms

 DON’T overuse modal progress & confirmation dialogs

 DO make large, obvious tap targets (buttons, list items)

 DO use proper margins and padding

 DON’T use px units, use dp (sp for text)

 DON’T use small font sizes

 DO support D-pad & trackball navigation

 DO properly manage the activity stack

 DO properly handle orientation changes

DO localize if you’re available globally

DO work with visual and interaction designer(s)

PNGs, 9-patch PNGs, optimized for multi. densities

Layout XML optimized for physical size and orientation

Strings XML localized for your target regions

Drawable XML (no PNGs!)

Styles and themes, etc.

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

foo.xml:

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

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

 Similar to CSS3 border-image Border pixels indicate stretchable regions

 Make both -mdpi and -hdpi versions!

foo.9.png

http://j.mp/androidiconguidelines

New tools

New Android UI Utilities open source project:

 Prototyping stencils for Pencil

 Android Asset Studio

 Photoshop icon templates

http://j.mp/androiduiutils

http://j.mp/androidassetstudio

Continuing to impress the user

http://j.mp/improvingappquality

 Android, Google are registered trademarks of Google Inc.

 All other trademarks and copyrights are the property of their respective owners.

Copyrights and Trademarks