UX for AndroidPeter Kuterna

Senior Software Engineer at XT-i NV (Cronos)Steering Committee Member at Devoxx

Agenda

• Design Principles

• Style

• Patterns

• Resources

It all starts here

Or here

Appealing Screenshots

Design Principles

Creative Vision

• Enchant me

• Simplify my life

• Make me amazing

Enchant Me

• About filling people with joy

• Showing beautiful images and transitions

• Customization

• Directly touch objects to interact with them

Enchant Me

Delight me in surprising waysReal objects are more fun than

buttons and menus

Let me make it mine

Real objects are more fun than buttons and menus

Real objects are more fun than buttons and menus

Get to know me

Simplify my life

• Making things easy for people

• Easy navigation

• Explain in clear words

• Even maybe with pictures

• Bring a tension to what is essential

Simplify my life

Real objects are more fun than buttons and menus

Real objects are more fun than buttons and menus

Keep it brief

I should always now where I amIf it looks the same it should act

the same

Pictures are faster than words

Make me amazing

• Making people feel capable, strong and smart

• Give people things that they want to show off

• Make them feel that they are in control

Make me amazing

Real objects are more fun than buttons and menus

Real objects are more fun than buttons and menus

Give me tricks that work everywhere Sprinkle encouragement

Do the heavy lifting for me Make important things fast

Google Now

• Get just the right information, at just the right time

• No digging required

• You’re in control

Style

Devices and Displays

Devices and Displays

• Make layouts that are flexible. Stretch and compress to various heights and widths.

• Make use of the extra screen real estate on large devices.

• Provide resources for different densities.

Devices and Displays

Devices and Displays

Metrics and Grids

48dp rythm

• Touchable UI components are generally laid out along 48dp units.

• Physical size of about 9mm

• In range of recommended target range for touchscreens

Patterns

General App Structure

Top level views

Category views

Detail/edit view

Top Level

• Put content forward

• Setup action bars for navigation and actions

• app icon

• switch between different views

• search action

• ...

• Create an identity

Top Level

Categories

• Typically you navigate through categories to reach the detail level

• Support multi-select

• Use tabs to combine category selection and data display

Categories

Details

• To view and act on your data

• Support specific modes: lights out, full screen, ...

• Make navigation efficient by supporting swipe gestures

Action Bar

1. Application icon2. View control3. Action buttons4. Action overflow

Action Bar

Action Bar Adaptation

Action Bar Adaptation Example

Back and Up

• Up is used to navigate within the app

• Topmost screen should not present up

• Back button is a system button

• Used to navigate between history of screens

• Back can return to the Home screen or another app

An example

Drawers

• Can be opened by an edge swipe

• Only suitable at topmost level

• No need to give up screen real estate for a dedicated tab bar

• Direct navigation to a number of views

Share Action Providers

Multi-pane Layouts

Multi-pane LayoutsExpand/collapseStretch/compress

Stack Show/hide

Resources

Official

developer.android.com/design

Other

• Google+: Android Design in Action Hangouts

• Google+: App Clinic Hangouts

• http://androidniceties.tumblr.com

• http://www.androiduiux.com

• http://www.androidpttrns.com