Android UX & Design

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!