“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
   

   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