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

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.

6ed02dec32058508c6feb43b2fbc94f7?s=128

Secret Lab

July 17, 2012
Tweet

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