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