Your SlideShare is downloading. ×
0
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Mobile Application Design & Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Application Design & Development

41,844

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 …

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.

9 Comments
62 Likes
Statistics
Notes
  • 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
  • Thanks, great presentation.
    You can also check this http://sportechno.wordpress.com/2011/08/09/getting-starte/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks, Ronnie. Helpful and touching slide.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
41,844
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
2,281
Comments
9
Likes
62
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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)

×