Uxperts mobi 2013 - UX for Android

353 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
353
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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. Officialdeveloper.android.com/design
  41. 41. Other• Google+: Android Design in Action Hangouts• Google+: App Clinic Hangouts• http://androidniceties.tumblr.com• http://www.androiduiux.com• http://www.androidpttrns.com

×