“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

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
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.
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.
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.
31. Small screens.
    Short attention spans.
    Limited capacity.
32. The Mouse Doesn’t Exist This picture is a gerbil.
34. Direct Manipulation Rocks
35. Scrolling with inertia!
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
47. Virtual keyboards rule.
48. Keyboards hide when unnecessary.
49. Keyboards change when necessary.
51. Typing still sucks.
52. The user’s hand is a solid object.
55. Can tap these while looking at screen content Can’t tap these without covering the screen
56. Hands also hold the device.
61. The screen is small.
62. The human eye
    can only see so much.
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.
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.”
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.
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.
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/
100. Our Creative Vision
101. Do one thing
     Do it well
102. Multiple Features
     One Purpose
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/
107. Being a great app
     means
     Being great with other apps
108. Your app should provide features to other apps
111. If there’s a native experience,
     provide it.
112. If other apps provide functionality, use it
114. WRONG BETTER
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
122. The Action Bar
124. What are actions?
125. FIT Scheme Frequent Important Typical http://developer.android.com/design/patterns/actionbar.html
126. Frequent
127. Important
128. Typical
131. What’s not in the action bar •Jump To Top •View my Profile •Mute •View Settings
132. Action Bar Paradigms
135. Menus aren’t gone
     ! :(
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
145. Tabs Stack Liszt
146. Tabs Stack List
147. Tabs
150. List navigation
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
157. Text
158. “layout and typography are crisp and meaningful.” http://developer.android.com/design/get-started/creative-vision.html
159. Swiss
     Design
163. FONT
     WEIGHTS
     HAVE
     MEANING
165. Icons
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
175. It’s obvious if
     Google has an icon for it http://developer.android.com/design/downloads/index.html
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?
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
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
224. Foursquare Search, discovery, recommendations Swarm Checkins, meet-ups, competition
233. Design for an integrated experience
235. iOS and Android Look Different not so ^
236. Both use Flat Design
239. Simple geometric fundamental shapes Slight shading to imply volume Very subtle shadowing to create depth Icons rely on silhouettes
240. Layout
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
244. Windows Phone (Coverage given proportional to market share)
245. Activity 3: Does It Even Actually Work?
246. An aside:
     Heuristic Analysis
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.
269. Instagram starts uploading here Most apps start uploading here
271. Never drop data.
272. Expose yourself.
273. The device’s conditions change.
     A lot.
275. Things that can change: Screen size Speed of CPU / GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
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.
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