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.

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.
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

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

17. Mobile Landscape Today

18. Developing mobile apps
is not new.

19. Challenges
+
Opportunities

21. Fragmented landscape

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

59. Picnik
Photo editing application

62. VS.

63. VS.

64. YouTube
Popular social video sharing site

66. #7
Don’t downplay
user experience.

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/

131. #12
Don’t do roll-overs.

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

162. Physically tiny screen

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)