Post on 22-Jun-2015
description
ICE CREAM SANDWICH& JELLY BEAN
ANDROID UX & DESIGN
Presented by ANDY FITZGERALDJESSE WEED
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
Navigation & User Interface
Visual Design
The Android Ecosphere
Case Studies
UX & DESIGN
NAVIGATION & USER INTERFACE
UP & BACK
UP & BACK: SIBLING SCREENS
UP & BACK: LINKED SCREENS
Intent
A mechanism for one app to signal it
would like another app's assistance in
performing an action.
SHARING WITH INTENTS
SHARING WITH INTENTS
SHARING WITH INTENTS
ACTION BARTop Level Category View
GMail
ACTION BARPageview Spinner
GMail
ACTION BARGoogle Play Books Google Play Music
GMail
SCROLLABLE TABSTab View Horizontal Scrolling
Google Play Music
Scrolling
FIXED TABSTab View (Fixed)
YouTube
Landscape Tabs Nested in Action Bar
FIXED TABSTab View (Scrolled)
YouTube
DRAWERSTop level view Drawer
YouTube
Category menu
DRAWERSDrawer menu
YouTube
Tabbed navigation
DRAWERSDetail view
YouTube
VISUAL DESIGN
WHAT DOES ANDROID “LOOK” LIKE?
HOME SCREEN
Android iPhone
NOTIFICATIONS
Android iPhone
CALLS
Android iPhone
SETTINGS
Android iPhone
CALENDAR
Android iPhone
SHARING
Android iPhone
KEY DESIGN PRINCIPLES
“PURE ANDROID”
Flat, but not 2D
Elements glow
Understated fieldsand elements
Subtle top-light
http://developer.android.com/design
TYPOGRAPHY
COLOR
ICONOGRAPHY
METRICS & GRID
Devices by Screen size & density as of Aug 1, 2012
SUPPORTING MULTIPLE RESOLUTIONS
Example of app without support for different densities.
Example of app with that supports different densities.
SCALING
THE ANDROID ECOSPHERE
NOTIFICATIONSExpanded layouts
NOTIFICATIONSActions
Grouping
WIDGETSInformation Widgets
Collection Widgets
Control Widgets
WIDGETSYouTube, AnyDO, BBC YouTube
WIDGETSHTC Sense Email Epicurious & Flipboard
WIDGETSAny.DO Traffic Widget
OPEN SIGNAL MAPS
h"p://opensignalmaps.com/reports/fragmenta4on.php
MULTIPLE VIEWS
SINGLE VIEW WITHMULTIPLE PANES
STRETCH/COMPRESS
STACK
EXPAND & COLLAPSE
SHOW & HIDE
TRANSLATION:A BAD EXAMPLE
EPICURIOUSiPhone
EPICURIOUSAndroid
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)
TRANSLATION:A GOOD EXAMPLE
EVERNOTE
EVERNOTE
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
THANK YOU!