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

6ed02dec32058508c6feb43b2fbc94f7?s=47 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

6ed02dec32058508c6feb43b2fbc94f7?s=128

Secret Lab

July 21, 2014
Tweet

Transcript

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

  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
  3. Introduction (us, what’s going on, when lunch is, etc, etc,

    etc)
  4. Chris Neugebauer Jon Manning Paris Buttfield-Addison Python developer Game developer

    Grumpy old man QUALIFIED TO RUN MOBILE DESIGN TUTORIAL
  5. None
  6. Chris Neugebauer Jon Manning Paris Buttfield-Addison @chrisjrn @desplesda @parisba

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

    make sense.
  8. We are here to talk about mobile.

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

  10. This tutorial Designing Mobile Apps Idea Design

  11. Housekeeping

  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.
  13. None
  14. Groupwork Drawing

  15. Agenda Talk Activity 1 Talk Coffee Activity 2 Talk Activity

    3 Wrap-up
  16. Let’s talk about humans.

  17. Humans.

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

  19. Humans are arrogant. They’ll expect other people to anticipate what

    they want, 
 and give it to them the moment they want it.
  20. Humans are lazy. They don’t want to work to get

    nice things.
  21. Humans are easily bored. If something takes longer than a

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

  23. We’re kind of exaggerating.

  24. None
  25. None
  26. Mobile Design

  27. Mobile computers are different to desktop computers.

  28. Mobile apps are different to other apps.

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

    write Unix programs.
  30. None
  31. Small screens.  Short attention spans. Limited capacity.

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

  33. None
  34. Direct Manipulation Rocks

  35. Scrolling with inertia!

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

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

  39. Direct manipulation sucks!

  40. Direct manipulation sucks! (for you)

  41. Crutch

  42. Virtual keyboards suck

  43. No tactile feedback.

  44. Individual keys are small.

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

    lol cant see ur content
  46. None
  47. Virtual keyboards rule.

  48. Keyboards hide when unnecessary.

  49. Keyboards change when necessary.

  50. None
  51. Typing still sucks.

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

  53. None
  54. None
  55. Can tap these while looking at screen content Can’t tap

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

  57. None
  58. None
  59. None
  60. None
  61. The screen is small.

  62. The human eye  can only see so much.

  63. None
  64. None
  65. Make every pixel count.

  66. Summary Direct Manipulation Keyboards Orientation

  67. Activity 1: What Does It Even Do?

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

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

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

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

    Say hello!
  73. Designing a Mobile App

  74. Our Process

  75. The tools you’ll need:

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

  77. Start with an outline.

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

  79. Outlines can be iterated upon.

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

    OSCON.”
  81. None
  82. Task: What can you do with your app?

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

    you can solve with your app
  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.
  85. Goals -> Features

  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
  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
  88. Task: Which features are most important?

  89. Which features are most important?

  90. Debrief.

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

    the command line. Really.
  92. None
  93. None
  94. •Enchant me •Simplify my life •Make me amazing “Creative Vision”

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

  96. None
  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/
  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/
  99. None
  100. Our Creative Vision

  101. Do one thing  Do it well

  102. Multiple Features One Purpose

  103. None
  104. Make it easy to leave Make it even easier to

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

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

  108. Your app should provide features to other apps

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

  112. If other apps provide functionality, use it

  113. None
  114. WRONG BETTER

  115. None
  116. What does this mean?

  117. Android UI Paradigms Case Study

  118. Actions

  119. Do something Do it well

  120. Do something Make it obvious

  121. None
  122. The Action Bar

  123. None
  124. What are actions?

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

  126. Frequent

  127. Important

  128. Typical

  129. None
  130. None
  131. What’s not in the action bar •Jump To Top •View

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

  133. None
  134. None
  135. Menus aren’t gone ! :(

  136. None
  137. Frequent Important Typical

  138. Always Sometimes Never

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

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

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

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

  143. Navigation with the action bar

  144. None
  145. Tabs Stack Liszt

  146. Tabs Stack List

  147. Tabs

  148. None
  149. None
  150. List navigation

  151. None
  152. None
  153. Lists ONE thing ALL of the things SOME of the

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

    of the things
  155. Graphic Design

  156. None
  157. Text

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

  159. Swiss Design

  160. None
  161. None
  162. None
  163. FONT WEIGHTS HAVE MEANING

  164. None
  165. Icons

  166. None
  167. None
  168. None
  169. None
  170. Icons should be obvious. If it’s not obvious, use text.

  171. When is it obvious?

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

  173. It’s obvious if it’s obvious

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

  176. None
  177. Text Colours Icons In order of importance

  178. Summary Think about design. Please.

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

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

  181. Welcome Back!

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

  183. Wireframing Exercise

  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.
  185. These goals need to be translated into user interfaces

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

  187. With wireframes!

  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
  189. Feature Breakdown • I want to know where my friends

    are.
  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…
  191. Check-ins, user schedule? (Foursquare, custom, etc) Maps, list Talk info

    (Name, times, room number) Text, calendar, indoor map
  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?
  193. None
  194. “Friends” tab “Talks” tab Map / List of friends List

    of talks Talk details
  195. The Activity You have some cards! These say who you’ll

    be working with.
  196. Say hi to your new partner.

  197. Work out what screens you need, together.

  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.
  199. B Team: Map Screen ! C Team: Talk Details

  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?
  201. Find the pair next to you. ! Now you’re a

    group of 4.
  202. Task: Link the screens

  203. Discussion What did you design?

  204. One app for multiple platforms

  205. Philosophy

  206. None
  207. iOS Android Deference Make Me Amazing Clarity Simplify My Life

    Depth Enchant Me Philosophies
  208. Philosophies iOS Android Actual People Deference Make Me Amazing Um

    Clarity Simplify My Life WTF Depth Enchant Me Huh?
  209. Applications are different things on iOS and Android

  210. Android: Applications are collections of services

  211. iOS: Applications are individual units of functionality Though iOS 8

    is changing this very slightly
  212. Example

  213. None
  214. None
  215. None
  216. None
  217. None
  218. None
  219. None
  220. None
  221. None
  222. None
  223. None
  224. Foursquare Search, discovery, recommendations Swarm Checkins, meet-ups, competition

  225. None
  226. None
  227. None
  228. None
  229. None
  230. None
  231. None
  232. None
  233. Design for an integrated experience

  234. None
  235. iOS and Android Look Different not so ^

  236. Both use Flat Design

  237. None
  238. None
  239. Simple geometric fundamental shapes Slight shading to imply volume Very

    subtle shadowing to create depth Icons rely on silhouettes
  240. Layout

  241. None
  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
  243. None
  244. Windows Phone (Coverage given proportional to market share)

  245. Activity 3: Does It Even Actually Work?

  246. An aside: Heuristic Analysis

  247. None
  248. Percentage of Usability Problems Found 0 25 50 75 100

    Number of Evaluators 0 5 10 15
  249. Analyse your results. Create findings.

  250. Split your teams up. Take turns explaining your app. Figure

    out what’s wrong. Task
  251. Task What’s wrong with your UI?

  252. Debrief

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

  260. Option 1: Do nothing

  261. Option 2:

  262. Option 3: Quietly indicate.

  263. Option 3: Quietly indicate.

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

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

  266. Be responsive.

  267. Lag equals death. 76% of people who hate their phones

    do so because apps aren’t responsive enough. This statistic is made up.
  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. Main screen Straightforward, aesthetic, consistent.

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

    app.
  281. It starts when you sell it.

  282. NO NO NO NO NO NO NO NO

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

  287. Beware the Port

  288. UI ports from iOS to Android look bad.

  289. None
  290. NO NO NO

  291. NO NO NO

  292. Start development early.

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

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

  295. Summary. This is a summary, yes.

  296. Thanks for coming!

  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
  298. @thesecretlab @chrisjrn

  299. oreil.ly/oscon2014-lessbadly

  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