Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobile Application Design Philosophies
Hi. I’m Ronnie.
Hi. I’m Ronnie. Technical Director at R/GA
Hi. I’m Ronnie. Technical Director at R/GA @ronnieliew
Nike+ GPS
Nike+ GPS Nike Lab Merry Mix It StyleMixer Gift Finder Gift Globe My Kia Soul Neuvo
Today’s Talk
Today’s Talk Topic & Terminology
Today’s Talk Topic & Terminology Mobile landscape
Today’s Talk Topic & Terminology Mobile landscape Guidelines
Definition of Mobile application
Compact software programs that perform specific tasks for the mobile user. A software application that runs in a handheld ...
Native App Mobile Web App
Native Mobile Web Internet Access Not required Required Performance ✓ ...
Developing mobile apps is not new.
Challenges + Opportunities
Fragmented landscape
Guidelines to navigate this maze.
How not to do mobile applications
#1 Don’t assume a need.
You need to have one. Really?
You need to have one. Really? Use case of mobile apps
You need to have one. Really? Use case of mobile apps Solve a real problem
#2 Don’t be short-sighted.
It’s not an after-thought or add-on
It’s not an after-thought or add-on Plan ahead or at least consider about it.
It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility
It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility Portable data
#3 Don’t trivialize choice of platforms.
Platforms that your users on
Platforms that your users on Other major players in the market
Platforms that your users on Other major players in the market Only installed apps get used
1st Quarter 2010 Worldwide Smartphone Market Share 50% Market Share 25% ...
March 2010 Mobile Platform Market Share: iOS vs Andriod (By region) US UK India China Hong Kong...
#4 Don’t gloss over bits & bytes.
Native or mobile web app
Native or mobile web app Understand the limitations
Native or mobile web app Understand the limitations Technical approach is critical & has repercussion
#5 Don’t go chasing waterfall
Waterfall approach is clumsy & high-risk
Waterfall approach is clumsy & high-risk Do paper prototyping
Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes
Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes Test theories quickly
#6 Don’t assume browsers are equal.
Mobile browsers are not desktop browsers
Mobile browsers are not desktop browsers Flash plugin not available on iOS
Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
Picnik Photo editing application
VS.
VS.
YouTube Popular social video sharing site
#7 Don’t downplay user experience.
“... mobile-optimized experiences produced an average 75% higher rate of engagements per visit for mobile us...
Optimize for mobile experience
Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical
Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical Less is more
Online photo management and sharing application
VS.
VS.
VS.
VS.
Amazon.com Online shopping site
VS.
VS.
VS.
VS.
#8 Don’t be online only.
Some of us are WiFi only
Some of us are WiFi only Cache retrieved data
Some of us are WiFi only Cache retrieved data Show the last-known state
Some of us are WiFi only Cache retrieved data Show the last-known state Pass the NYC subway test
Gothere.sg iPhone application for getting around in Singapore
Gothere.sg
Gothere.sg
Gothere.sg Warns the user that there is no Internet connection but doesn’t stop the user from using it.
Gothere.sg Alternate routes are cached and still accessible to the user when the app is offline.
Gothere.sg Alternate route with cached map images
Flipboard iPad application - magazine styled visuals for your social feeds
Must be connected to use
Must be connected to use No caching of previous data
Must be connected to use No caching of previous data Why make it so hard ?
#9 Don’t favour branding over users.
“Avoid displaying an About window, a splash screen, or providing any other type of startup experience that prevents peopl...
Avoid favoring branding over user experience
Avoid favoring branding over user experience Splash screens are evil
“... I don't need three splash screens telling me I'm playing Scrabble, made by EA, and ‘Every Word Counts’... I want t...
#10 Don’t load too much too fast
Short attention span
Short attention span Intense period of activity
Short attention span Intense period of activity Load in small chunks & only what is needed
Short attention span Intense period of activity Load in small chunks & only what is needed Interruptible
#11 Don’t re-invent the wheel.
Convention works
Convention works Forget that “special revolutionary drop-down menu”
Convention works Forget that “special revolutionary drop-down menu” Be the user - Don’t try technology for technology
Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://...
Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://...
VS. Source: Smashing Magazine ...
VS. Source: Smashing Magazine ...
#12 Don’t do roll-overs.
Roll-overs are so 1990s
Roll-overs are so 1990s Extra step
Roll-overs are so 1990s Extra step And it doesn’t work. Really. No cursor.
#13 Don’t forget to guide users.
Guide your user along
Guide your user along Loading, updating in progress
Guide your user along Loading, updating in progress Display user-friendly error messages
#14 Don’t disrupt the experience.
Be gentle to the user
Be gentle to the user Built-in browsers
Be gentle to the user Built-in browsers Inform & let the user decide
#15 Don’t squeeeze the world in.
“Average screen sizes breach 2.5 inch mark” Source: IE Market Research Corpo...
“Average screen sizes breach 2.5 inch mark” 2.5 ″ Source: IE...
“Average screen sizes breach 2.5 inch mark” 2.5 3.5 ″ ...
Physically tiny screen
Physically tiny screen Avoid pixel/small fonts
Physically tiny screen Avoid pixel/small fonts Give enough space
Physically tiny screen Avoid pixel/small fonts Give enough space Account for accidental touches
Physically tiny screen Avoid pixel/small fonts Give enough space Account for accidental touches Think big: Bigger hit-...
#16 Don’t make user type.
"Given the typical input limitations of a mobile device, the interface must as far as possible minimize user input.Whe...
"Although unavoidable in forms that need information form the user, avoid using text boxes and text areas as much as poss...
Tiny keyboard - typing sucks
Tiny keyboard - typing sucks You need slender fingers
Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can
Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can Give options and let users pick / auto-c...
#17 Don’t forget to test.
Always test with actual devices
Always test with actual devices Usability testing
Always test with actual devices Usability testing Moving in and out of WiFi zones
Always test with actual devices Usability testing Moving in and out of WiFi zones No connectivity
Re-cap
Don’t...
Don’t... ... assume a need
Don’t... ... assume a need ... be short-sighted
Don’t... ... assume a need ... be short-sighted ... trivialize choice of platform
Don’t... ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes
Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... trivialize choice of plat...
Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... assume brow...
Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... assume brow...
Don’t... ... assume a need ... go chasing waterfall ... be short-sighted ... assume brow...
Don’t...
Don’t... ... favour branding over users
Don’t... ... favour branding over users ... load too much too fast
Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel
Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs
Don’t... ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forge...
Don’t... ... favour branding over users ... disrupt the experience ... load too much too fast ... re-invent the wheel ...
Don’t... ... favour branding over users ... disrupt the experience ... load too much too fast ... squeeze the wor...
Don’t... ... favour branding over users ... disrupt the experience ... load too much too fast ... squeeze the wor...
Don’t... ... favour branding over users ... disrupt the experience ... load too much too fast ... squeeze the wor...
Don’t... ... favour branding over users ... disrupt the experience ... load too much too fast ... squeeze the wor...
Thank You. Go build something.
References User-centered design of mobile solution (NAMAHN) http://www.namahn.com/resources/documents/note-MobileSolutions...
References Automatic Form Filling on Mobile Devices http://www.medien.ifi.lmu.de/pubdb/publications/pub/deluca2007pmc/ delu...
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
×

Mobile Application Design & Development

94,521 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.

Published in: Technology, Entertainment & Humor
no profile picture user

  • Login to see the comments

Show More

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)

×