Mobile Application Design & Development

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.

Transcript

1. Mobile Application Design & Development
3. Hi. I’m Ronnie.
4. Hi. I’m Ronnie. Technical Director at R/GA
5. Hi. I’m Ronnie. @ronnieliew Technical Director at R/GA
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
9. Today’s Talk Terminology
10. Today’s Talk Terminology Mobile Landscape Today
11. Today’s Talk Terminology Mobile Landscape Today How not to do mobile app
12. Terminology
13. Definition of Mobile application
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 Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
17. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
18. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
19. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
20. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
21. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
22. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
23. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
24. Native Mobile Web Internet Access Performance Hardware access OS access Hardware & Platform dependent Installation Distribution Updates Not required Required ✓ ✖ ✓ ✖* ✓ ✖ ✓ ✖ Must be installed URL link App store Not required Reinstallation Simple
25. Mobile Landscape Today
26. Developing mobile apps is not new.
27. Challenges + Opportunities
29. Fragmented landscape
30. Guidelines to navigate this maze.
31. How not to do mobile applications
32. #1 Don’t assume a need.
34. You need to have one. Really?
35. You need to have one. Really? Use case of mobile apps
36. You need to have one. Really? Use case of mobile apps Solve a real problem
37. #2 Don’t be short-sighted.
39. It’s not an after-thought or add-on
40. It’s not an after-thought or add-on Plan ahead or at least consider about it.
41. It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility
42. It’s not an after-thought or add-on Plan ahead or at least consider about it. Plan for flexibility Portable data
43. #3 Don’t trivialize choice of platforms.
45. Platforms that your users on
46. Platforms that your users on Other major players in the market
47. Platforms that your users on Other major players in the market Only installed apps get used
48. 0% 25% 50% Symbian RIM iOS Android Windows Mobile Linux Others 1st Quarter 2010 Worldwide Smartphone Market Share Market Share 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
49. US UK India China Hong Kong Taiwan Malaysia Singapore Thailand Australia 0% 25% 50% 75% 100% March 2010 Mobile Platform Market Share: iOS vs Andriod (By region) Source: AdMob AdMob Mobile Metrics Report March April May 2010 AdMob Mobile Metrics Report - Southeast Asia Q1 2010 iOS Android All others
50. #4 Don’t gloss over bits & bytes.
52. Native or mobile web app
53. Native or mobile web app Understand the limitations
54. Native or mobile web app Understand the limitations Technical approach is critical & has repercussion
55. #5 Don’t go chasing waterfall
57. Waterfall approach is clumsy & high-risk
58. Waterfall approach is clumsy & high-risk Do paper prototyping
59. Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes
60. Waterfall approach is clumsy & high-risk Do paper prototyping Build quick prototypes Test theories quickly
61. #6 Don’t assume browsers are equal.
63. Mobile browsers are not desktop browsers
64. Mobile browsers are not desktop browsers Flash plugin not available on iOS
65. Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
66. Mobile browsers are not desktop browsers Flash plugin not available on iOS Media format support
67. Photo editing application Picnik
70. VS.
71. VS.
72. Popular social video sharing site YouTube
74. #7 Don’t downplay user experience.
75. “... 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?
77. Optimize for mobile experience
78. Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical
79. Optimize for mobile experience Simple, clear navigation - Pick key functions that are critical Less is more
80. Online photo management and sharing application
83. VS.
84. VS.
87. VS.
88. VS.
89. Amazon.com Online shopping site
92. VS.
93. VS.
96. VS.
97. VS.
98. #8 Don’t be online only.
100. Some of us are WiFi only
101. Some of us are WiFi only Cache retrieved data
102. Some of us are WiFi only Cache retrieved data Show the last-known state
103. Some of us are WiFi only Cache retrieved data Show the last-known state Pass the NYC subway test
104. Gothere.sg iPhone application for getting around in Singapore
105. Gothere.sg
106. Gothere.sg
107. Gothere.sg Warns the user that there is no Internet connection but doesn’t stop the user from using it.
108. Gothere.sg Alternate routes are cached and still accessible to the user when the app is offline.
109. Gothere.sg Alternate route with cached map images
110. Flipboard iPad application - magazine styled visuals for your social feeds
115. Must be connected to use
116. Must be connected to use No caching of previous data
117. Must be connected to use No caching of previous data Why make it so hard ?
118. #9 Don’t favour branding over users.
119. “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
121. Avoid favoring branding over user experience
122. Avoid favoring branding over user experience Splash screens are evil
123. “... 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
124. #10 Don’t load too much too fast
126. Short attention span
127. Short attention span Interruptible
128. Short attention span Interruptible Intense period of activity
129. Short attention span Interruptible Intense period of activity Load in small chunks & only what is needed
130. #11 Don’t re-invent the wheel.
132. Convention works
133. Convention works Forget that “special revolutionary drop-down menu”
134. Convention works Forget that “special revolutionary drop-down menu” Be the user - Don’t try technology for technology
135. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
136. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
137. VS. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
138. VS. Source: Smashing Magazine iPhone Apps Design Mistakes: Over-Blown Visuals http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
139. #12 Don’t do roll-overs.
141. Roll-overs are so 1990s
142. Roll-overs are so 1990s Extra step
143. Roll-overs are so 1990s Extra step And it doesn’t work. Really. No cursor.
144. #13 Don’t forget to guide users.
146. Guide your user along
147. Guide your user along Loading, updating in progress
148. Guide your user along Loading, updating in progress Display user-friendly error messages
152. #14 Don’t disrupt the experience.
154. Be gentle to the user
155. Be gentle to the user Built-in browsers
156. Be gentle to the user Built-in browsers Inform & let the user decide
165. #15 Don’t squeeeze the world in.
166. “Average screen sizes breach 2.5 inch mark” Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database
167. “Average screen sizes breach 2.5 inch mark” Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database 2.5″
168. “Average screen sizes breach 2.5 inch mark” Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database 2.5″ 3.5″
169. “Average screen sizes breach 2.5 inch mark” Source: IE Market Research Corporation (IEMR) 2Q.2009 Global Mobile Handset Specifications Database 2.5″ 3.5″ 2.5″ = 6.35 cm 3.5″ = 8.89cm
171. Physically tiny screen
172. Physically tiny screen Avoid pixel/small fonts
173. 44px 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
174. Give enough space 44px 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
175. Give enough space Account for accidental touches 44px 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
176. Give enough space Account for accidental touches Think Bigger hit-area 44px 44px 44px Source: From Click To Tap http://www.slideshare.net/maxvoltar/from-click-to-tap
177. #16 Don’t make user type.
178. "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
179. "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
181. Tiny keyboard - typing sucks
182. Tiny keyboard - typing sucks You need slender fingers
183. Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can
184. Tiny keyboard - typing sucks You need slender fingers Pre-populate what you can Give options and let users pick / auto-complete
185. #17 Don’t forget to test.
187. Always test with actual devices
188. Always test with actual devices Usability testing
189. Always test with actual devices Usability testing Moving in and out of WiFi zones
190. Always test with actual devices Usability testing Moving in and out of WiFi zones No connectivity
191. Re-cap
192. Don’t...
193. ... assume a need Don’t...
194. ... assume a need ... be short-sighted Don’t...
195. ... assume a need ... be short-sighted ... trivialize choice of platform Don’t...
196. ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes Don’t...
197. ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes ... go chasing waterfall Don’t...
198. ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes ... go chasing waterfall ... assume browsers are equal Don’t...
199. ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes ... go chasing waterfall ... assume browsers are equal ... downplay user experience Don’t...
200. ... assume a need ... be short-sighted ... trivialize choice of platform ... gloss over bits & bytes ... go chasing waterfall ... assume browsers are equal ... downplay user experience ... be online only Don’t...
201. Don’t...
202. ... favour branding over users Don’t...
203. ... favour branding over users ... load too much too fast Don’t...
204. ... favour branding over users ... load too much too fast ... re-invent the wheel Don’t...
205. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs Don’t...
206. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users Don’t...
207. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users ... disrupt the experience Don’t...
208. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users ... disrupt the experience ... squeeze the world in Don’t...
209. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users ... disrupt the experience ... squeeze the world in ... make user type Don’t...
210. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users ... disrupt the experience ... squeeze the world in ... make user type ... forget to test Don’t...
211. ... favour branding over users ... load too much too fast ... re-invent the wheel ... do roll-overs ... forget to guide your users ... disrupt the experience ... squeeze the world in ... make user type ... forget to test Don’t...
212. Thank You. Go build something.
213. Q & A
214. 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/ References
215. Automatic Form Filling on Mobile Devices http://www.medien.ifi.lmu.de/pubdb/publications/pub/deluca2007pmc/ deluca2007pmc.pdf Mobile Design and Development (Brian Fling) References