Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone
15 likes4,943 views
The document discusses essential mobile design principles and best practices for iOS, Android, and Windows Phone, emphasizing the importance of understanding user behavior and platform-specific characteristics. It highlights market statistics and shifts in design trends, including the move toward simpler interfaces and the necessity of adapting UI to various screen sizes and user contexts. Key considerations for mobile app developers include designing for usability, minimizing user input requirements, and leveraging existing knowledge from widely-used apps.
More Related Content
Similar to Essential Mobile Design: Interface Principles and Best Practices for iOS, Android and Windows Phone (20)
![Best Web Design Agencies in Europe [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/webdesignagenciesineurope-250828070853-e4b3bd03-thumbnail.jpg?width=560&fit=bounds)
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
- 2. HELLO! CHIA HWU, CEO [email protected] TWITTER: @CHIAH EVAN KIRCHHOFF, CTO [email protected] 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 [email protected] TWITTER: @CHIAH EVAN KIRCHHOFF, CTO [email protected] TWITTER: @THEEVANK WWW.QUBOP.COM TWITTER: @QUBOPINC