uxperts mobi 2013 - ux for android
TRANSCRIPT
![Page 1: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/1.jpg)
UX for AndroidPeter Kuterna
Senior Software Engineer at XT-i NV (Cronos)Steering Committee Member at Devoxx
![Page 2: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/2.jpg)
Agenda
• Design Principles
• Style
• Patterns
• Resources
![Page 3: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/3.jpg)
It all starts here
![Page 4: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/4.jpg)
Or here
![Page 5: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/5.jpg)
Appealing Screenshots
![Page 6: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/6.jpg)
Design Principles
![Page 7: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/7.jpg)
Creative Vision
• Enchant me
• Simplify my life
• Make me amazing
![Page 8: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/8.jpg)
Enchant Me
• About filling people with joy
• Showing beautiful images and transitions
• Customization
• Directly touch objects to interact with them
![Page 9: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/9.jpg)
Enchant Me
Delight me in surprising waysReal objects are more fun than
buttons and menus
Let me make it mine
Real objects are more fun than buttons and menus
Real objects are more fun than buttons and menus
Get to know me
![Page 10: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/10.jpg)
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
![Page 11: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/11.jpg)
Simplify my life
Real objects are more fun than buttons and menus
Real objects are more fun than buttons and menus
Keep it brief
I should always now where I amIf it looks the same it should act
the same
Pictures are faster than words
![Page 12: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/12.jpg)
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
![Page 13: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/13.jpg)
Make me amazing
Real objects are more fun than buttons and menus
Real objects are more fun than buttons and menus
Give me tricks that work everywhere Sprinkle encouragement
Do the heavy lifting for me Make important things fast
![Page 14: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/14.jpg)
Google Now
• Get just the right information, at just the right time
• No digging required
• You’re in control
![Page 15: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/15.jpg)
Style
![Page 16: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/16.jpg)
Devices and Displays
![Page 17: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/17.jpg)
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.
![Page 18: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/18.jpg)
Devices and Displays
![Page 19: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/19.jpg)
Devices and Displays
![Page 20: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/20.jpg)
Metrics and Grids
![Page 21: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/21.jpg)
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
![Page 22: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/22.jpg)
Patterns
![Page 23: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/23.jpg)
General App Structure
Top level views
Category views
Detail/edit view
![Page 24: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/24.jpg)
Top Level
• Put content forward
• Setup action bars for navigation and actions
• app icon
• switch between different views
• search action
• ...
• Create an identity
![Page 25: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/25.jpg)
Top Level
![Page 26: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/26.jpg)
Categories
• Typically you navigate through categories to reach the detail level
• Support multi-select
• Use tabs to combine category selection and data display
![Page 27: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/27.jpg)
Categories
![Page 28: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/28.jpg)
Details
• To view and act on your data
• Support specific modes: lights out, full screen, ...
• Make navigation efficient by supporting swipe gestures
![Page 29: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/29.jpg)
Action Bar
1. Application icon2. View control3. Action buttons4. Action overflow
![Page 30: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/30.jpg)
Action Bar
![Page 31: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/31.jpg)
Action Bar Adaptation
![Page 32: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/32.jpg)
Action Bar Adaptation Example
![Page 33: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/33.jpg)
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
![Page 34: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/34.jpg)
An example
![Page 35: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/35.jpg)
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
![Page 36: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/36.jpg)
Share Action Providers
![Page 37: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/37.jpg)
Multi-pane Layouts
![Page 38: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/38.jpg)
Multi-pane LayoutsExpand/collapseStretch/compress
Stack Show/hide
![Page 39: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/39.jpg)
Resources
![Page 40: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/40.jpg)
Official
developer.android.com/design
![Page 41: Uxperts mobi 2013 - UX for Android](https://reader036.vdocuments.us/reader036/viewer/2022062710/55953c1a1a28abe2268b45d0/html5/thumbnails/41.jpg)
Other
• Google+: Android Design in Action Hangouts
• Google+: App Clinic Hangouts
• http://androidniceties.tumblr.com
• http://www.androiduiux.com
• http://www.androidpttrns.com