Upload
mobilegui
View
7.335
Download
1
Tags:
Embed Size (px)
DESCRIPTION
A presentation by Roman Nurik from Google Developer Day 2010.
Citation preview
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