• Save
Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 3,463 views
Uploaded on

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),......

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Hi, I really like this presentation. It gives us a great view on what are the essentials in app design an shows how fast it is changing. Great slides.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,463
On Slideshare
3,450
From Embeds
13
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
1
Likes
14

Embeds 13

https://twitter.com 6
http://pinterest.com 3
http://www.linkedin.com 2
http://www.pinterest.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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, 2012OCT 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: @QUBOPINCOCT 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 2012OCT 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 PERIODOCT 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 BOCT 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.COMOCT 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 PERMANENTOCT 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 SUPPORTOCT 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’ LAPSOCT 3, 2012 - WWW.QUBOP.COM
  • 18. JANUARY 2012: ANDROID TABLET DEFRAGMENTATION #1 #2 7” SCREENS @ 600 X 1024, RUNNING ANDROID 2.XOCT 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.0OCT 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 1280OCT 3, 2012 - WWW.QUBOP.COM
  • 21. DESIGN FOR USE CASES, NOT HARDWAREOCT 3, 2012 - WWW.QUBOP.COM
  • 22. PORTRAIT AND LANDSCAPE ARE DIFFERENT DEVICESOCT 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, HOSPITALITYOCT 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 MONTHSOCT 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 SCVNGROCT 3, 2012 - WWW.QUBOP.COM
  • 29. DEATH OF THE ICON GRID (LATE 2011) FACEBOOK LINKEDINOCT 3, 2012 - WWW.QUBOP.COM
  • 30. PULL TO REFRESH: A NON-APPLE CONVENTION (SINCE 2010) TWITTER BOXCAR FACEBOOK SEESMIC MESSENGEROCT 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) COLOROCT 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 CLICKSOCT 3, 2012 - WWW.QUBOP.COM
  • 38. THE THUMB IS NOT A PRECISION INSTRUMENTOCT 3, 2012 - WWW.QUBOP.COM
  • 39. SCOOPLE SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREENOCT 3, 2012 - WWW.QUBOP.COM
  • 40. FACEBOOK PATH SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREENOCT 3, 2012 - WWW.QUBOP.COM
  • 41. PATH (IOS) VERSION 1 EARLY 2011 SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREENOCT 3, 2012 - WWW.QUBOP.COM
  • 42. APPS ARE NOT WEBSITESOCT 3, 2012 - WWW.QUBOP.COM
  • 43. (AUG 2012)
  • 44. (JAN 2012)
  • 45. SOUTHWEST AIRLINES IPHONE APP (AUGUST 2012)OCT 3, 2012 - WWW.QUBOP.COM
  • 46. EXPEDIA HOTELS IPHONE APP (AUGUST 2012)OCT 3, 2012 - WWW.QUBOP.COM
  • 47. NAVIGATION: THINK TREE, NOT WEBOCT 3, 2012 - WWW.QUBOP.COM
  • 48. MOBILE SCREENS HAVE VISIBLE TRANSITIONS, AND CAN’T INTERCONNECT RANDOMLY LIKE THE WEBOCT 3, 2012 - WWW.QUBOP.COM
  • 49. “DRILL DOWN”, NOT “LINK TO”OCT 3, 2012 - WWW.QUBOP.COM
  • 50. ...BETTER YET, DON’T DRILL DOWN AT ALLOCT 3, 2012 - WWW.QUBOP.COM
  • 51. 2009: WEB FIRST 2011: MOBILE FIRST 2013: MOBILE ONLY?OCT 3, 2012 - WWW.QUBOP.COM
  • 52. LEVERAGE EXISTING USER KNOWLEDGEOCT 3, 2012 - WWW.QUBOP.COM
  • 53. ANYTHING FACEBOOK DOES IS AUTOMATICALLY A UI CONVENTIONOCT 3, 2012 - WWW.QUBOP.COM
  • 54. ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  • 55. ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  • 56. ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  • 57. CALVETICA (2012) ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  • 58. (EXCEPT IN JAPAN)OCT 3, 2012 - WWW.QUBOP.COM
  • 59. STRIVE FOR ZERO CONFIGURATIONOCT 3, 2012 - WWW.QUBOP.COM
  • 60. DO THE RIGHT THINGOCT 3, 2012 - WWW.QUBOP.COM
  • 61. MOBIMILEAGE: THE BATTLE FOR ZERO CONFIGURATIONOCT 3, 2012 - WWW.QUBOP.COM
  • 62. NOT THE RIGHT THING: SET ACCURACY LOW HIGH NOTE TO USER: HIGHER ACCURACY REDUCES BATTERY LIFEOCT 3, 2012 - WWW.QUBOP.COM
  • 63. HOW TO THINK CROSS-PLATFORMOCT 3, 2012 - WWW.QUBOP.COM
  • 64. CUSTOM UI SHARED BETWEEN IOS AND ANDROID FACEBOOK (IPHONE) FACEBOOK (ANDROID)OCT 3, 2012 - WWW.QUBOP.COM
  • 65. CUSTOM UI SHARED BETWEEN IOS AND ANDROID SQUARE (IOS) PATH (IOS) SQUARE (ANDROID) PATH (ANDROID)OCT 3, 2012 - WWW.QUBOP.COM
  • 66. DUPLICATING IPHONE UI ON ANDROID, WITH MINOR PLATFORM-SPECIFIC CHANGES FOURSQUARE (IOS) FOURSQUARE (ANDROID)OCT 3, 2012 - WWW.QUBOP.COM
  • 67. ...BUT WINDOWS PHONE DEMANDS A DIFFERENT APPROACH FOURSQUARE (IOS) FOURSQUARE (ANDROID) FOURSQUARE (WINDOWS PHONE)OCT 3, 2012 - WWW.QUBOP.COM
  • 68. WINDOWS PHONE: RADICAL MINIMALISM IN UI DESIGNOCT 3, 2012 - WWW.QUBOP.COM
  • 69. 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
  • 70. “LIVE TILES” ALLOW APPS TO ANIMATE INFORMATION ON HOME SCREEN CENTRAL PRINCIPLE IS “GLANCEABILITY”OCT 3, 2012 - WWW.QUBOP.COM
  • 71. A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE” KINDLE SKYPE TWITTEROCT 3, 2012 - WWW.QUBOP.COM
  • 72. A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE” NEW YORK TIMESOCT 3, 2012 - WWW.QUBOP.COM
  • 73. PORTING FROM IOS TO WINDOWS PHONE MOBIPARK (IOS) MOBIPARK (WINDOWS PHONE)OCT 3, 2012 - WWW.QUBOP.COM
  • 74. THANKS! CHIA HWU, CEO CHIA@QUBOP.COM TWITTER: @CHIAH EVAN KIRCHHOFF, CTO EVAN@QUBOP.COM TWITTER: @THEEVANKWWW.QUBOP.COM TWITTER: @QUBOPINC