Designing Great Apple Watch Experiences

Transcription

1 Design #WWDC16 Designing Great Apple Watch Experiences Session 804 Mike Stern User Experience Evangelist 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Watch App Basics

3 Complication Notification App

4 Complication Notification App

5 Complication Notification App

6

7

8

9 Complication Notification App

10 Complication Notification App

11 Complication Notification App

12

13

14

15

16

17

18

19

20

21 Complication Notification App

22 Time

23 Find and Launch App Select Workout Type Choose Goal and Tap Start

24 Find and Launch App Select Workout Type Choose Goal and Tap Start

25 Launch App Quick Start

26 Launch App Quick Start

27

28

29 Controls Workout Metrics

30

31 Glanceable Actionable Responsive

32 Glanceable Actionable Responsive

33 Glanceable Actionable Responsive

34 Glanceable Actionable Responsive

35 Glanceable Actionable Responsive

36

37

38

39

40 10:09

41 10:09

42

43

44

45

46

47

48

49 10:00 11:00 12:00.13:00..14:00.

50

51

52

53

54

55

56

57 Complication Notification App

58 Complication Notification App

59

60

61

62

63

64

65

66

67

68

69

70

71 Do it! Do it! Do it!

72 Information and Status

73

74

75

76

77

78

79 Actionable

80

81

82

83

84

85 What will your complication do?

86 Providing Options

87

88

89

90

91

92

93

94

95 Circular Modular Small Modular Large Utility Small Utility Large

96 Circular Modular Small Modular Large Utility Small Utility Large Extra Large

97 Color Ring Image Ring Text Simple Image Simple Text Stack Image Stack Text

98 Color Ring Image Ring Text Simple Image Simple Text Stack Image Stack Text

99 Ring Image Ring Text Simple Image Simple Text Stack Image Stack Text Circular Complications

100 Modular Columns Standard Body Table Tall Body

101 Modular Columns Standard Body Table Tall Body

102 Columns Standard Body Table Tall Body Modular Large Complications

103 Ring Image Ring Text Simple Image Simple Text Stack Image Stack Text Columns Text Modular Small Complications

104 Simple Utility Chronograph Flat Ring Image Ring Text Square

105 Simple Utility Chronograph Flat Ring Image Ring Text Square

106 Flat Ring Image Ring Text Square Utility Small Complications

107 Utility Large Flat

108 Utility Large Flat

109 Large Flat Utility Large Complications

110 X-Large Ring Image Ring Text Simple Stack

111 X-Large Ring Image Ring Text Simple Stack

112 Ring Image Ring Text Simple Stack Extra Large Complications

113

114 Placeholder Data No Placeholder Data

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132 Things We Do

133 Things We Do Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Work Sleep

134 Things We Do Work Travel Cook meals Eat Shop for clothes Shop for groceries Sleep Visit museums Take photos Hang out Picnic Play sports Party Take scenic drives Ride bike Hike Repair house Ski Exercise dogs Garden Golf Work out Commute Chill Coach kids Play music And much more

135 Complication Notification App

136 Complication Notification App

137 Glanceable

138

139

140

141 Glanceable Notifications Provide a meaningful title

142

143 Glanceable Notifications Provide a meaningful title Only show what s necessary

144 Check In Now Passenger name Johnny Appleseed Flight: 20 Airbus 320 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y) No Smoking

145 Check In Now Passenger name Johnny Appleseed Flight: 20 Airbus 320 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y) No Smoking

146 Check In Now Passenger name Johnny Appleseed Flight: 20 Airbus 320 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y) No Smoking

147 Check In Now Flight: 20 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y)

148 Check In Now Flight: 20 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y)

149 Glanceable Notifications Provide a meaningful title Only show what s necessary Present important information first

150 Check In Now Flight: 20 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y) Check In Now Seat 12F Class: Coach (Y) SFO - JFK Depart: 9:00am Flight: 20 Gate: A102 Boards: 8:20am Res: KRSMPS

151 Check In Now Flight: 20 Seat 12F SFO - JFK Depart: 9:00am Boards: 8:20am Gate: A102 Res: KRSMPS Class: Coach (Y) Check In Now Seat 12F Class: Coach (Y) SFO - JFK Depart: 9:00am Flight: 20 Gate: A102 Boards: 8:20am Res: KRSMPS

152 Glanceable Notifications Provide a meaningful title Only show what s necessary Present important information first Establish visual hierarchy

153 Check In Now Seat 12F Class: Coach (Y) SFO - JFK Depart: 9:00am Flight: 20 Boards: 8:20am Gate: A102 Res: KRSMPS

154

155 Glanceable Notifications Provide a meaningful title Only show what s necessary Present important information first Establish visual hierarchy Use color, graphics and animation

156

157

158 Flight 20 Departing

159

160 Why and When

161

162

163 Why Relevance and When Timing

164 Why Relevance and When Timing

165

166

167 Contextual Relevance

168 Timing

169 Actionable

170 Preferences and Patterns

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201 Notification Actions

202 Notification Actions Only relevant options

203 Notification Actions Only relevant options Succinct, clear and action-oriented

204 Notification Actions Only relevant options Succinct, clear and action-oriented Prioritize one-step actions

205 Notification Actions Only relevant options Succinct, clear and action-oriented Prioritize one-step actions But multi-step actions are OK

206 Complication Notification App

207 Complication Notification App

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223 Snapshot Best Practices

224 Snapshot Best Practices Anticipate user interests

225 LAD SF 0:00 6:00 12:00 18:00 24:00 Today

226 LAD SF PIT SF 0:00 6:00 12:00 18:00 24:00.6:00..12:00..18:00..24:00. Today Tomorrow

227 0:00 6:00 12:00 18:00 24:00.6:00..12:00..18:00..24:00. Today Tomorrow

228 0:00 6:00 12:00 18:00 24:00.6:00..12:00..18:00..24:00. Today Tomorrow

229 Snapshot Best Practices Anticipate user interests Account for user preferences and contextual factors

230 Snapshot Best Practices Anticipate user interests Account for user preferences and contextual factors Be logical and predictable

231 Snapshot Best Practices Anticipate user interests Account for user preferences and contextual factors Be logical and predictable Be recognizable

232 Snapshot Best Practices Anticipate user interests Account for user preferences and contextual factors Be logical and predictable Be recognizable Avoid awkward views

233

234 Snapshot Best Practices Anticipate user interests Account for user preferences and contextual factors Be logical and predictable Be recognizable Avoid awkward views Prepare to get small

235 SF Compact Regular watchos 2 SF Compact Medium watchos 3

236

237 Snapshot Best Practices Anticipate user interests Account for user preferences and contextual factors Be logical and predictable Be recognizable Avoid awkward views Prepare to get small

238 Glances

239

240

241 Simplified Navigation

242 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

243 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

244 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

245 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

246 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

247 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

248

249

250

251 Item 1 Item 2 Item 3 Item 4 Item 5 Details 1 1 Details 2 2 Details 3 3 Details Details

252 Item 1 Item 2 Item 3 Item 4 Item 5 Details 1 Details 2 Details 3 Details 4 5 Details

253 Item 2 Details 2 List Item 3 Item 1 Item 2 Details 3 Item 3 Item 4 Details 4 Item 5

254 Item 2 Details List Item 3 Item 1 Item 2 Details Item 3 Item 4 Details Item 5

255 Item 2 Details List Item 3 Item 1 Item 2 Details Item 3 Item 4 Details Item 5

256 Item 2 Details List Item 3 Item 1 Item 2 Details Item 3 Item 4 Details Item 5

257 Item 2 Details List Item 3 Item 1 Item 2 Details More Details Extreme Details Item 3 Item 4 Details Item 5

258 Item 2 Details List Item 3 Item 1 Item 2 Details More Details Extreme Details Item 3 Item 4 Details Item 5

259

260 Stickiness

261

262

263

264

265

266 Sessions

267 Drop Wrist

268 Task App Feedback

269 Task App Service Feedback

270 Task App Service Feedback

271 Task App Service Feedback

272 Task App Service Feedback

273 Task App Feedback

274 Task App Feedback

275

276

277 Background Download Task

278 Local Notification

279

280

281

282

283

284

285

286 Be Trustworthy

287 Be Honest

288 Complication Notification App

289

290

291 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

292 Item 1 Details List Item 2 Item 1 Item 2 Details Item 3 Item 3 Details

293

294

295

296

297 SpriteKit SceneKit

298 SpriteKit and SceneKit Render and animate graphics

299 SpriteKit and SceneKit Render and animate graphics Respond to touch events

300 SpriteKit and SceneKit Render and animate graphics Respond to touch events Programmatic animation

301 SpriteKit and SceneKit Render and animate graphics Respond to touch events Programmatic animation Physics simulation

302 SpriteKit SceneKit

303 Custom Gestures

304 Crown Events

305 Crown Events

306

307

308

309

310

311

312

313

314 10-Day Chart 10:09 6/15 H 90 L 72

315 10-Day Chart 10:09 a /15 H 90 L 72

316 10-Day Chart 10:09 a /15 H 90 L 72

317 10-Day Chart 10:09 a /15 H 90 L 72

318 10-Day Chart 10: a /15 Rain 40%

319 10-Day Chart 10:09 a /15 6/14 6/13 6/12 6/11 6/10 6/9 6/8 6/7 6/6 H L

320 10-Day Chart 10:09 a /15 6/14 6/13 6/12 6/11 6/10 6/9 6/8 6/7 6/6 H L

321 10-Day Chart 10:09 a /15 6/14 6/13 6/12 6/11 6/10 6/9 6/8 6/7 6/6 H L

322 10-Day Chart 10:09 a /15 6/14 6/13 6/12 6/11 6/10 6/9 6/8 6/7 6/6 H L

323 1 10-Day Chart 10:09 a /15 H 90 L 72

324 9 10-Day Chart 10:09 h g i j f k a e l d m c b 6/15 H 90 L 72

325 b c d e f g h i j k l m b c d e f g h i j k l m b c d e f g h i j k l m H 90 L 72 6/15 H 85 L 58 6/14 H 78 L 55 6/13 10-Day Chart 10:09

326 b c d e f g h i j k l m b c d e f g h i j k l m b c d e f g h i j k l m H 90 L 72 6/15 H 85 L 58 6/14 H 78 L 55 6/13 10-Day Chart 10:09

327 SpriteKit SceneKit

328 Animate Responsibly

329

330 Feature Feature Feature Feature Feature Feature Feature ture Feature Feature Feature Feature Feature Feature Featu Feature Feature Feature Feature Feature Feature Feature ture Feature Feature Feature Feature Feature Feature Featu Feature Feature Feature Feature Feature Feature Feature

331 Feature

332

333

334

335 Features Not Apps

336

337

338

339

340

341 More Information

342

343 Related Sessions Quick Interaction Techniques for watchos Presidio Wednesday 11:00AM Keeping Your Watch App Up to Date Mission Thursday 9:00AM Architecting for Performance on watchos 3 Mission Thursday 3:00PM What s New in SpriteKit Presidio Thursday 5:00PM Building Great Workout Apps Pacific Heights Friday 11:00AM

344 Related Sessions Inclusive App Design Pacific Heights Tuesday 10:00AM Typography and Fonts Presidio Wednesday 9:00AM Iterative UI Design Presidio Friday 10:00AM

345 Labs User Interface Design by Appointment Lab User Interface Design Lab A Daily 9:00AM Prototyping Lab Fort Mason Friday 2:00PM

346