Cross-device, Cross-platform: Mobile Design Tutorial

Transcript

1. Cross-device, cross-platform: 
 Designing for the entire mobile universe #tinketytonk

2. Mobile Design Tutorial with a Title 
 Invented By An

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

3. @parisba @chrisjrn

4. None

5. We’re from Australia We apologise in advance. (This picture is

   of the Prime Minister of Australia.)

6. We Will Not Be Writing Code.

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

8. This Is Not A Material Design HOWTO We might mention

   it occasionally, though.

9. Housekeeping

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

    3:30 PM

11. unique challenges of mobile devices rules for mobile app developers

    wireframes usability and look

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

13. Activities Drawing Group Work Diagrams

14. Activity

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

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

    this year!

17. What does a house moving app need? Introduce yourself to

    the person next to you, and discuss…

18. That Was Fun! Anything interesting?

19. What are we
 actually Making?

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

    help out Finding nearby tasks to help out with

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

22. How are we getting there?

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

24. No Code

25. And now…

26. Mobile Computing and Interaction

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

28. Don’t try to do everything.

29. None
30. None

31. Serve a purpose.

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

33. Let’s talk about humans.

34. Humans.

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

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

    they want, 
 and give it to them the moment they want it.

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

    nice things.

38. Humans are easily bored. If something takes longer than a

    couple of seconds, 
 they’re not interested.

39. Behold: your customer!

40. We’re kind of exaggerating.

41. None
42. None

43. Mobile computers are different to desktop computers.

44. Mobile apps are different to other apps.

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

    write Unix programs.
46. None

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

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

49. None

50. Direct Manipulation Rocks

51. Scrolling with inertia!

52. None

53. The iPhone’s inertia-like flick scrolling seems to work really well

    for this. - John Gruber, 2007

54. Direct manipulation rocks!
    

55. Direct manipulation sucks!
    

56. Direct manipulation sucks!
    (for you)

57. Crutch

58. Virtual keyboards suck

59. No tactile feedback.

60. Individual keys are small.

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

    lol cant see ur content
62. None

63. Virtual keyboards rule.

64. Keyboards hide when unnecessary.

65. Keyboards change when necessary.

66. None

67. Typing still sucks.

68. Fingers are big, screens are small

69. How we use touch interfaces

70. How we don’t use touch interfaces

71. Real world things and digital things

72. Fingers are big, screens are small

73. Touch targets

74. None

75. Minimum size

76. None
77. None

78. Reachable region

79. Courtesy Scott Hurff

80. None
81. None

82. Hands are opaque

83. None
84. None

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

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

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

88. None

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

    these without covering the screen

90. Hands also hold the device.

91. None
92. None
93. None

94. The screen is small.

95. The human eye
    can only see so much.

96. None
97. None

98. Make every pixel count.

99. Goals -> Features

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

101. Activity

102. Prune your feature list. Just Enough Computer.

103. 1. Take a feature list. 2. Pick the three most

     important. 3. Argue why they’re the most important.

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

105. PART 2 Mobile Design Concepts

106. PART 2 Android Design Concepts

107. Actions

108. Do something
     Do it well

109. Do something
     Make it obvious

110. None

111. The Action Bar app icon action items action overflow

112. Toolbars The App Bar

113. None

114. What are actions?

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

116. Frequent

117. Important

118. Typical

119. None
120. None

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

     •Offline •Document Details

122. Toolbar Paradigms

123. None
124. None

125. Menus aren’t gone
     :(

126. None

127. Frequent
     Important
     Typical

128. Always
     Sometimes
     Never

129. Toolbars The most important things go here Split or single?

     Overflow Menu: Always, sometimes, or never?

130. Navigation

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

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

133. Navigation
     with toolbars

134. None

135. Tabs Stack Liszt

136. Tabs Stack List

137. Tabs

138. None
139. None

140. List navigation

141. None
142. None

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

     things

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

     of the things

145. Graphic Design

146. None

147. Text Text Text Text

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

149. Swiss
     Design

150. None
151. None
152. None

153. FONT
     WEIGHTS
     HAVE
     MEANING

154. None

155. Icons

156. None
157. None
158. None
159. None

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

161. When is it obvious?

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

163. It’s obvious if
     it’s obvious

164. None

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

166. None

167. Text Colours Icons In order of importance

168. Activity

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

170. What Are Wireframes?

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?
172. None

173. “Available Tasks” screen “My Tasks” screen Map / List of

     friends List of tasks Task details
174. None

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

     Tasks on map

176. 1. Improve the task list screen 2. Design the new

     task and map screens ( 10 minutes )

177. Here’s One We Prepared Earlier.

178. Coffee Time

179. Activity

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

181. Debrief.

182. Existing with other Apps and Devices

183. None
184. None
185. None

186. •Enchant me •Simplify my life •Make me amazing “Creative Vision”

     http://developer.android.com/design/get-started/creative-vision.html

187. We have no idea what these mean.

188. None

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/

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/

191. How to be an Android App

192. Do one thing
     Do it well

193. Multiple Features
     One Purpose

194. None

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

     return

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

     quickly as possible.” http://www.google.com/about/company/ philosophy/
197. None

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

199. Your app should provide features to other apps

200. None
201. None

202. If there’s a native experience,
     

203. If other apps provide functionality, use it

204. None

205. WRONG BETTER

206. None
207. None

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

209. None
210. None
211. None
212. None
213. None
214. None
215. None
216. None

217. Design for an integrated experience

218. iOS and Android

219. Philosophy

220. None

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

     Depth Enchant Me Philosophies

222. Philosophies iOS Android Actual People Deference Make Me Amazing Um

     Clarity Simplify My Life WTF Depth Enchant Me Huh?

223. Applications are different things on iOS and Android

224. Android: Applications are collections of services

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

     and 9 changes this very slightly

226. Example

227. None
228. None
229. None
230. None
231. None
232. None
233. None
234. None
235. None
236. None

237. iOS and Android Look Different not so ^

238. Both use Flat Design

239. None
240. None

241. Simple geometric fundamental shapes Slight shading to imply volume Very

     subtle shadowing to create depth Icons rely on silhouettes

242. Layout

243. None

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
245. None
246. None

247. Shaded Not important Raised Important Action Foreground Current focus

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

249. Big Screens
 Small Screens

250. Tablets are like phones

251. Not Very Big

252. Touch Screens

253. Task-Oriented

254. Tablets aren’t like phones

255. Phones are small* Tablets are not

256. (Phablets Tablones are ???)

257. (Phablets Tablones are ???)

258. Tablones Portrait is like a phone Landscape is not

259. Phones are Modal Tablets offer Context

260. More Space != More Features

261. Designing for Tablets

262. Phone designs rarely work well

263. None

264. Screens on Phones are Elements on Tablets

265. `

266. Master-Detail

267. LAZY!

268. None

269. Other Layouts

270. None
271. None

272. Maps

273. Some apps don’t need new layouts

274. None

275. Which works best? You decide!

276. Activity

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

     big screen

278. (5 minutes!) 1. Cut up your wireframes 2. Rearrange them

     into a big screen

279. Debrief

280. Building Apps and Testing Apps

281. Usability testing

282. Heuristic Analysis

283. None

284. Percentage of Usability Problems Found 0 25 50 75 100

     Number of Evaluators 0 5 10 15

285. Analyse your results.
     Create findings.

286. Activity

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

     out what’s wrong. Task

288. Task What’s wrong with your UI?

289. Debrief

290. Trends in mobile design

291. Graphic design

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

293. Skeuomorphism

294. Materials

295. Gradients simulating lighting

296. Richness

297. None
298. None
299. None

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

301. High contrast

302. Solid colours

303. Vibrancy

304. None
305. None
306. None

307. Lessons

308. Define a colour scheme for your app

309. You won’t need a designer immediately

310. But… Design is half the product

311. Wrapping up

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

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

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

     use.

315. Mobile users hate being surprised.

316. Dialog boxes suck. Being modal also sucks.

317. A similar problem:
     deleting stuff

318. What should happen when that’s done?

319. Option 1:
     Do nothing

320. Option 2:

321. Option 3:
     Quietly indicate.

322. Option 3:
     Quietly indicate.

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

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

325. Be responsive.

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

     do so because apps aren’t responsive enough. This statistic is made up.
327. None

328. Instagram starts uploading here Most apps start uploading here

329. None

330. Never drop data.

331. Expose yourself.

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

333. None

334. Things that can change: Screen size Speed of CPU /

     GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔
335. None

336. Minimise your views Views are expensive! MEMORY PROBLEM

337. Think about first launch

338. Main screen Straightforward, aesthetic, consistent.

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

     app.

340. It starts when you sell it.

341. NO NO NO NO NO NO NO NO

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

     I do?

343. Constant collaboration between design and development

344. Style your app. Never port it.

345. None

346. Beware the Port

347. UI ports from iOS
     to Android
     look bad.

348. None

349. NO NO NO

350. NO NO NO

351. Start development early.

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

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

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