1. Mobile Application Design Philosophies

2. Hi. Im Ronnie. 3. Hi. Im Ronnie.Technical Director at R/GA 4. Hi. Im Ronnie.Technical Director at R/GA @ronnieliew 5. Nike+ GPS 6. Nike+ GPS Nike Lab Merry Mix It StyleMixer Gift Finder Gift Globe My Kia Soul Neuvo 7. Todays Talk 8. Todays TalkTopic & Terminology 9. Todays TalkTopic & Terminology Mobile landscape 10. Todays TalkTopic & Terminology Mobile landscape Guidelines 11. Denition of Mobile application 12. Compact software programs that perform specic tasks for the mobile user.A software application that runs in a handheld device such as a smartphone or other portable device. 13. Native AppMobile Web App 14. Native Mobile WebInternet AccessNot required Required PerformanceHardware access OS access Hardware & Platform dependent InstallationMust be installedURL linkDistribution App store Not required Updates Reinstallation Simple 15. Developing mobile apps is not new. 16. Challenges+ Opportunities 17. Fragmented landscape 18. Guidelines to navigatethis maze. 19. How not to do mobile applications 20. #1 Dont assume a need. 21. You need to have one. Really? 22. You need to have one. Really?Use case of mobile apps 23. You need to have one. Really?Use case of mobile appsSolve a real problem 24. #2 Dont be short-sighted. 25. Its not an after-thought or add-on 26. Its not an after-thought or add-onPlan ahead or at least consider about it. 27. Its not an after-thought or add-onPlan ahead or at least consider about it.Plan for exibility 28. Its not an after-thought or add-onPlan ahead or at least consider about it.Plan for exibilityPortable data 29. #3 Dont trivialize choice of platforms. 30. Platforms that your users on 31. Platforms that your users onOther major players in the market 32. Platforms that your users onOther major players in the marketOnly installed apps get used 33. 1st Quarter 2010 Worldwide Smartphone Market Share50% Market Share25%0%SymbianRIM iOS Android Windows LinuxOthers MobileSource: Gartner (May 2010)Gartner Says Worldwide Mobile Phone Sales Grew 17 Per Cent in First Quarter 2010http://www.gartner.com/it/page.jsp?id=1372013 34. March 2010 Mobile Platform Market Share: iOS vs Andriod (By region) USUK IndiaChinaHong Kong TaiwanMalaysia SingaporeThailand Australia 0% 25%50% 75%100%iOSAndroidAll others Source: AdMobAdMob Mobile Metrics Report March April May 2010AdMob Mobile Metrics Report - Southeast Asia Q1 2010 35. #4 Dont gloss overbits & bytes. 36. Native or mobile web app 37. Native or mobile web appUnderstand the limitations 38. Native or mobile web appUnderstand the limitationsTechnical approach is critical & has repercussion 39. #5Dont go chasing waterfall 40. Waterfall approach is clumsy & high-risk 41. Waterfall approach is clumsy & high-riskDo paper prototyping 42. Waterfall approach is clumsy & high-riskDo paper prototypingBuild quick prototypes 43. Waterfall approach is clumsy & high-riskDo paper prototypingBuild quick prototypesTest theories quickly 44. #6 Dont assume browsersare equal. 45. Mobile browsers are not desktop browsers 46. Mobile browsers are not desktop browsersFlash plugin not available on iOS 47. Mobile browsers are not desktop browsersFlash plugin not available on iOSMedia format support 48. Mobile browsers are not desktop browsersFlash plugin not available on iOSMedia format support 49. Picnik Photo editing application 50. VS. 51. VS. 52. YouTube Popular social video sharing site 53. #7 Dont downplay user experience. 54. ... mobile-optimized experiences produced an average 75% higher rate of engagements per visit for mobile user. Source: Ed Hewett, OmnitureDo Mobile-optimized Experiences Improve Engagementon Super Phones and Tablets like the iPad? 55. Optimize for mobile experience 56. Optimize for mobile experienceSimple, clear navigation - Pick key functions that are critical 57. Optimize for mobile experienceSimple, clear navigation - Pick key functions that are criticalLess is more 58. Online photo management and sharing application 59. VS. 60. VS. 61. VS. 62. VS. 63. Amazon.comOnline shopping site 64. VS. 65. VS. 66. VS. 67. VS. 68. #8 Dont be online only. 69. Some of us are WiFi only 70. Some of us are WiFi onlyCache retrieved data 71. Some of us are WiFi onlyCache retrieved dataShow the last-known state 72. Some of us are WiFi onlyCache retrieved dataShow the last-known statePass the NYC subway test 73. Gothere.sg iPhone application for getting around in Singapore 74. Gothere.sg 75. Gothere.sg 76. Gothere.sg Warns the user that there is no Internet connection but doesntstop the user from using it. 77. Gothere.sg Alternate routes are cached and still accessible to the user whenthe app is ofine. 78. Gothere.sg Alternate route with cached mapimages 79. FlipboardiPad application - magazine styled visualsfor your social feeds 80. Must be connected to use 81. Must be connected to useNo caching of previous data 82. Must be connected to useNo caching of previous dataWhy make it so hard ? 83. #9 Dont favour brandingover users. 84. Avoid displaying an About window, a splash screen, or providing any other type of startupexperience that prevents people from using your application immediately Source: Apple iOS Reference LibraryiPhone Human Interface Guidelines 85. Avoid favoring branding over user experience 86. Avoid favoring branding over user experienceSplash screens are evil 87. ... I don't need three splash screens telling me I'm playing Scrabble, made by EA, and EveryWord Counts... I want to load the game and play, not wait through their branding... 88. #10 Dont load too much too fast 89. Short attention span 90. Short attention spanIntense period of activity 91. Short attention spanIntense period of activityLoad in small chunks & only what is needed 92. Short attention spanIntense period of activityLoad in small chunks & only what is neededInterruptible 93. #11 Dont re-invent the wheel. 94. Convention works 95. Convention worksForget that special revolutionary drop-down menu 96. Convention worksForget that special revolutionary drop-down menuBe the user - Dont try technology for technology 97. Source: Smashing MagazineiPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/ 98. Source: Smashing MagazineiPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/ 99. VS. Source: Smashing MagazineiPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/ 100. VS. Source: Smashing MagazineiPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/ 101. #12 Dont do roll-overs. 102. Roll-overs are so 1990s 103. Roll-overs are so 1990sExtra step 104. Roll-overs are so 1990sExtra stepAnd it doesnt work. Really. No cursor. 105. #13Dont forget to guide users. 106. Guide your user along 107. Guide your user alongLoading, updating in progress 108. Guide your user alongLoading, updating in progressDisplay user-friendly error messages 109. #14 Dont disrupt the experience. 110. Be gentle to the user 111. Be gentle to the userBuilt-in browsers 112. Be gentle to the userBuilt-in browsersInform & let the user decide 113. #15 Dont squeeeze the world in. 114. Average screen sizesbreach 2.5 inch markSource: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specications Database 2.5 = 6.35 cm 3.5 = 8.89cm 115. Average screen sizesbreach 2.5 inch mark 2.5 Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specications Database 2.5 = 6.35 cm 3.5 = 8.89cm 116. Average screen sizesbreach 2.5 inch mark 2.53.5 Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specications Database 2.5 = 6.35 cm 3.5 = 8.89cm 117. Physically tiny screen 118. Physically tiny screenAvoid pixel/small fonts 119. Physically tiny screenAvoid pixel/small fontsGive enough space 120. Physically tiny screenAvoid pixel/small fontsGive enough spaceAccount for accidental touches 121. Physically tiny screenAvoid pixel/small fontsGive enough spaceAccount for accidental touchesThink big: Bigger hit-area 122. #16 Dont make user type. 123. "Given the typical input limitations of a mobiledevice, the interface must as far as possibleminimize user input.Where possible, use selection lists, radio buttons and other controls that do not require typing." Source: Mobile Web Best Practice, W3C 124. "Although unavoidable in forms that need information form the user, avoid using text boxesand text areas as much as possible. Its difcult for the user to enter content into free text inputssuch as text boxes..."Source: Mobile Design and Development, Brian Fling 125. Tiny keyboard - typing sucks 126. Tiny keyboard - typing sucksYou need slender ngers 127. Tiny keyboard - typing sucksYou need slender ngersPre-populate what you can 128. Tiny keyboard - typing sucksYou need slender ngersPre-populate what you canGive options and let users pick / auto-complete 129. #17 Dont forget to test. 130. Always test with actual devices 131. Always test with actual devicesUsability testing 132. Always test with actual devicesUsability testingMoving in and out of WiFi zones 133. Always test with actual devicesUsability testingMoving in and out of WiFi zonesNo connectivity 134. Re-cap 135. Dont... 136. Dont... ... assume a need 137. Dont... ... assume a need... be short-sighted 138. Dont... ... assume a need... be short-sighted... trivialize choice of platform 139. Dont... ... assume a need... be short-sighted... trivialize choice of platform... gloss over bits & bytes 140. Dont... ... assume a need ... go chasing waterfall... be short-sighted... trivialize choice of platform... gloss over bits & bytes 141. Dont... ... assume a need ... go chasing waterfall... be short-sighted... assume browsers are equal... trivialize choice of platform... gloss over bits & bytes 142. Dont... ... assume a need ... go chasing waterfall... be short-sighted... assume browsers are equal... trivialize choice of platform ... downplay user experience... gloss over bits & bytes 143. Dont... ... assume a need ... go chasing waterfall... be short-sighted... assume browsers are equal... trivialize choice of platform ... downplay user experience... gloss over bits & bytes ... be online only 144. Dont... 145. Dont... ... favour branding over users 146. Dont... ... favour branding over users... load too much too fast 147. Dont... ... favour branding over users... load too much too fast... re-invent the wheel 148. Dont... ... favour branding over users... load too much too fast... re-invent the wheel... do roll-overs 149. Dont... ... favour branding over users... load too much too fast... re-invent the wheel... do roll-overs... forget to guide your users 150. Dont... ... favour branding over users ... disrupt the experience... load too much too fast... re-invent the wheel... do roll-overs... forget to guide your users 151. Dont... ... favour branding over users ... disrupt the experience... load too much too fast ... squeeze the world in... re-invent the wheel... do roll-overs... forget to guide your users 152. Dont... ... favour branding over users ... disrupt the experience... load too much too fast ... squeeze the world in... re-invent the wheel... make user type... do roll-overs... forget to guide your users 153. Dont... ... favour branding over users ... disrupt the experience... load too much too fast ... squeeze the world in... re-invent the wheel... make user type... do roll-overs... forget to test... forget to guide your users 154. Dont... ... favour branding over users ... disrupt the experience... load too much too fast ... squeeze the world in... re-invent the wheel... make user type... do roll-overs... forget to test... forget to guide your users 155. Thank You.Go build something. 156. References User-centered design of mobile solution (NAMAHN) http://www.namahn.com/resources/documents/note-MobileSolutions.pdfAdMob Mobile Metrics http://metrics.admob.comThe Best & Worst of the Mobile Web (mobiThinking) http://mobithinking.com/white-papers/best-and-worst-of-the-mobile-web Mobile Web Best Practices 1.0 (W3C) http://www.w3.org/TR/mobile-bp/ 157. References Automatic Form Filling on Mobile Devices http://www.medien.i.lmu.de/pubdb/publications/pub/deluca2007pmc/ deluca2007pmc.pdfMobile Design and Development (Brian Fling)