Excellence in the Android User Experience

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 to impress the user

Making a greatfirst impression

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

DO DON’T

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.

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

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

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

Greeting the user witha one-time tutorialscreen can alsoinform them about appfeatures like widgets,live wallpapers, orglobal search

Designing forease of use

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

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)

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 prototypes

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

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 orientationStyles and themes, etc.Strings XML localized for yourtarget regions

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>

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

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

http://j.mp/androidiconguidelines

New tools

New Android UI Utilitiesopen source project:  Prototyping stencils for Pencil  Android Asset Studio  Photoshop icon templates

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 copyrights are the property of their respective owners.

http://mobilegui.net	336
https://twimg0-a.akamaihd.net	2
http://translate.googleusercontent.com	1
http://paper.li	1
https://si0.twimg.com	1

Excellence in the Android User Experience

by mobilegui

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 341

Statistics