• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Excellence in the Android User Experience

Excellence in the Android User Experience



A presentation by Roman Nurik from Google Developer Day 2010.

A presentation by Roman Nurik from Google Developer Day 2010.



Total Views
Views on SlideShare
Embed Views



5 Embeds 341

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



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Excellence in the Android User Experience Excellence in the Android User Experience Presentation Transcript

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