android ux & design
DESCRIPTION
A talk I gave with Andy Fitzgerald on Android UX and Design patterns, practices, and trends. Presented at Übermind (in Seattle) on September 29th.TRANSCRIPT
![Page 1: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/1.jpg)
ICE CREAM SANDWICH& JELLY BEAN
ANDROID UX & DESIGN
Presented by ANDY FITZGERALDJESSE WEED
![Page 2: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/2.jpg)
WHY ANDROID?2008
first commercial Android devices released
2009
2.8% market share
12,000 activations daily
2010
32% market share
362,000 activations daily
2012
59% market share
over 1 million activations daily
![Page 3: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/3.jpg)
Navigation & User Interface
Visual Design
The Android Ecosphere
Case Studies
UX & DESIGN
![Page 4: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/4.jpg)
NAVIGATION & USER INTERFACE
![Page 5: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/5.jpg)
UP & BACK
![Page 6: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/6.jpg)
UP & BACK: SIBLING SCREENS
![Page 7: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/7.jpg)
UP & BACK: LINKED SCREENS
![Page 8: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/8.jpg)
Intent
A mechanism for one app to signal it
would like another app's assistance in
performing an action.
![Page 9: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/9.jpg)
SHARING WITH INTENTS
![Page 10: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/10.jpg)
SHARING WITH INTENTS
![Page 11: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/11.jpg)
SHARING WITH INTENTS
![Page 12: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/12.jpg)
ACTION BARTop Level Category View
GMail
![Page 13: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/13.jpg)
ACTION BARPageview Spinner
GMail
![Page 14: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/14.jpg)
ACTION BARGoogle Play Books Google Play Music
GMail
![Page 15: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/15.jpg)
SCROLLABLE TABSTab View Horizontal Scrolling
Google Play Music
![Page 16: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/16.jpg)
Scrolling
FIXED TABSTab View (Fixed)
YouTube
![Page 17: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/17.jpg)
Landscape Tabs Nested in Action Bar
FIXED TABSTab View (Scrolled)
YouTube
![Page 18: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/18.jpg)
DRAWERSTop level view Drawer
YouTube
![Page 19: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/19.jpg)
Category menu
DRAWERSDrawer menu
YouTube
![Page 20: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/20.jpg)
Tabbed navigation
DRAWERSDetail view
YouTube
![Page 21: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/21.jpg)
VISUAL DESIGN
![Page 22: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/22.jpg)
WHAT DOES ANDROID “LOOK” LIKE?
![Page 23: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/23.jpg)
HOME SCREEN
Android iPhone
![Page 24: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/24.jpg)
NOTIFICATIONS
Android iPhone
![Page 25: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/25.jpg)
CALLS
Android iPhone
![Page 26: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/26.jpg)
SETTINGS
Android iPhone
![Page 27: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/27.jpg)
CALENDAR
Android iPhone
![Page 28: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/28.jpg)
SHARING
Android iPhone
![Page 29: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/29.jpg)
KEY DESIGN PRINCIPLES
![Page 30: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/30.jpg)
“PURE ANDROID”
Flat, but not 2D
Elements glow
Understated fieldsand elements
Subtle top-light
http://developer.android.com/design
![Page 31: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/31.jpg)
TYPOGRAPHY
![Page 32: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/32.jpg)
COLOR
![Page 33: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/33.jpg)
ICONOGRAPHY
![Page 34: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/34.jpg)
METRICS & GRID
![Page 35: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/35.jpg)
Devices by Screen size & density as of Aug 1, 2012
![Page 36: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/36.jpg)
SUPPORTING MULTIPLE RESOLUTIONS
Example of app without support for different densities.
Example of app with that supports different densities.
![Page 37: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/37.jpg)
![Page 38: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/38.jpg)
SCALING
![Page 39: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/39.jpg)
THE ANDROID ECOSPHERE
![Page 40: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/40.jpg)
NOTIFICATIONSExpanded layouts
![Page 41: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/41.jpg)
NOTIFICATIONSActions
Grouping
![Page 42: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/42.jpg)
WIDGETSInformation Widgets
Collection Widgets
Control Widgets
![Page 43: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/43.jpg)
WIDGETSYouTube, AnyDO, BBC YouTube
![Page 44: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/44.jpg)
WIDGETSHTC Sense Email Epicurious & Flipboard
![Page 45: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/45.jpg)
WIDGETSAny.DO Traffic Widget
![Page 46: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/46.jpg)
OPEN SIGNAL MAPS
h"p://opensignalmaps.com/reports/fragmenta4on.php
![Page 47: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/47.jpg)
MULTIPLE VIEWS
![Page 48: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/48.jpg)
SINGLE VIEW WITHMULTIPLE PANES
![Page 49: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/49.jpg)
STRETCH/COMPRESS
![Page 50: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/50.jpg)
STACK
![Page 51: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/51.jpg)
EXPAND & COLLAPSE
![Page 52: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/52.jpg)
SHOW & HIDE
![Page 53: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/53.jpg)
TRANSLATION:A BAD EXAMPLE
![Page 54: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/54.jpg)
EPICURIOUSiPhone
![Page 55: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/55.jpg)
EPICURIOUSAndroid
![Page 56: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/56.jpg)
PORTING PITFALLS
Ugly user interface
Poor use of “Knowledge in the Head”
Shortchanges device capabilities
Require “hacks” that lead to poor performance and unreliability
Create poor forward compatibility of design work
Generate aggravating user experiences (& resulting negative feedback and brand damage)
![Page 57: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/57.jpg)
TRANSLATION:A GOOD EXAMPLE
![Page 58: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/58.jpg)
EVERNOTE
![Page 59: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/59.jpg)
EVERNOTE
![Page 60: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/60.jpg)
DELIBERATE DESIGN
Facilitates architectural parity across multiple contexts
Leverages device specific “knowledge in the head”
Leverages device and context specific capabilities
Is future friendly
Fits naturally into device ecosystems
![Page 61: Android UX & Design](https://reader034.vdocuments.us/reader034/viewer/2022042614/558773a6d8b42a696f8b45ac/html5/thumbnails/61.jpg)
THANK YOU!