1.
Android UI Design Tips
by Luis Abreu

2.
Introduction
Luís Abreu is a
Developer with an
Interest in User Interface and User Experience
Android early adopter

3.
Why Do I Care?
• End-User
• Aesthetics
• Quality
• More likely to install/purchase

4.
Agenda
• Why Should You Care
• Principles of Interface Design
• Do’s and Don’ts
• Android UI Design Patterns
• The State of Things

5.
Why Should You Care

6.
Why Should You Care
• Better UI
• Perceived Quality
• Better Ratings
• Better App Ranking
• More Installs/Purchases

7.
Example
Cycle Hire

8.
Cycle Hire
Widget
Original Redesign

9.
Cycle Hire
List
Original Redesign

10.
Cycle Hire
Map
Original Redesign

11.
Principles of Interface Design

12.
Principles of Interface Design
1. Focus on the user
2. Make the right things visible
3. Show proper feedback
4. Be predictable
5. Be fault-tolerant

13.
1. Focus on the user
• Know your users
• Age, skill level, culture, disabilities, etc.
• What task are they trying to achieve
• What kinds of devices they’ll be using
• Where/when/how they’ll be using their
devices
• Test on real users, early and often

14.
2. Make the right things visible
• The most common operations should be
immediately visible and available
• Secondary functionality can be reserved for
the MENU button

15.
3. Show proper feedback
• Make sure the effects of an action are clear
and visible
• Show adequate yet unobtrusive status
indicators

16.
4. Be predictable
• Do what the user expects
• Properly manage the activity stack
• Show information and actions users
expect to see
• Use proper affordances
• If it acts like a button, make sure it looks
like a button

17.
5. Be fault-tolerant
• Constrain possible operations to only
those that make sense
• Disable UI elements when appropriate
• Limit the number of irreversible actions
• Prefer ‘undo’ to confirmation dialogs
• Use as few modal dialogs as possible.

18.
Do’s and Don’ts

19.
• DON’T reinvent the • DON’T hijack the back
wheel or menu buttons
• DON’T port the UI
from other platforms
• DON’T use small font
sizes
• DON’T overuse modal
progress and
confirmation dialogs

20.
• DO create resources • DO properly manage
for all different screen the activity stack
densities
• DO think about the
• DO make large, obvious device and context your
tap targets (buttons, list app will be used
items)
• DO use native icons
• DO follow existing UI
Guidelines (Icon,
Activity, Menu, Widget)

21.
DO try to work with a UI Designer,
Illustrator/Animator as soon as possible

22.
Android UI Design Patterns

23.
“A design pattern is a general
reusable solution to a
commonly occurring problem.”
— Good Old Wikipedia

24.
Android UI Design Patterns
• Dashboard
• Action Bar
• Quick Actions
• Search Bar
• Tabs
• Lists
• ...

25.
Dashboard

26.
Dashboard

27.
Dashboard
“What can I do with this app? What’s new?”
• A quick intro to an app, revealing
capabilities and proactively highlighting new
content
• Can be organized by:
• Features
• Categories
• Accounts

28.
Dashboard
Recommendations
• Highlight what’s new
• Focus on the 3-8 most important features

29.
Action Bar

30.
Action Bar

31.
Action Bar
“How can I do <common action> quickly?”
• Dedicated real estate at top of the screen to support
navigation and frequently used operations
• Replaces title bar
• Best for actions common across your app
• Search
• Refresh
• Compose
• Can provide a quick link back to dashboard (or other app
home)

32.
Action Bar
Recommendations
• Used to bring key actions onscreen
• Use consistently across your app
• Not for contextual actions
• Delete
• Edit
• Call

33.
Quick Actions

34.
Quick Actions

35.
Quick Actions
“What can I do with this thing?”
• Action popup triggered from distinct visual
target
• Minimally disruptive to screen context
• Actions are straightforward
• Fast & fun

36.
Quick Actions
Recommendations
• Use when items have competing internal
targets
• Most important and obvious actions
• Use when the item doesn’t have a
meaningful detail view
• Don’t use in contexts which support
multiple selection

37.
Search Bar

38.
Search Bar

39.
Search Bar
“How can I find something?”
• Consistent pop-in search form anchored to top of
screen
• Replaces action bar (if present)
• Support suggestions
• Can use a Quick Action selector to alter search
mode
• Alternately, can offer suggestions for primary
search mode, and additional items for triggering
other modes

40.
Search Bar
Recommendations
• Use for simple searches
• Present rich suggestions
• Use the same behavior

41.
The State of Things

42.
Android Market
• Many Low Quality Apps
• Room for improvement
• Low perception of value makes users less
willing to pay, developer houses
• You can bring value to the platform
• 300000 Android users activated daily

43.
Official Documentation
• http://goo.gl/Uhh1
• Icon Design Guidelines and Templates
• Widget Design Guidelines
• Activity and Task Design Guidelines
• Menu Design Guidelines

44.
Google I/O 2010 Videos
• http://goo.gl/IJzVq
• Android UI Design Patterns
• The world of ListView
• Writing zippy Android Applications
• ...

45.
Books/Presentations
• Professional Android 2 Application
Development
• Android UI Design Patterns & Best Practices
• Radioactive Yak App Surgery
• Tapworthy Screencast
• Android UI Design Tips

46.
Other
• Android UI Patterns Flickr Collection
• Android Applications Flickr Collection
• Android Drawables Explorer

47.
Wrap Up
• Use the Patterns, Luke
• There’s plenty of room for improvement
• UI Design: it pays back

48.
Thank You
• Twitter - @lmjabreu
• Email - lmjabreu@gmail.com