1. UX for Android
Peter Kuterna
Senior Software Engineer at XT-i NV (Cronos)
Steering Committee Member at Devoxx

2. Agenda
• Design Principles
• Style
• Patterns
• Resources

3. It all starts here

4. Or here

5. Appealing Screenshots

6. Design Principles

7. Creative Vision
• Enchant me
• Simplify my life
• Make me amazing

8. Enchant Me
• About filling people with joy
• Showing beautiful images and transitions
• Customization
• Directly touch objects to interact with them

9. Enchant Me
Delight me in surprising ways
Real objects are more fun than
buttons and menus
Let me make it mine Get to know me

10. 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

11. Simplify my life
Keep it brief
I should always now where I am
If it looks the same it should act
the same
Pictures are faster than words

12. 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

13. Make me amazing
Give me tricks that work
everywhere Sprinkle encouragement
Do the heavy lifting for me Make important things fast

14. Google Now
• Get just the right information,
at just the right time
• No digging required
• You’re in control

15. Style

16. Devices and Displays

17. 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.

18. Devices and Displays

19. Devices and Displays

20. Metrics and Grids

21. 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

22. Patterns

23. General App Structure
Top level views
Category views
Detail/edit view

24. Top Level
• Put content forward
• Setup action bars for navigation and actions
• app icon
• switch between different views
• search action
• ...
• Create an identity

25. Top Level

26. Categories
• Typically you navigate through categories to
reach the detail level
• Support multi-select
• Use tabs to combine category selection and data
display

27. Categories

28. Details
• To view and act on your data
• Support specific modes: lights out, full screen, ...
• Make navigation efficient by supporting swipe
gestures

29. Action Bar
1.Application icon
2.View control
3.Action buttons
4.Action overflow

30. Action Bar

31. Action Bar Adaptation

32. Action Bar Adaptation Example

33. 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

34. An example

35. 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

36. Share Action Providers

37. Multi-pane Layouts

38. Multi-pane Layouts
Expand/collapseStretch/compress
Stack Show/hide

39. Resources

40. Official
developer.android.com/design

41. Other
• Google+: Android Design in Action Hangouts
• Google+: App Clinic Hangouts
• http://androidniceties.tumblr.com
• http://www.androiduiux.com
• http://www.androidpttrns.com