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

“Unfortunately, Design Tutorial Has Stopped”, and Other Ways to Infuriate People With Mobile Apps (OSCON 2014)

Secret Lab
July 21, 2014

“Unfortunately, Design Tutorial Has Stopped”, and Other Ways to Infuriate People With Mobile Apps (OSCON 2014)

"'Unfortunately, Design Tutorial Has Stopped', and Other Ways to Infuriate People With Mobile Apps (OSCON 2014)" was a 3 hour tutorial by Secret Lab (http://www.secretlab.com.au) and Chris Neugebauer (http://chris.neugebauer.id.au) for OSCON 2014 (http://www.oscon.com)

More information at http://www.oscon.com/oscon2014/public/schedule/detail/34459

Secret Lab

July 21, 2014
Tweet

More Decks by Secret Lab

Other Decks in Design

Transcript

  1. … and other ways to infuriate
    people with mobile apps

    View Slide

  2. What You’ll Learn
    Why mobile apps are different
    Planning a mobile app
    Designing a mobile user experience
    How to test a mobile design

    View Slide

  3. Introduction
    (us, what’s going on, when lunch is, etc, etc, etc)

    View Slide

  4. Chris Neugebauer
    Jon Manning
    Paris Buttfield-Addison
    Python developer
    Game developer
    Grumpy old man
    QUALIFIED TO RUN
    MOBILE DESIGN TUTORIAL

    View Slide

  5. View Slide

  6. Chris Neugebauer
    Jon Manning
    Paris Buttfield-Addison
    @chrisjrn
    @desplesda
    @parisba

    View Slide

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

    View Slide

  8. We are here to talk about mobile.

    View Slide

  9. Designing
    Mobile Apps
    VERY $!@&% EXCITING!

    View Slide

  10. This tutorial
    Designing
    Mobile Apps
    Idea Design

    View Slide

  11. Housekeeping

    View Slide

  12. Paper and Pencils!
    You will need some.
    We have some up the front.
    Come and grab some while we are talking.
    Take care to block people's vision as much as possible.

    View Slide

  13. View Slide

  14. Groupwork
    Drawing

    View Slide

  15. Agenda
    Talk
    Activity 1
    Talk
    Coffee
    Activity 2
    Talk
    Activity 3
    Wrap-up

    View Slide

  16. Let’s talk about humans.

    View Slide

  17. Humans.

    View Slide

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

    View Slide

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

  20. Humans are
    lazy.
    They don’t want to work to
    get nice things.

    View Slide

  21. Humans are easily
    bored.
    If something takes longer than a
    couple of seconds, 

    they’re not interested.

    View Slide

  22. Behold: your customer!

    View Slide

  23. We’re kind of exaggerating.

    View Slide

  24. View Slide

  25. View Slide

  26. Mobile Design

    View Slide

  27. Mobile computers are different
    to desktop computers.

    View Slide

  28. Mobile apps are different to
    other apps.

    View Slide

  29. Modern mobile devices are
    basically Unix machines, but you
    don’t write Unix programs.

    View Slide

  30. View Slide

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

    View Slide

  32. The Mouse Doesn’t Exist
    This picture is a gerbil.

    View Slide

  33. View Slide

  34. Direct Manipulation Rocks

    View Slide

  35. Scrolling with inertia!

    View Slide

  36. View Slide

  37. The iPhone’s inertia-like flick
    scrolling seems to work really
    well for this.
    - John Gruber, 2007

    View Slide

  38. Direct manipulation rocks!

    View Slide

  39. Direct manipulation sucks!

    View Slide

  40. Direct manipulation sucks!
    (for you)

    View Slide

  41. Crutch

    View Slide

  42. Virtual keyboards suck

    View Slide

  43. No tactile feedback.

    View Slide

  44. Individual keys are small.

    View Slide

  45. Keyboard entry
    =
    50% of the screen is gone
    lol cant see ur
    content

    View Slide

  46. View Slide

  47. Virtual keyboards rule.

    View Slide

  48. Keyboards hide
    when unnecessary.

    View Slide

  49. Keyboards change
    when necessary.

    View Slide

  50. View Slide

  51. Typing still sucks.

    View Slide

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

    View Slide

  53. View Slide

  54. View Slide

  55. Can tap these
    while looking at
    screen content
    Can’t tap these
    without covering
    the screen

    View Slide

  56. Hands also hold the device.

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. The screen is small.

    View Slide

  62. The human eye
    can only see so much.

    View Slide

  63. View Slide

  64. View Slide

  65. Make every pixel count.

    View Slide

  66. Summary
    Direct Manipulation
    Keyboards
    Orientation

    View Slide

  67. Activity 1:
    What Does It Even Do?

    View Slide

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

    View Slide

  69. View Slide

  70. We’re going to make
    an OSCON app.
    Magic Social Friend Finder

    View Slide

  71. We’ll go through the process
    of conceptualising and
    designing an app.

    View Slide

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

    View Slide

  73. Designing a Mobile App

    View Slide

  74. Our Process

    View Slide

  75. The tools you’ll need:

    View Slide

  76. The tools you’ll need:
    A Brain Pen and Paper

    View Slide

  77. Start with an outline.

    View Slide

  78. “I want to find my friends
    when we’re at OSCON.”

    View Slide

  79. Outlines can be
    iterated upon.

    View Slide

  80. “I want to quickly find my friends
    when we’re at OSCON.”

    View Slide

  81. View Slide

  82. Task:
    What can you do
    with your app?

    View Slide

  83. What can you do
    with your app?
    Write down problems you can solve with your app

    View Slide

  84. What We Thought
    I want to know where my friends are.
    I want to know if a talk is worth catching up on.
    I want to meet up with friends during the next
    session.
    I want to have lunch with interesting people.

    View Slide

  85. Goals -> Features

    View Slide

  86. Features are what the app can do
    “I can show your friend’s locations on a map”
    “I can know where my friends are”
    Goals are what the user can do

    View Slide

  87. What We Thought
    I want to know where my friends are.
    I want to know if a talk is worth catching up on.
    I want to meet up with friends during the next
    session.
    I want to have lunch with interesting people.
    Map
    view?
    Session
    ratings
    Public
    plans

    View Slide

  88. Task:
    Which features are
    most important?

    View Slide

  89. Which features are
    most important?

    View Slide

  90. Debrief.

    View Slide

  91. Mobile Design Principles
    Not the web, not desktop apps, not the command line.
    Really.

    View Slide

  92. View Slide

  93. View Slide

  94. •Enchant me
    •Simplify my life
    •Make me amazing
    “Creative Vision”
    http://developer.android.com/design/get-started/creative-vision.html

    View Slide

  95. We have no idea
    what these mean.

    View Slide

  96. View Slide

  97. “A material metaphor is the unifying theory of a
    rationalized space and a system of motion. The
    material is grounded in tactile reality, inspired by the
    study of paper and ink, yet technologically advanced
    and open to imagination and magic.”
    http://www.google.com/design/

    View Slide

  98. “Doug Fir James Mercer cashew cheese Pearl
    District it's raining again. Also beers late-night happy
    hours fixed gear Holocene bridgetown smoked ham
    ice cream Voodoo Donuts bicycle rights queer
    culture brewvana bubble tea fifth quadrant muesli.”
    http://www.google.com/design/

    View Slide

  99. View Slide

  100. Our Creative Vision

    View Slide

  101. Do one thing
    Do it well

    View Slide

  102. Multiple Features
    One Purpose

    View Slide

  103. View Slide

  104. Make it easy to leave
    Make it even easier to return

    View Slide

  105. “Our goal is to have people leave our website
    as quickly as possible.”
    http://www.google.com/about/company/philosophy/

    View Slide

  106. View Slide

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

    View Slide

  108. Your app should provide
    features to other apps

    View Slide

  109. View Slide

  110. View Slide

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

    View Slide

  112. If other apps provide
    functionality, use it

    View Slide

  113. View Slide

  114. WRONG
    BETTER

    View Slide

  115. View Slide

  116. What does this mean?

    View Slide

  117. Android UI Paradigms
    Case Study

    View Slide

  118. Actions

    View Slide

  119. Do something
    Do it well

    View Slide

  120. Do something
    Make it obvious

    View Slide

  121. View Slide

  122. The Action Bar

    View Slide

  123. View Slide

  124. What are actions?

    View Slide

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

    View Slide

  126. Frequent

    View Slide

  127. Important

    View Slide

  128. Typical

    View Slide

  129. View Slide

  130. View Slide

  131. What’s not in the action bar
    •Jump To Top
    •View my Profile
    •Mute
    •View Settings

    View Slide

  132. Action Bar Paradigms

    View Slide

  133. View Slide

  134. View Slide

  135. Menus aren’t gone
    !
    :(

    View Slide

  136. View Slide

  137. Frequent
    Important
    Typical

    View Slide

  138. Always
    Sometimes
    Never

    View Slide

  139. Action Bars
    The most important
    things go here
    Split or single?
    Overflow Menu: Always,
    sometimes, or never?

    View Slide

  140. Navigation

    View Slide

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

    View Slide

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

    View Slide

  143. Navigation
    with the action bar

    View Slide

  144. View Slide

  145. Tabs
    Stack Liszt

    View Slide

  146. Tabs
    Stack List

    View Slide

  147. Tabs

    View Slide

  148. View Slide

  149. View Slide

  150. List navigation

    View Slide

  151. View Slide

  152. View Slide

  153. Lists
    ONE thing
    ALL of the things
    SOME of the things

    View Slide

  154. Tabs
    SOME of the things
    SOME of the things SOME of the things

    View Slide

  155. Graphic Design

    View Slide

  156. View Slide

  157. Text

    View Slide

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

    View Slide

  159. Swiss
    Design

    View Slide

  160. View Slide

  161. View Slide

  162. View Slide

  163. FONT
    WEIGHTS
    HAVE
    MEANING

    View Slide

  164. View Slide

  165. Icons

    View Slide

  166. View Slide

  167. View Slide

  168. View Slide

  169. View Slide

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

    View Slide

  171. When is it obvious?

    View Slide

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

    View Slide

  173. It’s obvious if
    it’s obvious

    View Slide

  174. View Slide

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

    View Slide

  176. View Slide

  177. Text
    Colours
    Icons
    In order of importance

    View Slide

  178. Summary
    Think about design.
    Please.

    View Slide

  179. Coffee
    Time.
    Coffee time Coffee time Coffee time.

    View Slide

  180. http://oreil.ly/oscon2014-lessbadly

    View Slide

  181. Welcome Back!

    View Slide

  182. Activity 2:
    How Does It Even Do It?

    View Slide

  183. Wireframing Exercise

    View Slide

  184. I want to know where my friends are.
    I want to know if a talk is worth catching up on.
    I want to meet up with friends during the next session.
    I want to have lunch with interesting people.

    View Slide

  185. These goals need to be
    translated into user
    interfaces

    View Slide

  186. How can this work, in the
    real world?

    View Slide

  187. With wireframes!

    View Slide

  188. • I want to know where my friends are.
    • I want to know if a talk is worth catching up on.
    • I want to meet up with friends during the next session.
    • I want to have lunch with interesting people.
    Goal Breakdown

    View Slide

  189. Feature Breakdown
    • I want to know where my friends are.

    View Slide

  190. I want to know where my friends are.
    Data Representations
    GPS Map (outdoor or indoor), room number
    Check-ins, user schedule?
    (Foursquare, custom, etc)
    Maps, list
    Social profile
    (Twitter, Facebook, etc)
    Name, tags, photos
    Talk info
    (Name, times, room number)
    Text, calendar, indoor map
    More…

    View Slide

  191. Check-ins, user schedule?
    (Foursquare, custom, etc)
    Maps, list
    Talk info
    (Name, times, room number)
    Text, calendar, indoor map

    View Slide

  192. MAP
    Jane Smith
    Raoul McGuinness
    Unfortunately, Design Tutorial…
    Some other talk, I guess
    Map showing
    friend
    locations
    List of
    friends
    showing talk
    names
    Tap name to
    show details
    on the talk
    they’re in?

    View Slide

  193. View Slide

  194. “Friends” tab
    “Talks” tab
    Map / List
    of friends
    List of talks
    Talk details

    View Slide

  195. The Activity
    You have some cards!
    These say who you’ll be working with.

    View Slide

  196. Say hi to your
    new partner.

    View Slide

  197. Work out what screens you
    need, together.

    View Slide

  198. Work out what screens
    you need, together.
    I want to know where my friends are.
    I want to know if a talk is worth catching up on.
    I want to meet up with friends during the next session.
    I want to have lunch with interesting people.

    View Slide

  199. B Team: Map Screen
    !
    C Team: Talk Details

    View Slide

  200. Each pair:
    Design your screen.
    Consider:
    What information is needed for this screen?
    How can that be conveyed?
    What’s the best way to convey it?

    View Slide

  201. Find the pair next to you.
    !
    Now you’re a group of 4.

    View Slide

  202. Task:
    Link the screens

    View Slide

  203. Discussion
    What did you design?

    View Slide

  204. One app for multiple platforms

    View Slide

  205. Philosophy

    View Slide

  206. View Slide

  207. iOS Android
    Deference Make Me Amazing
    Clarity Simplify My Life
    Depth Enchant Me
    Philosophies

    View Slide

  208. Philosophies
    iOS Android Actual People
    Deference Make Me Amazing Um
    Clarity Simplify My Life WTF
    Depth Enchant Me Huh?

    View Slide

  209. Applications are different
    things on iOS and Android

    View Slide

  210. Android: Applications are
    collections of services

    View Slide

  211. iOS: Applications are
    individual units of
    functionality
    Though iOS 8 is changing this very slightly

    View Slide

  212. Example

    View Slide

  213. View Slide

  214. View Slide

  215. View Slide

  216. View Slide

  217. View Slide

  218. View Slide

  219. View Slide

  220. View Slide

  221. View Slide

  222. View Slide

  223. View Slide

  224. Foursquare
    Search, discovery, recommendations
    Swarm
    Checkins, meet-ups, competition

    View Slide

  225. View Slide

  226. View Slide

  227. View Slide

  228. View Slide

  229. View Slide

  230. View Slide

  231. View Slide

  232. View Slide

  233. Design for an
    integrated experience

    View Slide

  234. View Slide

  235. iOS and Android Look Different
    not so
    ^

    View Slide

  236. Both use Flat Design

    View Slide

  237. View Slide

  238. View Slide

  239. Simple geometric fundamental shapes
    Slight shading to imply volume
    Very subtle shadowing to create depth
    Icons rely on silhouettes

    View Slide

  240. Layout

    View Slide

  241. View Slide

  242. “In material design, every pixel
    drawn by an application resides on
    a sheet of paper.”
    http://www.google.com/design/spec/layout/layout-principles.html

    View Slide

  243. View Slide

  244. Windows Phone
    (Coverage given proportional to market share)

    View Slide

  245. Activity 3:
    Does It Even Actually Work?

    View Slide

  246. An aside:
    Heuristic Analysis

    View Slide

  247. View Slide

  248. Percentage of Usability
    Problems Found
    0
    25
    50
    75
    100
    Number of Evaluators
    0 5 10 15

    View Slide

  249. Analyse your results.
    Create findings.

    View Slide

  250. Split your teams up.
    Take turns explaining your app.
    Figure out what’s wrong.
    Task

    View Slide

  251. Task
    What’s wrong with your UI?

    View Slide

  252. Debrief

    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 when
    that’s done?

    View Slide

  260. Option 1:
    Do nothing

    View Slide

  261. Option 2:

    View Slide

  262. Option 3:
    Quietly indicate.

    View Slide

  263. Option 3:
    Quietly indicate.

    View Slide

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

    View Slide

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

    View Slide

  266. Be responsive.

    View Slide

  267. Lag equals death.
    76% of people who hate their phones do so
    because apps aren’t responsive enough.
    This statistic is made up.

    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. Main screen
    Straightforward, aesthetic, consistent.

    View Slide

  280. Think about 

    the ecosystem
    It’s more than just your app.

    View Slide

  281. It starts when you sell it.

    View Slide

  282. NO NO NO NO NO NO NO NO

    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. WE ARE NOT BITTER

    View Slide

  287. Beware the Port

    View Slide

  288. UI ports from iOS
    to Android
    look bad.

    View Slide

  289. View Slide

  290. NO NO NO

    View Slide

  291. NO NO NO

    View Slide

  292. Start development early.

    View Slide

  293. Greatest Strength?
    Wide variety of form factors and device types.

    View Slide

  294. Biggest Weakness?
    Wide variety of form factors and device types.

    View Slide

  295. Summary.
    This is a summary, yes.

    View Slide

  296. Thanks for coming!

    View Slide

  297. Final, Important, Things
    “The tutorial was great, and covered everything it said
    it would. I was confused by their persistent use of
    Seattle imagery though, given that we’re in Portland.”
    Sample Comment
    http://dreadful.solutions
    Give us feedback

    View Slide

  298. @thesecretlab @chrisjrn

    View Slide

  299. oreil.ly/oscon2014-lessbadly

    View Slide

  300. Portable Logic/Native UI
    Wednesday 4:10 PM
    Portland 251
    @chrisjrn
    How Do I Game Design?
    Tuesday 2:30 PM
    Portland 252
    @desplesda + @parisba
    Free Books! Book signing!
    Tuesday 3:10 PM
    O’Reilly Booth, Expo Hall

    View Slide