1. 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

2. HELLO!
CHIA HWU, CEO
CHIA@QUBOP.COM
TWITTER: @CHIAH
EVAN KIRCHHOFF, CTO
EVAN@QUBOP.COM
TWITTER: @THEEVANK
WWW.QUBOP.COM
TWITTER: @QUBOPINC
OCT 3, 2012 - WWW.QUBOP.COM

3. 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)
OCT 3, 2012 - WWW.QUBOP.COM

4. 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

5. 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

6. ANDROID: STILL MOSTLY PHONES
Phones: 95% Tablets: ~5%
OCT 3, 2012 - WWW.QUBOP.COM

7. MOST ANDROID DEVICES HAVE OBSOLETE OS
JUNE 2012: PERCENTAGE OF DEVICES ACCESSING GOOGLE PLAY IN PREVIOUS 14-DAY PERIOD
OCT 3, 2012 - WWW.QUBOP.COM

8. 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
OCT 3, 2012 - WWW.QUBOP.COM

9. MOBILE HARDWARE PROFIT SHARE:
99% APPLE & SAMSUNG
100%
75%
50%
25%
2007 2008 2009 2010 2011 2012
SOURCE: ASYMCO.COM
OCT 3, 2012 - WWW.QUBOP.COM

10. HARDWARE IS NOW MORE PROFITABLE THAN SOFTWARE
MICROSOFT: APPLE:
$78 $195
AVERAGE PROFIT PER PC AVERAGE PROFIT PER IPAD
(WINDOWS + OFFICE)
OCT 3, 2012 - WWW.QUBOP.COM

11. MICROSOFT: NOW BUILDING MOBILE HARDWARE
MICROSOFT SURFACE TABLET (ESTIMATED LATE 2012)
OCT 3, 2012 - WWW.QUBOP.COM

12. ASSUME THAT
FRAGMENTATION IS
PERMANENT
OCT 3, 2012 - WWW.QUBOP.COM

13. 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)
OCT 3, 2012 - WWW.QUBOP.COM

14. ANDROID: UNPREDICTABLE FORM FACTORS

15. IOS 2012: SCREENS MULTIPLYING
ASPECT
RATIO
3:4
ASPECT ASPECT
RATIO RATIO
2:3 9:16
SEPTEMBER 2012: 3 SCREENS TO SUPPORT
OCT 3, 2012 - WWW.QUBOP.COM

16. 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?
OCT 3, 2012 - WWW.QUBOP.COM

17. 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
OCT 3, 2012 - WWW.QUBOP.COM

18. JANUARY 2012: ANDROID TABLET DEFRAGMENTATION
#1 #2
7” SCREENS @ 600 X 1024, RUNNING ANDROID 2.X
OCT 3, 2012 - WWW.QUBOP.COM

19. 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
OCT 3, 2012 - WWW.QUBOP.COM

20. WINDOWS PHONE 8: THREE SCREENS
WP 7: 480 x 800 WP 8: 480 x 800, 768 x 1280, 720 x 1280
OCT 3, 2012 - WWW.QUBOP.COM

21. DESIGN FOR USE CASES,
NOT HARDWARE
OCT 3, 2012 - WWW.QUBOP.COM

22. PORTRAIT AND
LANDSCAPE ARE
DIFFERENT DEVICES
OCT 3, 2012 - WWW.QUBOP.COM

23. MOST CONTENT HAS ONE NATURAL ORIENTATION
AUTO-ROTATION NEVER REALLY WORKED
(EXCEPT FOR DOCUMENT HANDLING)
OCT 3, 2012 - WWW.QUBOP.COM

24. A PLATFORM’S DEFAULT ORIENTATION
SUGGESTS ITS USE CASES
PORTRAIT = LEGAL, MEDICAL, HOSPITALITY
OCT 3, 2012 - WWW.QUBOP.COM

25. WINDOWS TABLETS ALSO SUPPORT PORTRAIT
(BUT THIS IS RARELY SHOWN)
OCT 3, 2012 - WWW.QUBOP.COM

26. CONVENTIONS EVOLVE
EVERY SIX MONTHS
OCT 3, 2012 - WWW.QUBOP.COM

27. STANDARD APPLE UI (2007)
OCT 3, 2012 - WWW.QUBOP.COM

28. THE ICON GRID (EARLY 2011)
FACEBOOK LINKEDIN YELP SCVNGR
OCT 3, 2012 - WWW.QUBOP.COM

29. DEATH OF THE ICON GRID (LATE 2011)
FACEBOOK LINKEDIN
OCT 3, 2012 - WWW.QUBOP.COM

30. PULL TO REFRESH: A NON-APPLE CONVENTION (SINCE 2010)
TWITTER BOXCAR FACEBOOK SEESMIC
MESSENGER
OCT 3, 2012 - WWW.QUBOP.COM

31. ...FINALLY ADOPTED BY APPLE (2012)
MAIL (IOS 6)
OCT 3, 2012 - WWW.QUBOP.COM

32. THE 5-TAB SOCIAL APP WITH CENTER ICON (2011)
INSTAGRAM PATH (VERSION 1) COLOR
OCT 3, 2012 - WWW.QUBOP.COM

33. HIPSTER SOUNDTRACKING FOODSPOTTING SOCIALCAM
THE CENTER TAB ANSWERED THE QUESTION,
“WHAT DO I DO WITH THIS APP?”
OCT 3, 2012 - WWW.QUBOP.COM

34. A TREND TOWARDS FLATTER, SIMPLER UI (2012)
INSTAGRAM (2011) INSTAGRAM (2012) PINTEREST (2011) PINTEREST (2012)
OCT 3, 2012 - WWW.QUBOP.COM

35. FOURSQUARE (2010) FOURSQUARE (2011) FOURSQUARE (2012)
OCT 3, 2012 - WWW.QUBOP.COM

36. SLIDING NAVIGATION: REPLACING TAB BARS ENTIRELY
FACEBOOK PATH YAHOO AXIS YOUTUBE
(HIDDEN NAVIGATION ASSUMES SOPHISTICATED USERS)
OCT 3, 2012 - WWW.QUBOP.COM

37. TOUCHES ARE MORE
EXPENSIVE THAN
MOUSE CLICKS
OCT 3, 2012 - WWW.QUBOP.COM

38. THE THUMB IS NOT A PRECISION INSTRUMENT
OCT 3, 2012 - WWW.QUBOP.COM

39. SCOOPLE
SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREEN
OCT 3, 2012 - WWW.QUBOP.COM

40. FACEBOOK PATH
SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREEN
OCT 3, 2012 - WWW.QUBOP.COM

41. PATH (IOS)
VERSION 1
EARLY 2011
SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREEN
OCT 3, 2012 - WWW.QUBOP.COM

42. APPS ARE NOT WEBSITES
OCT 3, 2012 - WWW.QUBOP.COM

43. (AUG 2012)

44. (JAN 2012)

45. SOUTHWEST AIRLINES IPHONE APP
(AUGUST 2012)
OCT 3, 2012 - WWW.QUBOP.COM

47. EXPEDIA HOTELS IPHONE APP
(AUGUST 2012)
OCT 3, 2012 - WWW.QUBOP.COM

48. NAVIGATION:
THINK TREE, NOT WEB
OCT 3, 2012 - WWW.QUBOP.COM

49. MOBILE SCREENS HAVE VISIBLE TRANSITIONS,
AND CAN’T INTERCONNECT RANDOMLY LIKE THE WEB
OCT 3, 2012 - WWW.QUBOP.COM

50. “DRILL DOWN”,
NOT “LINK TO”
OCT 3, 2012 - WWW.QUBOP.COM

51. ...BETTER YET, DON’T
DRILL DOWN AT ALL
OCT 3, 2012 - WWW.QUBOP.COM

52. 2009: WEB FIRST
2011: MOBILE FIRST
2013: MOBILE ONLY?
OCT 3, 2012 - WWW.QUBOP.COM

53. LEVERAGE EXISTING
USER KNOWLEDGE
OCT 3, 2012 - WWW.QUBOP.COM

54. ANYTHING FACEBOOK DOES IS
AUTOMATICALLY A UI CONVENTION
OCT 3, 2012 - WWW.QUBOP.COM

55. ASSUME NOBODY
READS ANYTHING
OCT 3, 2012 - WWW.QUBOP.COM

56. ASSUME NOBODY READS ANYTHING
OCT 3, 2012 - WWW.QUBOP.COM

57. ASSUME NOBODY READS ANYTHING
OCT 3, 2012 - WWW.QUBOP.COM

58. CALVETICA (2012)
ASSUME NOBODY READS ANYTHING
OCT 3, 2012 - WWW.QUBOP.COM

59. (EXCEPT IN JAPAN)
OCT 3, 2012 - WWW.QUBOP.COM

60. STRIVE FOR
ZERO CONFIGURATION
OCT 3, 2012 - WWW.QUBOP.COM

61. DO THE RIGHT THING
OCT 3, 2012 - WWW.QUBOP.COM

62. MOBIMILEAGE:
THE BATTLE FOR ZERO CONFIGURATION
OCT 3, 2012 - WWW.QUBOP.COM

63. NOT THE RIGHT THING:
SET ACCURACY
LOW HIGH
NOTE TO USER:
HIGHER ACCURACY REDUCES
BATTERY LIFE
OCT 3, 2012 - WWW.QUBOP.COM

64. HOW TO THINK
CROSS-PLATFORM
OCT 3, 2012 - WWW.QUBOP.COM

65. CUSTOM UI SHARED BETWEEN IOS AND ANDROID
FACEBOOK (IPHONE) FACEBOOK (ANDROID)
OCT 3, 2012 - WWW.QUBOP.COM

66. CUSTOM UI SHARED BETWEEN IOS AND ANDROID
SQUARE (IOS) PATH (IOS)
SQUARE (ANDROID) PATH (ANDROID)
OCT 3, 2012 - WWW.QUBOP.COM

67. DUPLICATING IPHONE UI ON ANDROID,
WITH MINOR PLATFORM-SPECIFIC CHANGES
FOURSQUARE (IOS) FOURSQUARE (ANDROID)
OCT 3, 2012 - WWW.QUBOP.COM

68. ...BUT WINDOWS PHONE DEMANDS A DIFFERENT APPROACH
FOURSQUARE (IOS) FOURSQUARE (ANDROID) FOURSQUARE (WINDOWS PHONE)
OCT 3, 2012 - WWW.QUBOP.COM

69. WINDOWS PHONE: RADICAL MINIMALISM IN UI DESIGN
OCT 3, 2012 - WWW.QUBOP.COM

70. 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!!
OCT 3, 2012 - WWW.QUBOP.COM

71. “LIVE TILES” ALLOW APPS TO
ANIMATE INFORMATION ON HOME SCREEN
CENTRAL PRINCIPLE IS “GLANCEABILITY”
OCT 3, 2012 - WWW.QUBOP.COM

72. A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE”
KINDLE SKYPE TWITTER
OCT 3, 2012 - WWW.QUBOP.COM

73. A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE”
NEW YORK TIMES
OCT 3, 2012 - WWW.QUBOP.COM

74. PORTING FROM IOS
TO WINDOWS PHONE
MOBIPARK (IOS)
MOBIPARK
(WINDOWS PHONE)
OCT 3, 2012 - WWW.QUBOP.COM

75. THANKS!
CHIA HWU, CEO
CHIA@QUBOP.COM
TWITTER: @CHIAH
EVAN KIRCHHOFF, CTO
EVAN@QUBOP.COM
TWITTER: @THEEVANK
WWW.QUBOP.COM
TWITTER: @QUBOPINC