This presentation from late 2012 surveys the current mobile landscape, discusses the UI and UX principles behind the major apps on the most rapidly growing platforms (iOS, Android, Windows Phone), and gives you practical, user-centered tips for designing your mobile projects or refining your current apps.
Questions or comments? Contact us at info@qubop.com
Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone
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
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
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
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