Level Up Your Apps: Mobile UX Design and Development

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/

6ed02dec32058508c6feb43b2fbc94f7?s=128

Secret Lab

July 23, 2013
Tweet

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.
  2. Level Up Your Apps Mobile UX, Design, and Development

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

    mobile user experience Android’s architecture Building an Android app
  4. Introduction (us, Android, etc etc etc)

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

    ?!
  6. Next year!

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

    make sense.
  8. Android.

  9. It’s an operating system

  10. It’s an operating system for phones.

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

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

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

  14. This tutorial: Designing Mobile Apps

  15. This tutorial: Designing Android 4.0 Apps

  16. The Goal: An Android App for OSCON

  17. Housekeeping

  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
  19. Let’s talk about humans.

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

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

    nice things.
  22. Humans are arrogant. They’ll expect other people to anticipate what

    they want, and give it to them the moment they want it.
  23. Humans are easily bored. If something takes longer than a

    couple of seconds, they’re not interested.
  24. Behold: your customer!

  25. We’re kind of exaggerating.

  26. None
  27. None
  28. Mobile Design

  29. Mobile computers are different to desktop computers.

  30. Mobile apps are different to other apps.

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

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

  34. The Mouse Doesn’t Exist

  35. None
  36. Direct Manipulation Rocks

  37. Scrolling with inertia!

  38. None
  39. The iPhone’s inertia-like flick scrolling seems to work really well

    for this. - John Gruber, 2007
  40. Direct manipulation rocks!

  41. Direct manipulation sucks!

  42. Direct manipulation sucks! (for you)

  43. Crutch

  44. Virtual keyboards suck

  45. No tactile feedback.

  46. Individual keys are small.

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

  48. None
  49. Virtual keyboards rule.

  50. Keyboards hide when unnecessary.

  51. Keyboards change when necessary.

  52. None
  53. Typing still sucks.

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

  55. None
  56. None
  57. Can tap these while looking at screen content Can’t tap

    these without covering the screen
  58. Hands also hold the device.

  59. None
  60. None
  61. None
  62. None
  63. The screen is small.

  64. The human eye can only see so much.

  65. None
  66. None
  67. Make every pixel count.

  68. Summary Direct Manipulation Keyboards Orientation

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

    the Web
  70. Android Principles

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

    http://developer.android.com/design/get-started/creative-vision.html
  72. We have no idea what these mean.

  73. Our Creative Vision

  74. Do one thing Do it well

  75. Multiple Features One Purpose

  76. None
  77. Make it easy to leave Make it even easier to

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

    quickly as possible.” http://www.google.com/about/company/philosophy/
  79. None
  80. Being a great app means Being great with other apps

  81. Your app should provide features to other apps

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

  85. If other apps provide functionality, use it

  86. None
  87. None
  88. What does this mean?

  89. Android UI Paradigms

  90. Actions

  91. Do something Do it well

  92. Do something Make it obvious

  93. None
  94. The Action Bar

  95. None
  96. What are actions?

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

  98. Frequent

  99. Important

  100. Typical

  101. None
  102. None
  103. What’s not in the action bar •Jump To Top •View

    my Profile •Mute •View Settings
  104. Action Bar Paradigms

  105. None
  106. None
  107. Menus aren’t gone :(

  108. None
  109. Frequent Important Typical

  110. Always Sometimes Never

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

    single? Overflow Menu: Always, sometimes, or never?
  112. Navigation

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

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

  115. Navigation with the action bar

  116. None
  117. Tabs

  118. None
  119. None
  120. List navigation

  121. None
  122. None
  123. Lists ONE thing ALL of the things SOME of the

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

    of the things
  125. “Back” vs. “Up”

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

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

  128. Graphic Design

  129. None
  130. Text

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

  132. Swiss Design

  133. None
  134. None
  135. None
  136. FONT WEIGHTS HAVE MEANING

  137. None
  138. None
  139. Icons

  140. None
  141. None
  142. None
  143. None
  144. Icons should be obvious. If it’s not obvious, use text.

  145. When is it obvious?

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

  147. It’s obvious if it’s obvious

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

  150. None
  151. An aside: Heuristic Analysis

  152. None
  153. 0 25 50 75 100 0 5 10 15 Percentage

    of Usability Problems Found Number of Evaluators
  154. Analyse your results. Create findings.

  155. Text Colours Icons In order of importance

  156. Summary Think about design. Please.

  157. Making an App

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

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

    interface.
  160. You’ll design some stuff!

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

  162. Designing a Mobile App

  163. Our Process

  164. The tools you’ll need:

  165. The tools you’ll need:

  166. Start with an outline.

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

  168. Outlines can be iterated upon.

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

  170. None
  171. Now start listing features.

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

    must have?
  173. What We Thought See the details of a talk See

    what talks are on sometime Update the schedule
  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
  175. Draw the screens needed for the features you’ve chosen.

  176. None
  177. Never code before designing.

  178. Side note: API design is still design.

  179. Code something and test it. Now.

  180. None
  181. Iterate.

  182. None
  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
  184. Step 1 A static app

  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
  186. We’ll give you most of the code. Follow along with

    us.
  187. Three screens to make.

  188. What is an Android App?

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

    how they all fit together An Android app is:
  190. The Manifest An XML file that describes the contents of

    the app to the Android OS More on that later.
  191. Activities public void onCreate(Bundle foo) { doLol(); } public void

    warble() { } UI bits
  192. None
  193. Rare Startup Shutdown Frequent Rare

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

  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
  196. Keep off the UI thread

  197. Views

  198. Image View Text View Scroll Pane Button Composite Layout

  199. Fragments

  200. Your New Master

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

  202. Views with code Views with a life cycle

  203. None
  204. None
  205. Activities vs. Fragments

  206. Activities are expensive

  207. FRAGMENTS

  208. Fragments Many at once.

  209. Talk Listings

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

  211. git checkout talk_listing_end

  212. Adding a second screen

  213. We need one activity to launch another.

  214. Intents

  215. OS-Level signals Used to launch activities

  216. OS-Level signals Used to launch other apps

  217. Schedule

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

  219. git checkout schedule_end

  220. Days List

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

  222. git checkout day_list_end

  223. Finished (for now)!

  224. Finishing An App Part 2

  225. YOU ARE HERE.

  226. Implementing “Up” navigation

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

  228. git checkout navigation_end

  229. Backing it with data

  230. git checkout data_end

  231. Adding tab navigation

  232. git checkout tabs_end

  233. Theming the app

  234. Coding Exercise (git checkout theme_start)

  235. git checkout theme_end

  236. The End?

  237. Problems!

  238. “It’s too slow!”

  239. None
  240. None
  241. a-ha!

  242. git checkout make_faster

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

  244. From This

  245. To This...

  246. ...Or This

  247. git checkout navigation_refresh

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

    want abstracts from the website.”
  249. git checkout talk_listing_update

  250. Polish.

  251. git checkout themeing_finished

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

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

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

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

    use.
  256. Mobile users hate being surprised.

  257. Dialog boxes suck. Being modal also sucks.

  258. A similar problem: deleting stuff

  259. What should happen?

  260. Option 1: Do nothing

  261. Option 2: Pop a dialog box!

  262. Option 3: Quietly indicate.

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

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

  266. Be responsive.

  267. Lag equals death.

  268. None
  269. Instagram starts uploading here Most apps start uploading here

  270. None
  271. Never drop data.

  272. Expose yourself.

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

  274. None
  275. Things that can change: Screen size Speed of CPU /

    GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
  276. None
  277. Minimise your views Views are expensive! MEMORY PROBLEM

  278. Think about first launch

  279. Your home activity Straightforward, aesthetic, consistent.

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

  281. It starts in the Marketplace.

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

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

    I do?
  284. Constant collaboration between design and development

  285. Style your app. Never port it.

  286. None
  287. Beware the Port

  288. UI ports from iOS to Android look bad.

  289. None
  290. None
  291. Start development early.

  292. Mobile is the perfect storm

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

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

  295. Summary. This is a summary, yes.

  296. Thanks for coming!

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

    the App! • http://lab.to/oscon2013apk
  298. @thesecretlab