Excellence in the Android User Experience
- 2. Excellence in the Android User Experience Roman Nurik
- 3. Roman Nurik Android Developer Advocate Google @romannurik I care about icons, and I think you should too ;-)
- 4. Where does the user experience begin?
- 8. And where does user experience extend to?
- 9. App Usage Reviews Recommendations Forums Support
- 10. Agenda 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
- 11. Making a great first impression
- 12. 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
- 13. DO DON’T
- 14. 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.
- 15. 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
- 16. 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.
- 17. 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
- 18. Greeting the user with a one-time tutorial screen can also inform them about app features like widgets, live wallpapers, or global search
- 19. Designing for ease of use
- 20. 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
- 21. 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)
- 23. Primary action bar pattern Alternative or secondary action bar patterns
- 25. DO feel free to customize the way tabs look
- 26. DON’T alter the back stack if you’re using tabs
- 27. Scrollable tabs + horizontal swiping is best for homogenous content Example: News and Weather (stock Android)
- 29. Prototyping tools and methods: Paper + pen Pencil for Firefox – more on this in a bit Adobe Fireworks – interactive prototypes
- 30. UI design + dev tips (abridged)
- 32. 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
- 33. DO localize if you’re available globally
- 34. DO work with visual and interaction designer(s)
- 35. Drawable XML (no PNGs!) PNGs, 9-patch PNGs, optimized for multi. densities Layout XML optimized for physical size and orientation Styles and themes, etc. Strings XML localized for your target regions
- 36. 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>
- 37. foo_default.png foo_disabled.png foo_focused.png foo_pressed.png foo_default.png foo_disabled.png foo_focused.png foo_pressed.png
- 38. foo.9.png Similar to CSS3 border-image Border pixels indicate stretchable regions Make both -mdpi and -hdpi versions!
- 40. New tools
- 41. New Android UI Utilities open source project: Prototyping stencils for Pencil Android Asset Studio Photoshop icon templates
- 45. Continuing to impress the user
- 47. Copyrights and Trademarks Android, Google are registered trademarks of Google Inc. All other trademarks and copyrights are the property of their respective owners.