Mobile Application Design & Development

66,948 views

Published on

The mobile landscape is incredibly fragmented with a huge pool of devices and operating systems. This presentation shares tips and guidelines on how to navigate this maze and help design/develop better mobile applications.

11 Comments
81 Likes
Statistics
Notes
  • Hey, just want to say that by coincidence, Nike Running is my favorite running app. Congrats ; )
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice effort Ronnie, it is realy interesting and also informative. Here is my site if anyone interested in mobile application development services www.riksof.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Don't Assume A Need! I cant forget about this line from the slides. I think its very important to specify the needs for a better app.

    This is very good post. Thanks for sharing. :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • good slides to follow when developing/designing for mobile
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Yes, there is one thing the mobile applications developer or creator can't avoid for their design and it is the designing and icon. Go through very important link http://stocklogos.com/user/designgrid
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
66,948
On SlideShare
0
From Embeds
0
Number of Embeds
3,096
Actions
Shares
0
Downloads
3,162
Comments
11
Likes
81
Embeds 0
No embeds

No notes for slide

Mobile Application Design & Development

  1. Mobile Application Design Philosophies
  2. Hi. I’m Ronnie.
  3. Hi. I’m Ronnie. Technical Director at R/GA
  4. Hi. I’m 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. Today’s Talk
  8. Today’s Talk Topic & Terminology
  9. Today’s Talk Topic & Terminology Mobile landscape
  10. Today’s Talk Topic & Terminology Mobile landscape Guidelines
  11. Definition of Mobile application
  12. 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.
  13. Native App Mobile Web App
  14. 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
  15. Developing mobile apps is not new.
  16. Challenges + Opportunities
  17. Fragmented landscape
  18. Guidelines to navigate this maze.
  19. How not to do mobile applications
  20. #1 Don’t 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 apps Solve a real problem
  24. #2 Don’t be short-sighted.
  25. It’s not an after-thought or add-on
  26. It’s not an after-thought or add-on Plan ahead or at least consider about it.
  27. It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility
  28. It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility Portable data
  29. #3 Don’t trivialize choice of platforms.
  30. Platforms that your users on
  31. Platforms that your users on Other major players in the market
  32. Platforms that your users on Other major players in the market Only installed apps get used
  33. 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
  34. 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
  35. #4 Don’t gloss over bits & bytes.
  36. Native or mobile web app
  37. Native or mobile web app Understand the limitations
  38. Native or mobile web app Understand the limitations Technical approach is critical & has repercussion
  39. #5 Don’t go chasing waterfall
  40. Waterfall approach is clumsy & high-risk
  41. Waterfall approach is clumsy & high-risk Do paper prototyping
  42. Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes
  43. Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes Test theories quickly
  44. #6 Don’t assume browsers are equal.
  45. Mobile browsers are not desktop browsers
  46. Mobile browsers are not desktop browsers Flash plugin not available on iOS
  47. Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
  48. Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
  49. Picnik Photo editing application
  50. VS.
  51. VS.
  52. YouTube Popular social video sharing site
  53. #7 Don’t downplay user experience.
  54. “... 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?
  55. Optimize for mobile experience
  56. Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical
  57. Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical Less is more
  58. Online photo management and sharing application
  59. VS.
  60. VS.
  61. VS.
  62. VS.
  63. Amazon.com Online shopping site
  64. VS.
  65. VS.
  66. VS.
  67. VS.
  68. #8 Don’t be online only.
  69. Some of us are WiFi only
  70. Some of us are WiFi only Cache retrieved data
  71. Some of us are WiFi only Cache retrieved data Show the last-known state
  72. Some of us are WiFi only Cache retrieved data Show the last-known state Pass 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 doesn’t stop the user from using it.
  77. Gothere.sg Alternate routes are cached and still accessible to the user when the app is offline.
  78. Gothere.sg Alternate route with cached map images
  79. Flipboard iPad application - magazine styled visuals for your social feeds
  80. Must be connected to use
  81. Must be connected to use No caching of previous data
  82. Must be connected to use No caching of previous data Why make it so hard ?
  83. #9 Don’t favour branding over users.
  84. “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
  85. Avoid favoring branding over user experience
  86. Avoid favoring branding over user experience Splash screens are evil
  87. “... 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...”
  88. #10 Don’t load too much too fast
  89. Short attention span
  90. Short attention span Intense period of activity
  91. Short attention span Intense period of activity Load in small chunks & only what is needed
  92. Short attention span Intense period of activity Load in small chunks & only what is needed Interruptible
  93. #11 Don’t re-invent the wheel.
  94. Convention works
  95. Convention works Forget that “special revolutionary drop-down menu”
  96. Convention works Forget that “special revolutionary drop-down menu” Be the user - Don’t try technology for technology
  97. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
  98. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
  99. VS. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
  100. VS. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
  101. #12 Don’t do roll-overs.
  102. Roll-overs are so 1990s
  103. Roll-overs are so 1990s Extra step
  104. Roll-overs are so 1990s Extra step And it doesn’t work. Really. No cursor.
  105. #13 Don’t forget to guide users.
  106. Guide your user along
  107. Guide your user along Loading, updating in progress
  108. Guide your user along Loading, updating in progress Display user-friendly error messages
  109. #14 Don’t disrupt the experience.
  110. Be gentle to the user
  111. Be gentle to the user Built-in browsers
  112. Be gentle to the user Built-in browsers Inform & let the user decide
  113. #15 Don’t squeeeze the world in.
  114. “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
  115. “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
  116. “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
  117. Physically tiny screen
  118. Physically tiny screen Avoid pixel/small fonts
  119. Physically tiny screen Avoid pixel/small fonts Give enough space
  120. Physically tiny screen Avoid pixel/small fonts Give enough space Account for accidental touches
  121. Physically tiny screen Avoid pixel/small fonts Give enough space Account for accidental touches Think big: Bigger hit-area
  122. #16 Don’t make user type.
  123. "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
  124. "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
  125. Tiny keyboard - typing sucks
  126. Tiny keyboard - typing sucks You need slender fingers
  127. Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can
  128. Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can Give options and let users pick / auto-complete
  129. #17 Don’t forget to test.
  130. Always test with actual devices
  131. Always test with actual devices Usability testing
  132. Always test with actual devices Usability testing Moving in and out of WiFi zones
  133. Always test with actual devices Usability testing Moving in and out of WiFi zones No connectivity
  134. Re-cap
  135. Don’t...
  136. Don’t... ... assume a need
  137. Don’t... ... assume a need ... be short-sighted
  138. Don’t... ... assume a need ... be short-sighted ... trivialize choice of platform
  139. Don’t... ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes
  140. Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes
  141. Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... assume browsers are equal ... trivialize choice of platform ... gloss over bits & bytes
  142. 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
  143. 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
  144. Don’t...
  145. Don’t... ... favour branding over users
  146. Don’t... ... favour branding over users ... load too much too fast
  147. Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel
  148. Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs
  149. Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users
  150. 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
  151. 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
  152. 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
  153. 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
  154. 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
  155. Thank You. Go build something.
  156. 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/
  157. 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)

×