Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and 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

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

  1. 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. 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. 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. 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. 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. 6. ANDROID: STILL MOSTLY PHONES Phones: 95% Tablets: ~5%OCT 3, 2012 - WWW.QUBOP.COM
  7. 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. 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. 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. 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. 11. MICROSOFT: NOW BUILDING MOBILE HARDWARE MICROSOFT SURFACE TABLET (ESTIMATED LATE 2012)OCT 3, 2012 - WWW.QUBOP.COM
  12. 12. ASSUME THAT FRAGMENTATION IS PERMANENTOCT 3, 2012 - WWW.QUBOP.COM
  13. 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. 14. ANDROID: UNPREDICTABLE FORM FACTORS
  15. 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. 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. 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. 18. JANUARY 2012: ANDROID TABLET DEFRAGMENTATION #1 #2 7” SCREENS @ 600 X 1024, RUNNING ANDROID 2.XOCT 3, 2012 - WWW.QUBOP.COM
  19. 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. 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. 21. DESIGN FOR USE CASES, NOT HARDWAREOCT 3, 2012 - WWW.QUBOP.COM
  22. 22. PORTRAIT AND LANDSCAPE ARE DIFFERENT DEVICESOCT 3, 2012 - WWW.QUBOP.COM
  23. 23. MOST CONTENT HAS ONE NATURAL ORIENTATION AUTO-ROTATION NEVER REALLY WORKED (EXCEPT FOR DOCUMENT HANDLING)OCT 3, 2012 - WWW.QUBOP.COM
  24. 24. A PLATFORM’S DEFAULT ORIENTATION SUGGESTS ITS USE CASES PORTRAIT = LEGAL, MEDICAL, HOSPITALITYOCT 3, 2012 - WWW.QUBOP.COM
  25. 25. WINDOWS TABLETS ALSO SUPPORT PORTRAIT (BUT THIS IS RARELY SHOWN)OCT 3, 2012 - WWW.QUBOP.COM
  26. 26. CONVENTIONS EVOLVE EVERY SIX MONTHSOCT 3, 2012 - WWW.QUBOP.COM
  27. 27. STANDARD APPLE UI (2007)OCT 3, 2012 - WWW.QUBOP.COM
  28. 28. THE ICON GRID (EARLY 2011) FACEBOOK LINKEDIN YELP SCVNGROCT 3, 2012 - WWW.QUBOP.COM
  29. 29. DEATH OF THE ICON GRID (LATE 2011) FACEBOOK LINKEDINOCT 3, 2012 - WWW.QUBOP.COM
  30. 30. PULL TO REFRESH: A NON-APPLE CONVENTION (SINCE 2010) TWITTER BOXCAR FACEBOOK SEESMIC MESSENGEROCT 3, 2012 - WWW.QUBOP.COM
  31. 31. ...FINALLY ADOPTED BY APPLE (2012) MAIL (IOS 6)OCT 3, 2012 - WWW.QUBOP.COM
  32. 32. THE 5-TAB SOCIAL APP WITH CENTER ICON (2011) INSTAGRAM PATH (VERSION 1) COLOROCT 3, 2012 - WWW.QUBOP.COM
  33. 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. 34. A TREND TOWARDS FLATTER, SIMPLER UI (2012) INSTAGRAM (2011) INSTAGRAM (2012) PINTEREST (2011) PINTEREST (2012)OCT 3, 2012 - WWW.QUBOP.COM
  35. 35. FOURSQUARE (2010) FOURSQUARE (2011) FOURSQUARE (2012)OCT 3, 2012 - WWW.QUBOP.COM
  36. 36. SLIDING NAVIGATION: REPLACING TAB BARS ENTIRELY FACEBOOK PATH YAHOO AXIS YOUTUBE (HIDDEN NAVIGATION ASSUMES SOPHISTICATED USERS)OCT 3, 2012 - WWW.QUBOP.COM
  37. 37. TOUCHES ARE MORE EXPENSIVE THAN MOUSE CLICKSOCT 3, 2012 - WWW.QUBOP.COM
  38. 38. THE THUMB IS NOT A PRECISION INSTRUMENTOCT 3, 2012 - WWW.QUBOP.COM
  39. 39. SCOOPLE SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREENOCT 3, 2012 - WWW.QUBOP.COM
  40. 40. FACEBOOK PATH SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREENOCT 3, 2012 - WWW.QUBOP.COM
  41. 41. PATH (IOS) VERSION 1 EARLY 2011 SHOWING ADDITIONAL CONTENT WITHOUT LEAVING THE SCREENOCT 3, 2012 - WWW.QUBOP.COM
  42. 42. APPS ARE NOT WEBSITESOCT 3, 2012 - WWW.QUBOP.COM
  43. 43. (AUG 2012)
  44. 44. (JAN 2012)
  45. 45. SOUTHWEST AIRLINES IPHONE APP (AUGUST 2012)OCT 3, 2012 - WWW.QUBOP.COM
  46. 46. EXPEDIA HOTELS IPHONE APP (AUGUST 2012)OCT 3, 2012 - WWW.QUBOP.COM
  47. 47. NAVIGATION: THINK TREE, NOT WEBOCT 3, 2012 - WWW.QUBOP.COM
  48. 48. MOBILE SCREENS HAVE VISIBLE TRANSITIONS, AND CAN’T INTERCONNECT RANDOMLY LIKE THE WEBOCT 3, 2012 - WWW.QUBOP.COM
  49. 49. “DRILL DOWN”, NOT “LINK TO”OCT 3, 2012 - WWW.QUBOP.COM
  50. 50. ...BETTER YET, DON’T DRILL DOWN AT ALLOCT 3, 2012 - WWW.QUBOP.COM
  51. 51. 2009: WEB FIRST 2011: MOBILE FIRST 2013: MOBILE ONLY?OCT 3, 2012 - WWW.QUBOP.COM
  52. 52. LEVERAGE EXISTING USER KNOWLEDGEOCT 3, 2012 - WWW.QUBOP.COM
  53. 53. ANYTHING FACEBOOK DOES IS AUTOMATICALLY A UI CONVENTIONOCT 3, 2012 - WWW.QUBOP.COM
  54. 54. ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  55. 55. ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  56. 56. ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  57. 57. CALVETICA (2012) ASSUME NOBODY READS ANYTHINGOCT 3, 2012 - WWW.QUBOP.COM
  58. 58. (EXCEPT IN JAPAN)OCT 3, 2012 - WWW.QUBOP.COM
  59. 59. STRIVE FOR ZERO CONFIGURATIONOCT 3, 2012 - WWW.QUBOP.COM
  60. 60. DO THE RIGHT THINGOCT 3, 2012 - WWW.QUBOP.COM
  61. 61. MOBIMILEAGE: THE BATTLE FOR ZERO CONFIGURATIONOCT 3, 2012 - WWW.QUBOP.COM
  62. 62. NOT THE RIGHT THING: SET ACCURACY LOW HIGH NOTE TO USER: HIGHER ACCURACY REDUCES BATTERY LIFEOCT 3, 2012 - WWW.QUBOP.COM
  63. 63. HOW TO THINK CROSS-PLATFORMOCT 3, 2012 - WWW.QUBOP.COM
  64. 64. CUSTOM UI SHARED BETWEEN IOS AND ANDROID FACEBOOK (IPHONE) FACEBOOK (ANDROID)OCT 3, 2012 - WWW.QUBOP.COM
  65. 65. CUSTOM UI SHARED BETWEEN IOS AND ANDROID SQUARE (IOS) PATH (IOS) SQUARE (ANDROID) PATH (ANDROID)OCT 3, 2012 - WWW.QUBOP.COM
  66. 66. DUPLICATING IPHONE UI ON ANDROID, WITH MINOR PLATFORM-SPECIFIC CHANGES FOURSQUARE (IOS) FOURSQUARE (ANDROID)OCT 3, 2012 - WWW.QUBOP.COM
  67. 67. ...BUT WINDOWS PHONE DEMANDS A DIFFERENT APPROACH FOURSQUARE (IOS) FOURSQUARE (ANDROID) FOURSQUARE (WINDOWS PHONE)OCT 3, 2012 - WWW.QUBOP.COM
  68. 68. WINDOWS PHONE: RADICAL MINIMALISM IN UI DESIGNOCT 3, 2012 - WWW.QUBOP.COM
  69. 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. 70. “LIVE TILES” ALLOW APPS TO ANIMATE INFORMATION ON HOME SCREEN CENTRAL PRINCIPLE IS “GLANCEABILITY”OCT 3, 2012 - WWW.QUBOP.COM
  71. 71. A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE” KINDLE SKYPE TWITTEROCT 3, 2012 - WWW.QUBOP.COM
  72. 72. A TENDENCY TOWARDS MICROSOFT “HOUSE STYLE” NEW YORK TIMESOCT 3, 2012 - WWW.QUBOP.COM
  73. 73. PORTING FROM IOS TO WINDOWS PHONE MOBIPARK (IOS) MOBIPARK (WINDOWS PHONE)OCT 3, 2012 - WWW.QUBOP.COM
  74. 74. THANKS! CHIA HWU, CEO CHIA@QUBOP.COM TWITTER: @CHIAH EVAN KIRCHHOFF, CTO EVAN@QUBOP.COM TWITTER: @THEEVANKWWW.QUBOP.COM TWITTER: @QUBOPINC

×