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

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

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.
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.
40. Small screens. Short attention spans. Limited capacity.
41. The Mouse Doesn’t Exist
43. Direct Manipulation Rocks
44. Scrolling with inertia!
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
57. Virtual keyboards rule
58. Keyboards hide when unnecessary.
59. Keyboards change when necessary.
61. Typing still sucks.
62. The user’s hand is a solid object.
65. Can tap these while looking at screen content Can’t tap these without covering the screen
66. Hands also hold the device.
72. The screen is small.
73. The human eye can only see so much.
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)
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/
93. Being a great app means Being great with other apps
94. Your app should provide features to other apps
97. If there’s a native experience, provide it.
98. If other apps provide functionality, use it
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
108. The Action Bar
110. What are actions?
111. FIT Scheme Frequent Important Typical http://developer.android.com/design/patterns/actionbar.html
112. Frequent
113. Important
114. Typical
120. What’s not in the action bar •Jump To Top •View my Profile •Mute •View Settings
121. Action Bar Paradigms
124. Menus aren’t gone :(
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
134. Tabs
139. List navigation
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
151. Text
152. “layout and typography are crisp and meaningful.” http://developer.android.com/design/get-started/creative-vision.html
153. Swiss Design
158. Icons
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
169. It’s obvious if Google has an icon for it http://developer.android.com/design/downloads/index.html
179. An aside: Heuristic Analysis
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.”
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.
219. Iterate.
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
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
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
249. Activities vs. Fragments
250. Activities are expensive
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!”
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.
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.
326. Most apps start uploading here
327. Instagram starts uploading here Most apps start uploading here
329. Never drop data.
330. Expose yourself.
331. The device’s conditions change. A lot.
333. Things that can change: Screen size Speed of CPU / GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
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.
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.
351. Beware the Port
352. Some iOS apps ported to Android and look bad.
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