Uxperts mobi 2013 - UX for Android

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. UX for AndroidPeter KuternaSenior 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 MeDelight me in surprising waysReal objects are more fun thanbuttons and menusLet 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 lifeKeep it briefI should always now where I amIf it looks the same it should actthe samePictures 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 amazingGive me tricks that workeverywhere Sprinkle encouragementDo 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 andcompress to various heights and widths.• Make use of the extra screen real estate on largedevices.• 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 outalong 48dp units.• Physical size of about 9mm• In range of recommended target range fortouchscreens
  • 22. Patterns
  • 23. General App StructureTop level viewsCategory viewsDetail/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 toreach the detail level• Support multi-select• Use tabs to combine category selection and datadisplay
  • 27. Categories
  • 28. Details• To view and act on your data• Support specific modes: lights out, full screen, ...• Make navigation efficient by supporting swipegestures
  • 29. Action Bar1.Application icon2.View control3.Action buttons4.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 anotherapp
  • 34. An example
  • 35. Drawers• Can be opened by anedge swipe• Only suitable at topmostlevel• No need to give upscreen real estate for adedicated tab bar• Direct navigation to anumber of views
  • 36. Share Action Providers
  • 37. Multi-pane Layouts
  • 38. Multi-pane LayoutsExpand/collapseStretch/compressStack Show/hide
  • 39. Resources
  • 40. Officialdeveloper.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