Level Up Your Apps: Mobile UX Design and Development

The slides from the tutorial on Android design and development that @chrisjrn, @desplesda and @parisba ran at OSCON 2013 in Portland.

Blog post/details at http://blog.secretlab.com.au/2013/07/23/mobile-ux-design-and-development/

Transcript

1. Level Up Your Apps!
   There are prerequisites for this session available at
   http://lab.to/oscon-2013
   Please install the software if you want to follow the coding exercises.
   

   View Slide

2. Level Up Your Apps
   Mobile UX, Design, and Development
   

   View Slide

3. What You’ll Learn
   Why mobile apps are different
   Designing a mobile user experience
   Android’s architecture
   Building an Android app
   

   View Slide

4. Introduction
   (us, Android, etc etc etc)
   

   View Slide

5. Chris Neugebauer
   Jon Manning
   Paris Buttfield-Addison
   Python developer
   iOS developer
   ?!
   

   View Slide

6. Next year!
   

   View Slide

7. We are Australian.
   Please inform us if we do not make sense.
   

   View Slide

8. Android.
   

   View Slide

9. It’s an operating system
   

   View Slide

10. It’s an operating system
    for phones.
    

    View Slide

11. It’s an operating system
    for tablet devices.
    

    View Slide

12. It’s an operating system
    for your sunglasses.
    

    View Slide

13. The latest version
    4.2 (“Jelly Bean”)
    

    View Slide

14. This tutorial:
    Designing Mobile Apps
    

    View Slide

15. This tutorial:
    Designing Android 4.0 Apps
    

    View Slide

16. The Goal:
    An Android App for OSCON
    

    View Slide

17. Housekeeping
    

    View Slide

18. Git!
    We’ve got a git repo full of our example app!
    git clone https://github.com/thesecretlab/oscon-2013-app.git
    cd oscon-2013-app
    git checkout talk_listing_start
    

    View Slide

19. Let’s talk about humans.
    

    View Slide

20. Humans are arrogant, lazy,
    and easily bored.
    

    View Slide

21. Humans are lazy.
    They don’t want to work to get nice things.
    

    View Slide

22. Humans are arrogant.
    They’ll expect other people to anticipate what they want,
    and give it to them the moment they want it.
    

    View Slide

23. Humans are easily bored.
    If something takes longer than a couple of seconds,
    they’re not interested.
    

    View Slide

24. Behold: your customer!
    

    View Slide

25. We’re kind of exaggerating.
    

    View Slide

26. View Slide

27. View Slide

28. Mobile Design
    

    View Slide

29. Mobile computers are different
    to desktop computers.
    

    View Slide

30. Mobile apps are different to
    other apps.
    

    View Slide

31. Android is a Unix machine,
    but don’t write Unix programs.
    

    View Slide

32. View Slide

33. Small screens.
    Short attention spans.
    Limited capacity.
    

    View Slide

34. The Mouse Doesn’t Exist
    

    View Slide

35. View Slide

36. Direct Manipulation Rocks
    

    View Slide

37. Scrolling with inertia!
    

    View Slide

38. View Slide

39. The iPhone’s inertia-like flick
    scrolling seems to work really
    well for this.
    - John Gruber, 2007
    

    View Slide

40. Direct manipulation rocks!
    

    View Slide

41. Direct manipulation sucks!
    

    View Slide

42. Direct manipulation sucks!
    (for you)
    

    View Slide

43. Crutch
    

    View Slide

44. Virtual keyboards suck
    

    View Slide

45. No tactile feedback.
    

    View Slide

46. Individual keys are small.
    

    View Slide

47. Keyboard entry
    =
    50% of the screen is gone
    

    View Slide

48. View Slide

49. Virtual keyboards rule.
    

    View Slide

50. Keyboards hide
    when unnecessary.
    

    View Slide

51. Keyboards change
    when necessary.
    

    View Slide

52. View Slide

53. Typing still sucks.
    

    View Slide

54. The user’s hand is a
    solid object.
    

    View Slide

55. View Slide

56. View Slide

57. Can tap these
    while looking at
    screen content
    Can’t tap these
    without covering
    the screen
    

    View Slide

58. Hands also hold the device.
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. The screen is small.
    

    View Slide

64. The human eye
    can only see so much.
    

    View Slide

65. View Slide

66. View Slide

67. Make every pixel count.
    

    View Slide

68. Summary
    Direct Manipulation
    Keyboards
    Orientation
    

    View Slide

69. Android Principles
    And how it’s not iOS
    or GNOME
    or the Web
    

    View Slide

70. Android Principles
    

    View Slide

71. •Enchant me
    •Simplify my life
    •Make me amazing
    “Creative Vision”
    http://developer.android.com/design/get-started/creative-vision.html
    

    View Slide

72. We have no idea
    what these mean.
    

    View Slide

73. Our Creative Vision
    

    View Slide

74. Do one thing
    Do it well
    

    View Slide

75. Multiple Features
    One Purpose
    

    View Slide

76. View Slide

77. Make it easy to leave
    Make it even easier to return
    

    View Slide

78. “Our goal is to have people leave our website
    as quickly as possible.”
    http://www.google.com/about/company/philosophy/
    

    View Slide

79. View Slide

80. Being a great app
    means
    Being great with other apps
    

    View Slide

81. Your app should provide
    features to other apps
    

    View Slide

82. View Slide

83. View Slide

84. If there’s a native experience,
    provide it.
    

    View Slide

85. If other apps provide
    functionality, use it
    

    View Slide

86. View Slide

87. View Slide

88. What does this mean?
    

    View Slide

89. Android UI Paradigms
    

    View Slide

90. Actions
    

    View Slide

91. Do something
    Do it well
    

    View Slide

92. Do something
    Make it obvious
    

    View Slide

93. View Slide

94. The Action Bar
    

    View Slide

95. View Slide

96. What are actions?
    

    View Slide

97. FIT Scheme
    Frequent
    Important
    Typical
    http://developer.android.com/design/patterns/actionbar.html
    

    View Slide

98. Frequent
    

    View Slide

99. Important
    

    View Slide

100. Typical
     

     View Slide

101. View Slide

102. View Slide

103. What’s not in the action bar
     •Jump To Top
     •View my Profile
     •Mute
     •View Settings
     

     View Slide

104. Action Bar Paradigms
     

     View Slide

105. View Slide

106. View Slide

107. Menus aren’t gone
     :(
     

     View Slide

108. View Slide

109. Frequent
     Important
     Typical
     

     View Slide

110. Always
     Sometimes
     Never
     

     View Slide

111. Action Bars
     The most important
     things go here
     Split or single?
     Overflow Menu: Always,
     sometimes, or never?
     

     View Slide

112. Navigation
     

     View Slide

113. Where am I?
     What can I do here?
     

     View Slide

114. How did I get here?
     Where can I go next?
     

     View Slide

115. Navigation
     with the action bar
     

     View Slide

116. View Slide

117. Tabs
     

     View Slide

118. View Slide

119. View Slide

120. List navigation
     

     View Slide

121. View Slide

122. View Slide

123. Lists
     ONE thing
     ALL of the things
     SOME of the things
     

     View Slide

124. Tabs
     SOME of the things
     SOME of the things SOME of the things
     

     View Slide

125. “Back”
     vs.
     “Up”
     

     View Slide

126. http://developer.android.com/design/patterns/navigation.html
     

     View Slide

127. http://developer.android.com/design/patterns/navigation.html
     

     View Slide

128. Graphic Design
     

     View Slide

129. View Slide

130. Text
     

     View Slide

131. “layout and typography are
     crisp and meaningful.”
     http://developer.android.com/design/get-started/creative-vision.html
     

     View Slide

132. Swiss
     Design
     

     View Slide

133. View Slide

134. View Slide

135. View Slide

136. FONT
     WEIGHTS
     HAVE
     MEANING
     

     View Slide

137. View Slide

138. View Slide

139. Icons
     

     View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. Icons should be obvious.
     If it’s not obvious, use text.
     

     View Slide

145. When is it obvious?
     

     View Slide

146. It’s obvious if
     lots of other apps do it
     

     View Slide

147. It’s obvious if
     it’s obvious
     

     View Slide

148. View Slide

149. It’s obvious if
     Google has an icon for it
     http://developer.android.com/design/downloads/index.html
     

     View Slide

150. View Slide

151. An aside:
     Heuristic Analysis
     

     View Slide

152. View Slide

153. 0
     25
     50
     75
     100
     0 5 10 15
     Percentage of Usability Problems Found
     Number of Evaluators
     

     View Slide

154. Analyse your results.
     Create findings.
     

     View Slide

155. Text
     Colours
     Icons
     In order of importance
     

     View Slide

156. Summary
     Think about design.
     Please.
     

     View Slide

157. Making an App
     

     View Slide

158. We’re going to make
     an OSCON app.
     

     View Slide

159. We’ll go through the process
     of conceptualising and
     designing the interface.
     

     View Slide

160. You’ll design some stuff!
     

     View Slide

161. You’ll work with the
     person next to you.
     Say hello!
     

     View Slide

162. Designing a Mobile App
     

     View Slide

163. Our Process
     

     View Slide

164. The tools you’ll need:
     

     View Slide

165. The tools you’ll need:
     

     View Slide

166. Start with an outline.
     

     View Slide

167. “I want to see what’s
     happening at OSCON.”
     

     View Slide

168. Outlines can be
     iterated upon.
     

     View Slide

169. “I want to quickly see what’s
     happening at OSCON.”
     

     View Slide

170. View Slide

171. Now start listing features.
     

     View Slide

172. What are the three most
     important features that this
     app must have?
     

     View Slide

173. What We Thought
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

174. What We Thought
     Individual
     session screen
     List of
     sessions
     List days of
     conference
     Updating
     should be
     invisible
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

175. Draw the screens needed for
     the features you’ve chosen.
     

     View Slide

176. View Slide

177. Never code before
     designing.
     

     View Slide

178. Side note:
     API design is still
     design.
     

     View Slide

179. Code something and test it.
     Now.
     

     View Slide

180. View Slide

181. Iterate.
     

     View Slide

182. View Slide

183. Coffee time
     See you at
     11:00am!
     We’ve got a git repo full of our
     example app!
     git clone https://github.com/
     thesecretlab/oscon-2013-
     app.git
     cd oscon-2013-app
     git checkout talk_listing_start
     

     View Slide

184. Step 1
     A static app
     

     View Slide

185. Stage 1
     Implement all of the screens of the app
     Will always show the same data, no matter what we press
     Will not be themed beyond the defaults
     

     View Slide

186. We’ll give you most of the code.
     Follow along with us.
     

     View Slide

187. Three screens to make.
     

     View Slide

188. What is an Android App?
     

     View Slide

189. A loose collection of managed Java classes
     Instructions telling Android how they all fit together
     An Android app is:
     

     View Slide

190. The Manifest
     An XML file that describes the contents of the app to the
     Android OS
     More on that later.
     

     View Slide

191. Activities
     public void onCreate(Bundle foo)
     {
     doLol();
     }
     public void warble()
     {
     }
     UI bits
     

     View Slide

192. View Slide

193. Rare
     Startup
     Shutdown
     Frequent
     Rare
     

     View Slide

194. UI thread vs. background threads
     Great and epic battle?
     

     View Slide

195. “The developer of this app was lazy and
     foolish, please check the Play Store for
     something better!”
     http://developer.android.com/guide/practices/design/responsiveness.html
     

     View Slide

196. Keep off the UI thread
     

     View Slide

197. Views
     

     View Slide

198. Image View
     Text View
     Scroll Pane
     Button
     Composite Layout
     

     View Slide

199. Fragments
     

     View Slide

200. Your New Master
     

     View Slide

201. Introduced in 3.0,
     Back-ported to 1.6.
     It’s that important.
     

     View Slide

202. Views with code
     Views with a life cycle
     

     View Slide

203. View Slide

204. View Slide

205. Activities
     vs.
     Fragments
     

     View Slide

206. Activities
     are expensive
     

     View Slide

207. FRAGMENTS
     

     View Slide

208. Fragments
     Many at once.
     

     View Slide

209. Talk Listings
     

     View Slide

210. (We’re going to code now!)
     git checkout talk_listing_start
     

     View Slide

211. git checkout talk_listing_end
     

     View Slide

212. Adding a second screen
     

     View Slide

213. We need one activity to
     launch another.
     

     View Slide

214. Intents
     

     View Slide

215. OS-Level signals
     Used to launch activities
     

     View Slide

216. OS-Level signals
     Used to launch other apps
     

     View Slide

217. Schedule
     

     View Slide

218. (We’re going to code now!)
     git checkout schedule_start
     

     View Slide

219. git checkout schedule_end
     

     View Slide

220. Days List
     

     View Slide

221. (We’re going to code now)
     git checkout day_list_start
     

     View Slide

222. git checkout day_list_end
     

     View Slide

223. Finished (for now)!
     

     View Slide

224. Finishing An App
     Part 2
     

     View Slide

225. YOU ARE HERE.
     

     View Slide

226. Implementing “Up”
     navigation
     

     View Slide

227. (Coding goes here)
     (git checkout navigation_start)
     

     View Slide

228. git checkout navigation_end
     

     View Slide

229. Backing it with data
     

     View Slide

230. git checkout data_end
     

     View Slide

231. Adding tab navigation
     

     View Slide

232. git checkout tabs_end
     

     View Slide

233. Theming the app
     

     View Slide

234. Coding Exercise
     (git checkout theme_start)
     

     View Slide

235. git checkout theme_end
     

     View Slide

236. The End?
     

     View Slide

237. Problems!
     

     View Slide

238. “It’s too slow!”
     

     View Slide

239. View Slide

240. View Slide

241. a-ha!
     

     View Slide

242. git checkout make_faster
     

     View Slide

243. “I don’t know what’s on now.”
     

     View Slide

244. From This
     

     View Slide

245. To This...
     

     View Slide

246. ...Or This
     

     View Slide

247. git checkout navigation_refresh
     

     View Slide

248. “I want session reminders.”
     “I want to tweet sessions.”
     “I want abstracts from the website.”
     

     View Slide

249. git checkout talk_listing_update
     

     View Slide

250. Polish.
     

     View Slide

251. git checkout themeing_finished
     

     View Slide

252. Finished!
     http://lab.to/oscon2013apk
     

     View Slide

253. Bringing it together
     (We have a point to make)
     

     View Slide

254. Building apps
     people want to use
     Harder than you think.
     

     View Slide

255. People do not like phones.
     Because they’re generally unpleasant to use.
     

     View Slide

256. Mobile users hate
     being surprised.
     

     View Slide

257. Dialog boxes suck.
     Being modal also sucks.
     

     View Slide

258. A similar problem:
     deleting stuff
     

     View Slide

259. What should happen?
     

     View Slide

260. Option 1:
     Do nothing
     

     View Slide

261. Option 2:
     Pop a dialog box!
     

     View Slide

262. Option 3:
     Quietly indicate.
     

     View Slide

263. View Slide

264. Be fast.
     We mentioned this before.
     http://lab.to/qQlVJW
     

     View Slide

265. Pretend to
     be fast.
     (If you’re not fast!)
     

     View Slide

266. Be responsive.
     

     View Slide

267. Lag equals death.
     

     View Slide

268. View Slide

269. Instagram starts uploading here
     Most apps start uploading here
     

     View Slide

270. View Slide

271. Never drop data.
     

     View Slide

272. Expose yourself.
     

     View Slide

273. The device’s conditions change.
     A lot.
     

     View Slide

274. View Slide

275. Things that can change:
     Screen size
     Speed of CPU / GPU
     Available memory
     Storage space
     Network speed
     Everything
     ✔
     ✔
     ✔
     ✔
     ✔
     ✔
     

     View Slide

276. View Slide

277. Minimise your views
     Views are expensive!
     MEMORY PROBLEM
     

     View Slide

278. Think about first launch
     

     View Slide

279. Your home activity
     Straightforward, aesthetic, consistent.
     

     View Slide

280. Think about the ecosystem
     It’s more than just your app.
     

     View Slide

281. It starts in the
     Marketplace.
     

     View Slide

282. *Slide stolen from Roman Nurik’s Google Developer Day 2010 presentation.
     

     View Slide

283. Where am I? What can I do?
     What else can I do?
     

     View Slide

284. Constant collaboration
     between design and
     development
     

     View Slide

285. Style your app.
     Never port it.
     

     View Slide

286. View Slide

287. Beware the Port
     

     View Slide

288. UI ports from iOS
     to Android
     look bad.
     

     View Slide

289. View Slide

290. View Slide

291. Start development early.
     

     View Slide

292. Mobile is the perfect storm
     

     View Slide

293. Greatest Strength?
     It runs on a whole bunch of devices.
     

     View Slide

294. Biggest Weakness?
     It runs on a whole bunch of devices.
     

     View Slide

295. Summary.
     This is a summary, yes.
     

     View Slide

296. Thanks for coming!
     

     View Slide

297. Important Things!
     •Give us feedback
     • http://spkr8.com/t/23521
     • http://lab.to/oscon-2013
     •Download the App!
     • http://lab.to/oscon2013apk
     

     View Slide

298. @thesecretlab
     

     View Slide