Uxperts mobi 2013 - UX for Android

  • 134 views
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

Views

Total Views
134
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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