excellence in the android user experience
DESCRIPTION
A presentation by Roman Nurik from Google Developer Day 2010.TRANSCRIPT
![Page 1: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/1.jpg)
![Page 2: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/2.jpg)
Excellence in the Android User Experience Roman Nurik
![Page 3: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/3.jpg)
Roman Nurik Android Developer Advocate Google @romannurik
I care about icons, and I think you should too ;-)
![Page 4: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/4.jpg)
Where does the user experience begin?
![Page 5: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/5.jpg)
Hint: It doesn’t begin here.
![Page 6: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/6.jpg)
More likely, it starts here:
![Page 7: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/7.jpg)
Or sometimes here:
![Page 8: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/8.jpg)
And where does user experience extend to?
![Page 9: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/9.jpg)
Forums Support
Recommendations
App Usage Reviews
![Page 10: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/10.jpg)
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
![Page 11: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/11.jpg)
Making a great first impression
![Page 12: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/12.jpg)
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
![Page 13: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/13.jpg)
DO DON’T
![Page 14: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/14.jpg)
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.
![Page 15: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/15.jpg)
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
![Page 16: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/16.jpg)
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.
![Page 17: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/17.jpg)
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
![Page 18: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/18.jpg)
Greeting the user with a one-time tutorial screen can also inform them about app features like widgets, live wallpapers, or global search
![Page 19: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/19.jpg)
Designing for ease of use
![Page 20: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/20.jpg)
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
![Page 21: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/21.jpg)
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
![Page 22: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/22.jpg)
![Page 23: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/23.jpg)
Primary action bar pattern
Alternative or secondary action bar patterns
![Page 24: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/24.jpg)
![Page 25: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/25.jpg)
DO feel free to customize the way tabs look
![Page 26: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/26.jpg)
DON’T alter the back stack if you’re using tabs
![Page 27: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/27.jpg)
Scrollable tabs + horizontal swiping is best for homogenous content
Example: News and Weather (stock Android)
![Page 28: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/28.jpg)
![Page 29: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/29.jpg)
Prototyping tools and methods:
Paper + pen
Pencil for Firefox – more on this in a bit
Adobe Fireworks – interactive prototypes
![Page 30: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/30.jpg)
UI design + dev tips (abridged)
![Page 31: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/31.jpg)
http://j.mp/androiddesigntips
![Page 32: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/32.jpg)
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
![Page 33: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/33.jpg)
DO localize if you’re available globally
![Page 34: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/34.jpg)
DO work with visual and interaction designer(s)
![Page 35: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/35.jpg)
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.
![Page 36: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/36.jpg)
<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:
![Page 37: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/37.jpg)
foo_default.png foo_disabled.png foo_focused.png foo_pressed.png
foo_default.png foo_disabled.png foo_focused.png foo_pressed.png
![Page 38: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/38.jpg)
Similar to CSS3 border-image Border pixels indicate stretchable regions
Make both -mdpi and -hdpi versions!
foo.9.png
![Page 39: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/39.jpg)
http://j.mp/androidiconguidelines
![Page 40: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/40.jpg)
New tools
![Page 41: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/41.jpg)
New Android UI Utilities open source project:
Prototyping stencils for Pencil
Android Asset Studio
Photoshop icon templates
![Page 42: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/42.jpg)
http://j.mp/androiduiutils
http://j.mp/androidassetstudio
![Page 43: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/43.jpg)
![Page 44: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/44.jpg)
![Page 45: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/45.jpg)
Continuing to impress the user
![Page 46: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/46.jpg)
http://j.mp/improvingappquality
![Page 47: Excellence in the Android User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5557c01bd8b42af2178b4812/html5/thumbnails/47.jpg)
Android, Google are registered trademarks of Google Inc.
All other trademarks and copyrights are the property of their respective owners.
Copyrights and Trademarks