Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Uxperts mobi 2013 ux for android


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Uxperts mobi 2013 ux for android

  1. 1. UX for AndroidPeter KuternaSenior Software Engineer at XT-i NV (Cronos)Steering Committee Member at Devoxx
  2. 2. Agenda• Design Principles• Style• Patterns• Resources
  3. 3. It all starts here
  4. 4. Or here
  5. 5. Appealing Screenshots
  6. 6. Design Principles
  7. 7. Creative Vision• Enchant me• Simplify my life• Make me amazing
  8. 8. Enchant Me• About filling people with joy• Showing beautiful images and transitions• Customization• Directly touch objects to interact with them
  9. 9. Enchant MeDelight me in surprising waysReal objects are more fun thanbuttons and menusLet me make it mine Get to know me
  10. 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. 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. 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. 13. Make me amazingGive me tricks that workeverywhere Sprinkle encouragementDo the heavy lifting for me Make important things fast
  14. 14. Google Now• Get just the right information,at just the right time• No digging required• You’re in control
  15. 15. Style
  16. 16. Devices and Displays
  17. 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. 18. Devices and Displays
  19. 19. Devices and Displays
  20. 20. Metrics and Grids
  21. 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. 22. Patterns
  23. 23. General App StructureTop level viewsCategory viewsDetail/edit view
  24. 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. 25. Top Level
  26. 26. Categories• Typically you navigate through categories toreach the detail level• Support multi-select• Use tabs to combine category selection and datadisplay
  27. 27. Categories
  28. 28. Details• To view and act on your data• Support specific modes: lights out, full screen, ...• Make navigation efficient by supporting swipegestures
  29. 29. Action Bar1.Application icon2.View control3.Action buttons4.Action overflow
  30. 30. Action Bar
  31. 31. Action Bar Adaptation
  32. 32. Action Bar Adaptation Example
  33. 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. 34. An example
  35. 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. 36. Share Action Providers
  37. 37. Multi-pane Layouts
  38. 38. Multi-pane LayoutsExpand/collapseStretch/compressStack Show/hide
  39. 39. Resources
  40. 40.
  41. 41. Other• Google+: Android Design in Action Hangouts• Google+: App Clinic Hangouts•••