Mobile Application Design & Development
93 likes73,285 views
The document presents best practices for mobile application design and development, emphasizing the importance of understanding user needs, choosing the right platforms, and optimizing the user experience. Key points include avoiding common pitfalls such as assuming the necessity of an app, neglecting flexibility in design, and overloading users with information. It also highlights the significance of testing on actual devices and minimizing user input to enhance usability.
Mobile Application Design & Development
- 1. Mobile Application Design & Development
- 4. Hi. I’m Ronnie. Technical Director at R/GA
- 5. Hi. I’m Ronnie. Technical Director at R/GA @ronnieliew
- 6. Nike+ GPS
- 7. Nike+ GPS Nike Lab Gap Merry Mix It Gap StyleMixer Target Gift Finder Target Gift Globe My Kia Soul Neuvo
- 8. Today’s Talk
- 11. Today’s Talk Terminology Mobile Landscape Today How not to do mobile app
- 12. Terminology
- 14. Compact software programs that perform specific tasks for the mobile user. A software application that runs in a handheld device such as a smartphone or other portable device.
- 15. Native App Mobile Web App
- 16. Native Mobile Web Internet Access Not required Required Performance ✓ ✖ Hardware access ✓ ✖ OS access ✓ ✖ Hardware & Platform dependent ✓ ✖ Installation Must be installed URL link Distribution App store Not required Updates Reinstallation Simple
- 18. Developing mobile apps is not new.
- 19. Challenges + Opportunities
- 22. Guidelines to navigate this maze.
- 23. How not to do mobile applications
- 24. #1 Don’t assume a need.
- 26. You need to have one. Really?
- 27. You need to have one. Really? Use case of mobile apps
- 28. You need to have one. Really? Use case of mobile apps Solve a real problem
- 29. #2 Don’t be short-sighted.
- 31. It’s not an after-thought or add-on
- 32. It’s not an after-thought or add-on Plan ahead or at least consider about it.
- 33. It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility
- 34. It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility Portable data
- 35. #3 Don’t downplay choice of platforms.
- 37. Platforms that your users on
- 38. Platforms that your users on Other major players in the market
- 39. Platforms that your users on Other major players in the market Only installed apps get used
- 40. 1st Quarter 2010 Worldwide Smartphone Market Share 50% Market Share 25% 0% Symbian RIM iOS Android Windows Linux Others Mobile Source: Gartner (May 2010) Gartner Says Worldwide Mobile Phone Sales Grew 17 Per Cent in First Quarter 2010 http://www.gartner.com/it/page.jsp?id=1372013
- 41. March 2010 Mobile Platform Market Share: iOS vs Andriod (By region) US UK India China Hong Kong Taiwan Malaysia Singapore Thailand Australia 0% 25% 50% 75% 100% iOS Android All others Source: AdMob AdMob Mobile Metrics Report March April May 2010 AdMob Mobile Metrics Report - Southeast Asia Q1 2010
- 42. #4 Don’t gloss over bits & bytes.
- 44. Native or mobile web app
- 45. Native or mobile web app Understand the limitations
- 46. Native or mobile web app Understand the limitations Technical approach is critical & has repercussion
- 47. #5 Don’t go chasing waterfall
- 49. Waterfall approach is clumsy & high-risk
- 50. Waterfall approach is clumsy & high-risk Do paper prototyping
- 51. Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes
- 52. Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes Test theories quickly
- 53. #6 Don’t assume browsers are equal.
- 55. Mobile browsers are not desktop browsers
- 56. Mobile browsers are not desktop browsers Flash plugin not available on iOS
- 57. Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
- 58. Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
- 62. VS.
- 63. VS.
- 64. YouTube Popular social video sharing site
- 67. “... mobile-optimized experiences produced an average 75% higher rate of engagements per visit for mobile user.” Source: Ed Hewett, Omniture Do Mobile-optimized Experiences Improve Engagement on “Super” Phones and Tablets like the iPad?
- 69. Optimize for mobile experience
- 70. Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical
- 71. Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical Less is more
- 72. Online photo management and sharing application
- 75. VS.
- 76. VS.
- 79. VS.
- 80. VS.
- 81. Amazon.com Online shopping site
- 84. VS.
- 85. VS.
- 88. VS.
- 89. VS.
- 90. #8 Don’t be online only.
- 92. Some of us are WiFi only
- 93. Some of us are WiFi only Cache retrieved data
- 94. Some of us are WiFi only Cache retrieved data Show the last-known state
- 95. Some of us are WiFi only Cache retrieved data Show the last-known state Pass the NYC subway test
- 96. Gothere.sg iPhone application for getting around in Singapore
- 97. Gothere.sg
- 98. Gothere.sg
- 99. Gothere.sg Warns the user that there is no Internet connection but doesn’t stop the user from using it.
- 100. Gothere.sg Alternate routes are cached and still accessible to the user when the app is offline.
- 101. Gothere.sg Alternate route with cached map images
- 102. Flipboard iPad application - magazine styled visuals for your social feeds
- 107. Must be connected to use
- 108. Must be connected to use No caching of previous data
- 109. Must be connected to use No caching of previous data Why make it so hard ?
- 110. #9 Don’t favour branding over users.
- 111. “Avoid displaying an About window, a splash screen, or providing any other type of startup experience that prevents people from using your application immediately” Source: Apple iOS Reference Library iPhone Human Interface Guidelines
- 113. Avoid favoring branding over user experience
- 114. Avoid favoring branding over user experience Splash screens are evil
- 115. “... I don't need three splash screens telling me I'm playing Scrabble, made by EA, and ‘Every Word Counts’... I want to load the game and play, not wait through their branding...” - App Store comment
- 116. #10 Don’t load too much too fast
- 118. Short attention span
- 119. Short attention span Intense period of activity
- 120. Short attention span Intense period of activity Load in small chunks & only what is needed
- 121. Short attention span Intense period of activity Load in small chunks & only what is needed Interruptible
- 122. #11 Don’t re-invent the wheel.
- 124. Convention works
- 125. Convention works Forget that “special revolutionary drop-down menu”
- 126. Convention works Forget that “special revolutionary drop-down menu” Be the user - Don’t try technology for technology
- 127. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
- 128. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
- 129. VS. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
- 130. VS. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
- 133. Roll-overs are so 1990s
- 134. Roll-overs are so 1990s Extra step
- 135. Roll-overs are so 1990s Extra step And it doesn’t work. Really. No cursor.
- 136. #13 Don’t forget to guide users.
- 138. Guide your user along
- 139. Guide your user along Loading, updating in progress
- 140. Guide your user along Loading, updating in progress Display user-friendly error messages
- 144. #14 Don’t disrupt the experience.
- 146. Be gentle to the user
- 147. Be gentle to the user Built-in browsers
- 148. Be gentle to the user Built-in browsers Inform & let the user decide
- 157. #15 Don’t squeeeze the world in.
- 158. “Average screen sizes breach 2.5 inch mark” Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database 2.5″ = 6.35 cm 3.5″ = 8.89cm
- 159. “Average screen sizes breach 2.5 inch mark” 2.5 ″ Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database 2.5″ = 6.35 cm 3.5″ = 8.89cm
- 160. “Average screen sizes breach 2.5 inch mark” 2.5 3.5 ″ ″ Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database 2.5″ = 6.35 cm 3.5″ = 8.89cm
- 163. Physically tiny screen Avoid pixel/small fonts
- 164. 44px 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
- 165. Give enough space 44px 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
- 166. Give enough space 44px Account for accidental touches 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
- 167. Give enough space 44px Account for accidental touches 44px Think Bigger hit-area 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
- 168. #16 Don’t make user type.
- 169. "Given the typical input limitations of a mobile device, the interface must as far as possible minimize user input.Where possible, use selection lists, radio buttons and other controls that do not require typing." Source: Mobile Web Best Practice, W3C
- 170. "Although unavoidable in forms that need information form the user, avoid using text boxes and text areas as much as possible. It’s difficult for the user to enter content into free text inputs such as text boxes..." Source: Mobile Design and Development, Brian Fling
- 172. Tiny keyboard - typing sucks
- 173. Tiny keyboard - typing sucks You need slender fingers
- 174. Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can
- 175. Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can Give options and let users pick / auto-complete
- 176. #17 Don’t forget to test.
- 178. Always test with actual devices
- 179. Always test with actual devices Usability testing
- 180. Always test with actual devices Usability testing Moving in and out of WiFi zones
- 181. Always test with actual devices Usability testing Moving in and out of WiFi zones No connectivity
- 182. Re-cap
- 183. Don’t...
- 184. Don’t... ... assume a need
- 185. Don’t... ... assume a need ... be short-sighted
- 186. Don’t... ... assume a need ... be short-sighted ... trivialize choice of platform
- 187. Don’t... ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes
- 188. Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes
- 189. Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... assume browsers are equal ... trivialize choice of platform ... gloss over bits & bytes
- 190. Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... assume browsers are equal ... trivialize choice of platform ... downplay user experience ... gloss over bits & bytes
- 191. Don’t... ... 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
- 192. Don’t...
- 193. Don’t... ... favour branding over users
- 194. Don’t... ... favour branding over users ... load too much too fast
- 195. Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel
- 196. Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs
- 197. Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users
- 198. Don’t... ... favour branding over users ... disrupt the experience ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users
- 199. Don’t... ... 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
- 200. Don’t... ... 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
- 201. Don’t... ... 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
- 202. Don’t... ... 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
- 203. Thank You. Go build something.
- 204. Q &A
- 205. References User-centered design of mobile solution (NAMAHN) http://www.namahn.com/resources/documents/note-MobileSolutions.pdf AdMob Mobile Metrics http://metrics.admob.com The 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/
- 206. References Automatic Form Filling on Mobile Devices http://www.medien.ifi.lmu.de/pubdb/publications/pub/deluca2007pmc/ deluca2007pmc.pdf Mobile Design and Development (Brian Fling)