Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

Secret Lab

July 23, 2013
Tweet

More Decks by Secret Lab

Other Decks in Programming

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