Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone

ESSENTIAL MOBILE DESIGN:

INTERFACE PRINCIPLES AND BEST PRACTICES
FOR IOS, ANDROID, AND WINDOWS PHONE

CHIA HWU & EVAN KIRCHHOFF, QUBOP INC.
WEWORK, SAN FRANCISCO, OCTOBER 3, 2012

OCT 3, 2012 - WWW.QUBOP.COM

HELLO!

CHIA HWU, CEO
CHIA@QUBOP.COM
TWITTER: @CHIAH

EVAN KIRCHHOFF, CTO
EVAN@QUBOP.COM
TWITTER: @THEEVANK

WWW.QUBOP.COM
TWITTER: @QUBOPINC

WORLDWIDE USERBASE, MID-2012
500M

400M

300M

200M

100M

2006 2007 2008 2009 2010 2011 2012

IOS (ALL) ANDROID WINDOWS PHONE

(CUMULATIVE WORLDWIDE USERS IN MILLIONS)


IOS: NEARLY HALF OF PLATFORM IS NON-IPHONE

iPhone: 57% iPod Touch: 17% iPad: 26%
OCT 3, 2012 - WWW.QUBOP.COM SOURCE: APPLE Q1-Q3 2012 SALES

IPAD IS NOW APPLE’S #2 DEVICE
40M

30M
UNITS IPHONE
(PER QUARTER)
20M
IPAD

10M
IPOD
MAC (ALL)

2007 2008 2009 2010 2011 2012

OCT 3, 2012 - WWW.QUBOP.COM SOURCE: FRNCS.CO/APPLE, AS OF Q3 2012

ANDROID: STILL MOSTLY PHONES

Phones: 95% Tablets: ~5%

MOST ANDROID DEVICES HAVE OBSOLETE OS

JUNE 2012: PERCENTAGE OF DEVICES ACCESSING GOOGLE PLAY IN PREVIOUS 14-DAY PERIOD


ANNUAL REVENUE SOURCES: APPLE VS. GOOGLE
IOS (IPHONE, IPAD, IPOD TOUCH) ANDROID
NON-MOBILE (INCLUDES MAC) OTHER MOBILE (IOS ADS, MAPS, YOUTUBE)
NON-MOBILE (WEB ADS, SEARCH)

$0.2B $0.8B
$26B

$37B
$82B

GOOGLE TOTAL: $38 B
(97% NON-MOBILE)
APPLE TOTAL: $108 B

MOBILE HARDWARE PROFIT SHARE:
99% APPLE & SAMSUNG
100%

75%

50%

25%

2007 2008 2009 2010 2011 2012

SOURCE: ASYMCO.COM

HARDWARE IS NOW MORE PROFITABLE THAN SOFTWARE

MICROSOFT: APPLE:

$78 $195
AVERAGE PROFIT PER PC AVERAGE PROFIT PER IPAD
(WINDOWS + OFFICE)


MICROSOFT: NOW BUILDING MOBILE HARDWARE

MICROSOFT SURFACE TABLET (ESTIMATED LATE 2012)

ASSUME THAT
FRAGMENTATION IS
PERMANENT


IOS: A TRADITION OF PIXEL-ACCURATE LAYOUT

ASPECT
RATIO

3:4
ASPECT
RATIO

2:3

2011: ONLY 2 SCREENS TO SUPPORT (SINCE RETINA = 2X NORMAL)

ANDROID: UNPREDICTABLE FORM FACTORS

IOS 2012: SCREENS MULTIPLYING

ASPECT
RATIO

3:4
ASPECT ASPECT
RATIO RATIO

2:3 9:16

SEPTEMBER 2012: 3 SCREENS TO SUPPORT

IOS 2012: SCREENS MULTIPLYING

ASPECT
RATIO

3:4 ASPECT
RATIO
ASPECT
RATIO
ASPECT
RATIO 3:4
2:3 9:16
?
OCTOBER 2012: 4 SCREENS TO SUPPORT?

7” VS. 10” TABLET: DIFFERENT USE CASES

7” TABLETS HELD ONE-HANDED, OPERATED WHILE WALKING, FIT INTO POCKETS
10” TABLETS LESS MOBILE, TEND TO REST IN USERS’ LAPS


JANUARY 2012: ANDROID TABLET DEFRAGMENTATION

#1 #2

7” SCREENS @ 600 X 1024, RUNNING ANDROID 2.X

LATE 2012: RE-FRAGMENTATION

1200 x 1920, v4.0 800 x 1280, v4.0 600 x 1024, v2.3 800 x 1280, v4.1

1280 x 1920, v4.0 900 x 1440, v4.0 600 x 1024, v2.3 600 x 1024, v3.2 1280 x 800, v4.0


WINDOWS PHONE 8: THREE SCREENS

WP 7: 480 x 800 WP 8: 480 x 800, 768 x 1280, 720 x 1280


DESIGN FOR USE CASES,
NOT HARDWARE


PORTRAIT AND
LANDSCAPE ARE
DIFFERENT DEVICES


MOST CONTENT HAS ONE NATURAL ORIENTATION

AUTO-ROTATION NEVER REALLY WORKED
(EXCEPT FOR DOCUMENT HANDLING)


A PLATFORM’S DEFAULT ORIENTATION
SUGGESTS ITS USE CASES

PORTRAIT = LEGAL, MEDICAL, HOSPITALITY

WINDOWS TABLETS ALSO SUPPORT PORTRAIT
(BUT THIS IS RARELY SHOWN)


CONVENTIONS EVOLVE
EVERY SIX MONTHS


STANDARD APPLE UI (2007)


THE ICON GRID (EARLY 2011)

FACEBOOK LINKEDIN YELP SCVNGR


DEATH OF THE ICON GRID (LATE 2011)

FACEBOOK LINKEDIN


PULL TO REFRESH: A NON-APPLE CONVENTION (SINCE 2010)

TWITTER BOXCAR FACEBOOK SEESMIC
MESSENGER


...FINALLY ADOPTED BY APPLE (2012)

MAIL (IOS 6)


THE 5-TAB SOCIAL APP WITH CENTER ICON (2011)

INSTAGRAM PATH (VERSION 1) COLOR


HIPSTER SOUNDTRACKING FOODSPOTTING SOCIALCAM

THE CENTER TAB ANSWERED THE QUESTION,
“WHAT DO I DO WITH THIS APP?”


A TREND TOWARDS FLATTER, SIMPLER UI (2012)

INSTAGRAM (2011) INSTAGRAM (2012) PINTEREST (2011) PINTEREST (2012)


FOURSQUARE (2010) FOURSQUARE (2011) FOURSQUARE (2012)


SLIDING NAVIGATION: REPLACING TAB BARS ENTIRELY

FACEBOOK PATH YAHOO AXIS YOUTUBE

(HIDDEN NAVIGATION ASSUMES SOPHISTICATED USERS)


TOUCHES ARE MORE
EXPENSIVE THAN
MOUSE CLICKS


THE THUMB IS NOT A PRECISION INSTRUMENT


SCOOPLE

SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREEN


FACEBOOK PATH



PATH (IOS)
VERSION 1
EARLY 2011



APPS ARE NOT WEBSITES


SOUTHWEST AIRLINES IPHONE APP
(AUGUST 2012)

EXPEDIA HOTELS IPHONE APP
(AUGUST 2012)

NAVIGATION:
THINK TREE, NOT WEB


MOBILE SCREENS HAVE VISIBLE TRANSITIONS,
AND CAN’T INTERCONNECT RANDOMLY LIKE THE WEB


“DRILL DOWN”,
NOT “LINK TO”


...BETTER YET, DON’T
DRILL DOWN AT ALL


2009: WEB FIRST
2011: MOBILE FIRST
2013: MOBILE ONLY?


LEVERAGE EXISTING
USER KNOWLEDGE


ANYTHING FACEBOOK DOES IS
AUTOMATICALLY A UI CONVENTION


ASSUME NOBODY
READS ANYTHING


ASSUME NOBODY READS ANYTHING

CALVETICA (2012)

ASSUME NOBODY READS ANYTHING

(EXCEPT IN JAPAN)

STRIVE FOR
ZERO CONFIGURATION


DO THE RIGHT THING


MOBIMILEAGE:
THE BATTLE FOR ZERO CONFIGURATION

NOT THE RIGHT THING:

SET ACCURACY

LOW HIGH

NOTE TO USER:
HIGHER ACCURACY REDUCES
BATTERY LIFE


HOW TO THINK
CROSS-PLATFORM


CUSTOM UI SHARED BETWEEN IOS AND ANDROID

FACEBOOK (IPHONE) FACEBOOK (ANDROID)


CUSTOM UI SHARED BETWEEN IOS AND ANDROID

SQUARE (IOS) PATH (IOS)
SQUARE (ANDROID) PATH (ANDROID)


DUPLICATING IPHONE UI ON ANDROID,
WITH MINOR PLATFORM-SPECIFIC CHANGES

FOURSQUARE (IOS) FOURSQUARE (ANDROID)

...BUT WINDOWS PHONE DEMANDS A DIFFERENT APPROACH

FOURSQUARE (IOS) FOURSQUARE (ANDROID) FOURSQUARE (WINDOWS PHONE)


WINDOWS PHONE: RADICAL MINIMALISM IN UI DESIGN


MICROSOFT OPPOSES SKEUOMORPHIC INTERFACES

FIND MY FRIENDS (IOS)
MESSAGING & SETTINGS (WINDOWS PHONE)
UI CHROME IS ELIMINATED: TOUCH CONTENT DIRECTLY
IF BUTTONS MUST EXIST, THEY ARE FLAT RECTANGLES
NO SHADOWS!!

“LIVE TILES” ALLOW APPS TO
ANIMATE INFORMATION ON HOME SCREEN

CENTRAL PRINCIPLE IS “GLANCEABILITY”

A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE”

KINDLE SKYPE TWITTER


A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE”

NEW YORK TIMES


PORTING FROM IOS
TO WINDOWS PHONE

MOBIPARK (IOS)

MOBIPARK
(WINDOWS PHONE)


THANKS!

CHIA HWU, CEO
CHIA@QUBOP.COM
TWITTER: @CHIAH

EVAN KIRCHHOFF, CTO
EVAN@QUBOP.COM
TWITTER: @THEEVANK

WWW.QUBOP.COM
TWITTER: @QUBOPINC

Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone

Similaire à Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone (20)

Dernier

Dernier (20)

Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone