Cross-device, Cross-platform: Mobile Design Tutorial

OSCON 2015

Transcript

1. Cross-device, cross-platform: 

   Designing for the entire mobile universe
   #tinketytonk
   

   View Slide

2. Mobile Design Tutorial with a Title 

   Invented By An Marketing Department
   Totally Not an Android Tutorial in Disguise™
   #tinketytonk
   

   View Slide

3. @parisba @chrisjrn
   

   View Slide

4. View Slide

5. We’re from Australia
   We apologise in advance.
   (This picture is of the Prime Minister of Australia.)
   

   View Slide

6. We Will Not Be Writing Code.
   

   View Slide

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

   View Slide

8. This Is Not A
   Material Design
   HOWTO
   We might mention it occasionally, though.
   

   View Slide

9. Housekeeping
   

   View Slide

10. We run until 5 PM
    Afternoon Break from 3 to 3:30 PM
    

    View Slide

11. unique challenges of mobile devices
    rules for mobile app developers wireframes
    usability and look
    

    View Slide

12. unique challenges of mobile devices
    rules for mobile app developers
    wireframes
    usability and look
    What’s the plan?
    Mobile Design + Parting Thoughts
    Mobile Computing and Interaction
    Existing with other Apps and Devices
    Building Apps and Testing Apps
    

    View Slide

13. Activities
    Drawing
    Group Work
    Diagrams
    

    View Slide

14. Activity
    

    View Slide

15. Apps are great at doing
    small, helpful things.
    

    View Slide

16. Help me move house!
    I’m moving from Portland to Austin this year!
    

    View Slide

17. What does a house
    moving app need?
    Introduce yourself to the person next to you, and discuss…
    

    View Slide

18. That Was Fun!
    Anything interesting?
    

    View Slide

19. What are we

    actually Making?
    

    View Slide

20. Social TODO lists
    Scheduling tasks with friends
    Finding people to help out
    Finding nearby tasks to help out with
    

    View Slide

21. Find location on map
    Show list of
    friends
    Publishes task to
    friends
    CANCEL
    SAVE
    TITLE
    WHERE
    WHEN
    WHO
    Collect Boxes
    29 NE Broadway
    20 July at 2:39PM
    Paris B-A; Bob Condo...
    Ask for helpers
    dit Task
    21
    Move Piano
    with Josh and Paris
    22 Jul 1PM
    Map View
    My Tasks
    My Tasks
    TODAY
    TOMORROW
    Collect Boxes
    2:30PM
    Paris
    Bob
    Needs more helpers!
    Move Piano
    1:00PM
    Paris
    Josh
    Go to map view
    Scrolls off the page
    Shown if you're
    still asking for
    help
    Let Me Help!
    SOON
    Collect Boxes
    2:30PM
    Help Chris!
    Assemble Desk
    3:00PM
    Help Dave!
    LATER
    Move Piano
    Tuesday 1PM
    Disassemble Ke...Wednesday 1PM
    Go to map view
    Scrolls off the bottom
    Click entry to go
    to details page
    Compact view
    for later tasks
    

    View Slide

22. How are we
    getting there?
    

    View Slide

23. 1. Figure out what’s in the app
    2. Design how the app’s laid out
    3. Figure out how it fits together
    4. See how it will work
    

    View Slide

24. No Code
    

    View Slide

25. And now…
    

    View Slide

26. Mobile Computing
    and Interaction
    

    View Slide

27. Only some things.
    Not all of the things.
    

    View Slide

28. Don’t try to do everything.
    

    View Slide

29. View Slide

30. View Slide

31. Serve a purpose.
    

    View Slide

32. It’s not a computer.
    But it is a computer.
    

    View Slide

33. Let’s talk about humans.
    

    View Slide

34. Humans.
    

    View Slide

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

    View Slide

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

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

    View Slide

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

    they’re not interested.
    

    View Slide

39. Behold: your
    customer!
    

    View Slide

40. We’re kind of exaggerating.
    

    View Slide

41. View Slide

42. View Slide

43. Mobile computers are different
    to desktop computers.
    

    View Slide

44. Mobile apps are different to
    other apps.
    

    View Slide

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

    View Slide

46. View Slide

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

    View Slide

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

    View Slide

49. View Slide

50. Direct Manipulation Rocks
    

    View Slide

51. Scrolling with inertia!
    

    View Slide

52. View Slide

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

    View Slide

54. Direct manipulation rocks!
    

    View Slide

55. Direct manipulation sucks!
    

    View Slide

56. Direct manipulation sucks!
    (for you)
    

    View Slide

57. Crutch
    

    View Slide

58. Virtual keyboards suck
    

    View Slide

59. No tactile feedback.
    

    View Slide

60. Individual keys are small.
    

    View Slide

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

    View Slide

62. View Slide

63. Virtual keyboards rule.
    

    View Slide

64. Keyboards hide
    when unnecessary.
    

    View Slide

65. Keyboards change
    when necessary.
    

    View Slide

66. View Slide

67. Typing still sucks.
    

    View Slide

68. Fingers are big, screens are small
    

    View Slide

69. How we use touch interfaces
    

    View Slide

70. How we don’t use touch interfaces
    

    View Slide

71. Real world things and digital things
    

    View Slide

72. Fingers are big, screens are small
    

    View Slide

73. Touch targets
    

    View Slide

74. View Slide

75. Minimum size
    

    View Slide

76. View Slide

77. View Slide

78. Reachable region
    

    View Slide

79. Courtesy Scott Hurff
    

    View Slide

80. View Slide

81. View Slide

82. Hands are opaque
    

    View Slide

83. View Slide

84. View Slide

85. Controls at the top of the screen:
    Replaces what you’re looking at
    Controls at the bottom of the screen:
    Modifies you’re looking at
    

    View Slide

86. Controls at the top of the screen:
    Back button; URL field; new button
    Controls at the bottom of the screen:
    Check in button; keyboard
    

    View Slide

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

    View Slide

88. View Slide

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

    View Slide

90. Hands also hold the device.
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. The screen is small.
    

    View Slide

95. The human eye
    can only see so much.
    

    View Slide

96. View Slide

97. View Slide

98. Make every pixel count.
    

    View Slide

99. Goals -> Features
    

    View Slide

100. Features are what the app can do
     “Seeing what task are left to do”
     “I want to manage my move”
     Goals are what the user can do
     

     View Slide

101. Activity
     

     View Slide

102. Prune your feature list.
     Just Enough Computer.
     

     View Slide

103. 1. Take a feature list.
     2. Pick the three most important.
     3. Argue why they’re the most important.
     

     View Slide

104. Debrief.
     Adding tasks that
     make up my move Seeing which tasks I
     have completed
     Adding tasks to my
     personal calendar
     Seeing which tasks I
     have to do today
     Adding tasks to my
     personal calendar
     Asking my friends if
     they can help
     

     View Slide

105. PART 2
     Mobile Design Concepts
     

     View Slide

106. PART 2
     Android Design Concepts
     

     View Slide

107. Actions
     

     View Slide

108. Do something
     Do it well
     

     View Slide

109. Do something
     Make it obvious
     

     View Slide

110. View Slide

111. The Action Bar
     app icon
     action items action overflow
     

     View Slide

112. Toolbars
     The App Bar
     

     View Slide

113. View Slide

114. What are actions?
     

     View Slide

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

     View Slide

116. Frequent
     

     View Slide

117. Important
     

     View Slide

118. Typical
     

     View Slide

119. View Slide

120. View Slide

121. What’s not in the app bar
     •Find & Replace
     •Export
     •Offline
     •Document
     Details
     

     View Slide

122. Toolbar Paradigms
     

     View Slide

123. View Slide

124. View Slide

125. Menus aren’t gone
     :(
     

     View Slide

126. View Slide

127. Frequent
     Important
     Typical
     

     View Slide

128. Always
     Sometimes
     Never
     

     View Slide

129. Toolbars
     The most important things go
     here
     Split or single?
     Overflow Menu: Always,
     sometimes, or never?
     

     View Slide

130. Navigation
     

     View Slide

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

     View Slide

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

     View Slide

133. Navigation
     with toolbars
     

     View Slide

134. View Slide

135. Tabs
     Stack Liszt
     

     View Slide

136. Tabs
     Stack List
     

     View Slide

137. Tabs
     

     View Slide

138. View Slide

139. View Slide

140. List navigation
     

     View Slide

141. View Slide

142. View Slide

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

     View Slide

144. Tabs
     SOME of the things
     SOME of the things SOME of the things
     

     View Slide

145. Graphic Design
     

     View Slide

146. View Slide

147. Text
     Text
     Text
     Text
     

     View Slide

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

     View Slide

149. Swiss
     Design
     

     View Slide

150. View Slide

151. View Slide

152. View Slide

153. FONT
     WEIGHTS
     HAVE
     MEANING
     

     View Slide

154. View Slide

155. Icons
     

     View Slide

156. View Slide

157. View Slide

158. View Slide

159. View Slide

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

     View Slide

161. When is it obvious?
     

     View Slide

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

     View Slide

163. It’s obvious if
     it’s obvious
     

     View Slide

164. View Slide

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

     View Slide

166. View Slide

167. Text
     Colours
     Icons
     In order of importance
     

     View Slide

168. Activity
     

     View Slide

169. 1. Improve some wireframes
     2. Make some new ones
     

     View Slide

170. What Are Wireframes?
     

     View Slide

171. MAP
     Jane Smith
     Raoul McGuinness
     12:30 PM: Move Piano
     Some other task goes here
     Map showing
     friend
     locations
     List of
     friends
     showing task
     names
     Tap name to
     show details
     on the task
     they want
     done?
     

     View Slide

172. View Slide

173. “Available Tasks”
     screen
     “My Tasks”
     screen
     Map / List
     of friends
     List of tasks
     Task details
     

     View Slide

174. View Slide

175. Screens
     IMPROVE: Tasks ordered by time
     MAKE: “New Task”
     MAKE: Tasks on map
     

     View Slide

176. 1. Improve the task list screen
     2. Design the new task and map screens
     ( 10 minutes )
     

     View Slide

177. Here’s One We Prepared
     Earlier.
     

     View Slide

178. Coffee Time
     

     View Slide

179. Activity
     

     View Slide

180. Activity
     1. Take your wireframes
     2. Link them up
     

     View Slide

181. Debrief.
     

     View Slide

182. Existing with other
     Apps and Devices
     

     View Slide

183. View Slide

184. View Slide

185. View Slide

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

     View Slide

187. We have no idea
     what these mean.
     

     View Slide

188. View Slide

189. “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

190. “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 brewvana bubble tea fifth quadrant muesli.”
     http://www.google.com/design/
     

     View Slide

191. How to be an
     Android App
     

     View Slide

192. Do one thing
     Do it well
     

     View Slide

193. Multiple Features
     One Purpose
     

     View Slide

194. View Slide

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

     View Slide

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

     View Slide

197. View Slide

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

     View Slide

199. Your app should provide
     features to other apps
     

     View Slide

200. View Slide

201. View Slide

202. If there’s a native
     experience,
     

     View Slide

203. If other apps provide
     functionality, use it
     

     View Slide

204. View Slide

205. WRONG
     BETTER
     

     View Slide

206. View Slide

207. View Slide

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

     View Slide

209. View Slide

210. View Slide

211. View Slide

212. View Slide

213. View Slide

214. View Slide

215. View Slide

216. View Slide

217. Design for an
     integrated experience
     

     View Slide

218. iOS and Android
     

     View Slide

219. Philosophy
     

     View Slide

220. View Slide

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

     View Slide

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

     View Slide

223. Applications are different
     things on iOS and Android
     

     View Slide

224. Android: Applications are
     collections of services
     

     View Slide

225. iOS: Applications are
     individual units of functionality
     Though iOS 8 and 9 changes this very slightly
     

     View Slide

226. Example
     

     View Slide

227. View Slide

228. View Slide

229. View Slide

230. View Slide

231. View Slide

232. View Slide

233. View Slide

234. View Slide

235. View Slide

236. View Slide

237. iOS and Android Look Different
     not so
     ^
     

     View Slide

238. Both use Flat Design
     

     View Slide

239. View Slide

240. View Slide

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

     View Slide

242. Layout
     

     View Slide

243. View Slide

244. “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

245. View Slide

246. View Slide

247. Shaded
     Not important
     Raised
     Important Action
     Foreground
     Current focus
     

     View Slide

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

     View Slide

249. Big Screens

     Small Screens
     

     View Slide

250. Tablets are like phones
     

     View Slide

251. Not Very Big
     

     View Slide

252. Touch Screens
     

     View Slide

253. Task-Oriented
     

     View Slide

254. Tablets aren’t like phones
     

     View Slide

255. Phones are small*
     Tablets are not
     

     View Slide

256. (Phablets
     Tablones are ???)
     

     View Slide

257. (Phablets
     Tablones are ???)
     

     View Slide

258. Tablones
     Portrait is like a phone
     Landscape is not
     

     View Slide

259. Phones are Modal
     Tablets offer Context
     

     View Slide

260. More Space
     !=
     More Features
     

     View Slide

261. Designing for Tablets
     

     View Slide

262. Phone designs
     rarely work well
     

     View Slide

263. View Slide

264. Screens on Phones
     are
     Elements on Tablets
     

     View Slide

265. `
     

     View Slide

266. Master-Detail
     

     View Slide

267. LAZY!
     

     View Slide

268. View Slide

269. Other Layouts
     

     View Slide

270. View Slide

271. View Slide

272. Maps
     

     View Slide

273. Some apps don’t
     need new layouts
     

     View Slide

274. View Slide

275. Which works best?
     You decide!
     

     View Slide

276. Activity
     

     View Slide

277. 1. Cut up your wireframes
     2. Rearrange them into a big screen
     

     View Slide

278. (5 minutes!)
     1. Cut up your wireframes
     2. Rearrange them into a big screen
     

     View Slide

279. Debrief
     

     View Slide

280. Building Apps and Testing Apps
     

     View Slide

281. Usability testing
     

     View Slide

282. Heuristic Analysis
     

     View Slide

283. View Slide

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

     View Slide

285. Analyse your results.
     Create findings.
     

     View Slide

286. Activity
     

     View Slide

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

     View Slide

288. Task
     What’s wrong with your UI?
     

     View Slide

289. Debrief
     

     View Slide

290. Trends in mobile design
     

     View Slide

291. Graphic design
     

     View Slide

292. “Old World” Design
     (2008-2012)
     

     View Slide

293. Skeuomorphism
     

     View Slide

294. Materials
     

     View Slide

295. Gradients simulating lighting
     

     View Slide

296. Richness
     

     View Slide

297. View Slide

298. View Slide

299. View Slide

300. “New World” Design
     (2012-2015)
     

     View Slide

301. High contrast
     

     View Slide

302. Solid colours
     

     View Slide

303. Vibrancy
     

     View Slide

304. View Slide

305. View Slide

306. View Slide

307. Lessons
     

     View Slide

308. Define a colour
     scheme for your app
     

     View Slide

309. You won’t need a
     designer immediately
     

     View Slide

310. But…
     Design is half the product
     

     View Slide

311. Wrapping up
     

     View Slide

312. Bringing it together
     (We have a point to make)
     

     View Slide

313. Building apps
     people want to use
     Harder than you think.
     

     View Slide

314. People do not
     like phones.
     Because they’re generally
     unpleasant to use.
     

     View Slide

315. Mobile users hate
     being surprised.
     

     View Slide

316. Dialog boxes suck.
     Being modal also sucks.
     

     View Slide

317. A similar problem:
     deleting stuff
     

     View Slide

318. What should happen when
     that’s done?
     

     View Slide

319. Option 1:
     Do nothing
     

     View Slide

320. Option 2:
     

     View Slide

321. Option 3:
     Quietly
     indicate.
     

     View Slide

322. Option 3:
     Quietly
     indicate.
     

     View Slide

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

     View Slide

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

     View Slide

325. Be responsive.
     

     View Slide

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

327. View Slide

328. Instagram starts uploading here
     Most apps start uploading here
     

     View Slide

329. View Slide

330. Never drop data.
     

     View Slide

331. Expose yourself.
     

     View Slide

332. The device’s conditions change.
     A lot.
     

     View Slide

333. View Slide

334. Things that can change:
     Screen size
     Speed of CPU / GPU
     Available memory
     Storage space
     Network speed
     Everything
     ✔
     ✔
     ✔
     ✔
     ✔
     ✔
     

     View Slide

335. View Slide

336. Minimise your views
     Views are expensive!
     MEMORY PROBLEM
     

     View Slide

337. Think about first launch
     

     View Slide

338. Main screen
     Straightforward, aesthetic, consistent.
     

     View Slide

339. Think about 

     the ecosystem
     It’s more than just your app.
     

     View Slide

340. It starts when you sell it.
     

     View Slide

341. NO NO NO NO NO NO NO
     NO
     

     View Slide

342. Where am I? What can I do?
     What else can I do?
     

     View Slide

343. Constant collaboration
     between design and
     development
     

     View Slide

344. Style your app.
     Never port it.
     

     View Slide

345. View Slide

346. Beware the Port
     

     View Slide

347. UI ports from iOS
     to Android
     look bad.
     

     View Slide

348. View Slide

349. NO NO NO
     

     View Slide

350. NO NO NO
     

     View Slide

351. Start development early.
     

     View Slide

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

     View Slide

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

     View Slide

354. Thanks!
     The door is on the wall
     a.fresh.horse/oscon-2015
     

     View Slide