Android-Fu: Awesome Apps for Ice Cream Sandwich (Jelly Bean!) and Beyond

Transcript

1. Android-Fu There are prerequisites for this session available at http://lab.to/oscon2012

   Please install the software if you want to follow the coding exercises. Please grab some paper and a pen from the front!

2. Android-Fu Awesome apps for Paris Buttfield-Addison, Chris Neugebauer, Jon Manning

   Ice Cream Sandwich and beyond

3. Android-Fu Awesome apps for Paris Buttfield-Addison, Chris Neugebauer, Jon Manning

   and beyond

4. Android-Fu Awesome apps for Paris Buttfield-Addison, Chris Neugebauer, Jon Manning

   Jelly Bean and beyond

5. Android-Fu Awesome apps for Paris Buttfield-Addison, Chris Neugebauer, Jon Manning

   Jelly Bean and beyond

6. Android-Fu Awesome apps for Paris Buttfield-Addison, Chris Neugebauer, Jon Manning

   Jelly Bean and beyond

7. Android-Fu Awesome apps for Paris Buttfield-Addison, Chris Neugebauer, Jon Manning

   Jelly Bean and beyond

8. Harnessing the power of turnips as the future of synergistic

   corporate infrastructure.

9. What You’ll Learn •Why mobile apps are different •Designing a

   mobile user experience •Android’s architecture •Building an Android app

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

11. Us.

12. Us.

13. Us.

14. Us.

15. We speak quickly. Please ask us to slow down if

    you want!

16. Android.

17. It’s an operating system

18. It’s an operating system for phones.

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

20. The latest version 4.1 (“Jelly Bean”)

21. This tutorial: Designing Android Apps

22. This tutorial: Designing Android 4.0 Apps

23. The Goal: An Android App for OSCON

24. Housekeeping

25. Git! We’ve got a git repo full of our example

    app! git clone https://github.com/chrisjrn/oscon-2012-app.git cd oscon-2012-app git checkout talk_listing_start

26. Let’s talk about humans.

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

28. Humans are lazy. They don’t want to work to get

    nice things.

29. Humans are arrogant. They’ll expect other people to anticipate what

    they want, and give it to them the moment they want it.

30. Humans are easily bored. If something takes longer than a

    couple of seconds, they’re not interested.

31. Behold: your customer!

32. We’re kind of exaggerating.

33. None
34. None

35. Mobile Design

36. Mobile computers are different to desktop computers.

37. Mobile apps are different to other apps.

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

39. None

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

41. The Mouse Doesn’t Exist

42. None

43. Direct Manipulation Rocks

44. Scrolling with inertia!

45. None

46. One of the things I was worried about was the

    lack of a gesture or shortcut for “page down one screenful of text”.

47. The iPhone’s inertia-like flick scrolling seems to work really well

    for this. - John Gruber, 2007

48. Direct manipulation rocks!

49. Direct manipulation sucks!

50. Direct manipulation sucks! (for you)

51. Crutch

52. Virtual keyboards suck

53. No tactile feedback.

54. Individual keys are small.

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

56. None

57. Virtual keyboards rule

58. Keyboards hide when unnecessary.

59. Keyboards change when necessary.

60. None

61. Typing still sucks.

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

63. None
64. None

65. Can tap these while looking at screen content Can’t tap

    these without covering the screen

66. Hands also hold the device.

67. None
68. None
69. None
70. None
71. None

72. The screen is small.

73. The human eye can only see so much.

74. None
75. None

76. Make every pixel count.

77. Summary Direct Manipulation Keyboards Orientation

78. Android Principles And how it’s not iOS or GNOME or

    the Web

79. Android Principles

80. •Enchant me •Simplify my life •Make me amazing “Creative Vision”

    http://developer.android.com/design/get-started/creative-vision.html

81. We have no idea what these mean.

82. Our Creative Vision

83. Do one thing Do it well

84. “One thing” can mean “Some things” (but each should be

    obvious)
85. None
86. None
87. None
88. None
89. None

90. Make it easy to leave Make it even easier to

    return

91. “Our goal is to have people leave our website as

    quickly as possible.” http://www.google.com/about/company/philosophy/
92. None

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

94. Your app should provide features to other apps

95. None
96. None

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

98. If other apps provide functionality, use it

99. None
100. None

101. What does this mean? Double rainbow? So intense?

102. Android UI Paradigms

103. Actions

104. Do something Do it well

105. Do something Make it obvious

106. None
107. None

108. The Action Bar

109. None

110. What are actions?

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

112. Frequent

113. Important

114. Typical

115. None
116. None
117. None
118. None
119. None

120. What’s not in the action bar •Jump To Top •View

     my Profile •Mute •View Settings

121. Action Bar Paradigms

122. None
123. None

124. Menus aren’t gone :(

125. None

126. Frequent Important Typical

127. Always Sometimes Never

128. Action Bars The most important things go here Split or

     single? Overflow Menu: Always, sometimes, or never?

129. Navigation

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

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

132. Navigation with the action bar

133. None

134. Tabs

135. None
136. None
137. None
138. None

139. List navigation

140. None
141. None
142. None
143. None

144. Lists A thing ALL of the things SOME of the

     things

145. Tabs SOME of the things SOME of the things SOME

     of the things

146. “Back” vs. “Up”

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

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

149. Graphic Design

150. None

151. Text

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

153. Swiss Design

154. None
155. None
156. None
157. None

158. Icons

159. None
160. None
161. None
162. None

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

164. When is it obvious?

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

166. It’s obvious if it’s obvious

167. None
168. None

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

170. None
171. None
172. None
173. None
174. None
175. None
176. None
177. None
178. None

179. An aside: Heuristic Analysis

180. None

181. 0 25 50 75 100 0 5 10 15 Percentage

     of Usability Problems Found Number of Evaluators

182. Analyse your results. Create findings.

183. Text Colours Icons In order of importance

184. Summary Think about design. Please.

185. Making an App

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

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

     interface.

188. You’ll design some stuff!

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

190. Designing a Mobile App

191. Our Process

192. The tools you’ll need:

193. The tools you’ll need:

194. The tools you’ll need:

195. The tools you’ll need:

196. The tools you’ll need:

197. The tools you’ll need:

198. Start with an outline.

199. Start with an outline.

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

201. Outlines can be iterated upon.

202. Outlines can be iterated upon.

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

204. None

205. Now start listing features.

206. What are the three most important features that this app

     must have?

207. What We Thought See the details of a talk See

     what talks are on sometime Update the schedule

208. What We Thought See the details of a talk See

     what talks are on sometime Update the schedule

209. What We Thought Individual session screen See the details of

     a talk See what talks are on sometime Update the schedule

210. What We Thought Individual session screen List of sessions See

     the details of a talk See what talks are on sometime Update the schedule

211. What We Thought Individual session screen List of sessions List

     days of conference See the details of a talk See what talks are on sometime Update the schedule

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

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

214. OSCON 2012 Session How to grow a better turnip Turnips

     are a growing industry. Along with node.js they represent one of the biggest advances our field has ever seen. We should learn how to build a better turnip. This session teaches you everything you need to know. Bob Turnip Tuesday, 9AM to 12:30PM Portland 255 OSCON 2012 Days Monday Tuesday Wednesday Thursday Friday OSCON 2012 Timetable 9AM to 12:30PM 1:30PM to 5PM 5:30PM to 10PM Dancing Through Life How to Succeed in Business Why no one mourns the Wicked Brimstone and Treacle Someone Someone Someone Someone

215. Never code before designing.

216. Side note: API design is still design.

217. Code something and test it. Now.

218. None

219. Iterate.

220. None

221. Coffee time See you at 11:00am!

222. Step 1 A static app

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

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

     us.

225. Three screens to make.

226. What is an Android App?

227. A loose collection of managed Java classes Instructions telling Android

     how they all fit together An Android app is:

228. The Manifest An XML file that describes the contents of

     the app to the Android OS More on that later.

229. Activities public void onCreate(Bundle foo) { doLol(); } public void

     warble() { } UI bits
230. None

231. Rare Startup Shutdown Frequent Rare

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

233. http://developer.android.com/guide/practices/design/responsiveness.html

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

235. Keeping off the UI thread

236. Views

237. None

238. Image View

239. Image View Text View

240. Image View Text View Button

241. Image View Text View Scroll Pane Button

242. Image View Text View Scroll Pane Button Composite Layout

243. Fragments

244. Your New Master

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

246. Views with code Views with a life cycle

247. None
248. None

249. Activities vs. Fragments

250. Activities are expensive

251. None

252. FRAGMENTS

253. Fragments Many at once.

254. Talk Listings

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

256. git checkout talk_listing_end

257. Adding a second screen

258. We need one activity to launch another.

259. Intents

260. Intents

261. OS-Level signals Used to launch activities

262. OS-Level signals Used to launch other apps

263. Schedule

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

265. git checkout schedule_end

266. Days List

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

268. git checkout day_list_end

269. Finished (for now)!

270. Finishing An App Part 2

271. YOU ARE HERE.

272. Implementing “Up” navigation

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

274. git checkout navigation_end

275. Backing it with data

276. (Coding Exercise) (git checkout data_start)

277. git checkout data_end

278. Adding tab navigation

279. (Coding exercise) git checkout tabs_start

280. git checkout tabs_end

281. Themeing the app

282. Coding Exercise (git checkout theme_start)

283. git checkout theme_end

284. The End?

285. Problems!

286. “It’s too slow!”

287. None
288. None
289. None
290. None
291. None
292. None

293. a-ha!

294. git checkout make_faster

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

296. From This

297. To This...

298. ...Or This

299. git checkout navigation_refresh

300. “I want session reminders.” “I want to tweet sessions.” “I

     want abstracts from the website.”

301. git checkout talk_listing_update

302. Polish.

303. git checkout themeing_finished

304. Finished! http://lab.to/oscon2012apk

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

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

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

     use.

308. Mobile users hate being surprised.

309. Dialog boxes suck.

310. Dialog boxes suck.

311. Dialog boxes suck. Being modal also sucks.

312. Dialog boxes suck. Being modal also sucks.

313. A similar problem: deleting stuff

314. What should happen?

315. Option 1: Do nothing

316. Option 2: Pop a dialog box!

317. Option 3: Quietly indicate.

318. None
319. None

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

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

322. Be responsive.

323. Lag equals death.

324. None
325. None

326. Most apps start uploading here

327. Instagram starts uploading here Most apps start uploading here

328. None

329. Never drop data.

330. Expose yourself.

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

332. None

333. Things that can change: Screen size Speed of CPU /

     GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
334. None

335. Minimise your views Views are expensive!

336. Minimise your views Views are expensive! MEMORY PROBLEM

337. Think about first launch

338. Think about first launch

339. Your home activity Straightforward, aesthetic, consistent.

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

341. It starts in the Marketplace.

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

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

344. None

345. Where am I?

346. Where am I? What can I do?

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

     I do?

348. Constant collaboration between design and development

349. Style your app. Never port it.

350. None

351. Beware the Port

352. Some iOS apps ported to Android and look bad.

353. None
354. None
355. None

356. Start development early.

357. Mobile is the perfect storm

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

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

360. Thanks for coming!

361. Important Things! •Give us feedback • http://spkr8.com/t/13641 • http://lab.to/oscon2012 •Office

     Hours: Android Development & Mobile UX • 10:40am Wednesday, near the O’Reilly Expo Booth. •Download the App! • http://lab.to/oscon2012apk

362. @thesecretlab