Quick Interaction Techniques for watchos

Transcription

1 App Frameworks #WWDC16 Quick Interaction Techniques for watchos Session 211 Tom Witkin watchos Engineer Miguel Sanchez watchos Engineer 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 What is a quick interaction?

3

4

5

6 Glanceable

7 Glanceable Actionable

8 Glanceable Actionable Responsive

9 Glanceable Actionable Responsive Designing Great Apple Watch Experiences Presidio Wednesday 1:40PM What s New in watchos 3 WWDC 2016 Videos

10 How long is a quick interaction?

11 How long is a quick interaction?

12 2 seconds

13

14 1 New Features

15 1 New Features 2 Interaction Techniques

16 New WatchKit Features APIs for quick interactions Miguel Sanchez watchos Engineer

17 watchos 3 APIs Glanceable, Actionable, Responsive

18 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input

19 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input Gesture recognizers

20 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input Gesture recognizers Digital Crown rotation

21 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input Gesture recognizers Digital Crown rotation New ways of displaying and updating information

22 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input Gesture recognizers Digital Crown rotation New ways of displaying and updating information Improved table navigation

23 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input Gesture recognizers Digital Crown rotation New ways of displaying and updating information Improved table navigation Support for new Notifications Framework

24 watchos 3 APIs Glanceable, Actionable, Responsive Access new kinds of user input Gesture recognizers Digital Crown rotation New ways of displaying and updating information Improved table navigation Support for new Notifications Framework SceneKit and SpriteKit integration

25 Gesture Recognizers Expanding your UI interactions

26 Gesture Recognizers NEW

27 Gesture Recognizers NEW Discrete

28 Gesture Recognizers NEW Discrete WKSwipeGestureRecognizer

29 Gesture Recognizers NEW Discrete WKSwipeGestureRecognizer WKTapGestureRecognizer

30 Gesture Recognizers NEW Discrete WKSwipeGestureRecognizer WKTapGestureRecognizer Continuous

31 Gesture Recognizers NEW Discrete WKSwipeGestureRecognizer WKTapGestureRecognizer Continuous WKPanGestureRecognizer

32 Gesture Recognizers NEW Discrete WKSwipeGestureRecognizer WKTapGestureRecognizer Continuous WKPanGestureRecognizer WKLongPressGestureRecognizer

33

34

35

36

37

38

39

40 WKGestureRecognizer Base Class

41 WKGestureRecognizer Base Class Associate recognizer with action method IBAction func handlegesture(recognizer : WKGestureRecognizer?)

42 WKGestureRecognizer Base Class Associate recognizer with action method IBAction func handlegesture(recognizer : WKGestureRecognizer?) Recognizer properties func locationinobject() -> CGPoint func objectbounds() -> CGRect var state : WKGestureRecognizerState

43 WKGestureRecognizerState Discrete gestures Action method called when recognized

44 WKGestureRecognizerState Discrete gestures Action method called when recognized.possible

45 WKGestureRecognizerState Discrete gestures Action method called when recognized.possible.failed.recognized

46 WKGestureRecognizerState Continuous gestures Action method called many times

47 WKGestureRecognizerState Continuous gestures Action method called many times.possible

48 WKGestureRecognizerState Continuous gestures Action method called many times.possible.failed.began.changed.cancelled.recognized

49 Tips for Using Gesture Recognizers

50 Tips for Using Gesture Recognizers Add gestures to groups instead of controls

51 Tips for Using Gesture Recognizers Add gestures to groups instead of controls Set dependency relationships in storyboard

52 Tips for Using Gesture Recognizers Add gestures to groups instead of controls Set dependency relationships in storyboard Some system gestures will have precedence

53 Tips for Using Gesture Recognizers Add gestures to groups instead of controls Set dependency relationships in storyboard Some system gestures will have precedence Scrolling Force Touch

54 Digital Crown Rotation Increasing speed and precision of interactions

55 WKInterfacePicker Refresher Introduced in watchos 2

56 WKInterfacePicker Refresher Introduced in watchos 2 You provide A list of WKPickerItems Picker style

57 WKInterfacePicker Refresher Introduced in watchos 2 You provide A list of WKPickerItems Picker style

58 WKInterfacePicker Refresher Introduced in watchos 2 You provide A list of WKPickerItems Picker style

59 WKInterfacePicker Refresher Introduced in watchos 2 You provide A list of WKPickerItems Picker style

60 WKInterfacePicker Refresher Introduced in watchos 2 You provide A list of WKPickerItems Picker style WatchKit handles Look and feel of interface element Processing of Digital Crown events Calling action on item selection

61 Digital Crown Support NEW Direct access to rotation events

62 Digital Crown Support NEW Direct access to rotation events Control your own UI elements with rotation values

63 Digital Crown Support NEW Direct access to rotation events Control your own UI elements with rotation values WKCrownSequencer Gives rotations per second

64 Digital Crown Support NEW Direct access to rotation events Control your own UI elements with rotation values WKCrownSequencer Gives rotations per second WKCrownDelegate Protocol Callbacks with rotational deltas

65 Rotations Per Second Useful for physics based animations

66 Rotations Per Second Useful for physics based animations Access sequencer from interface controller var crownsequencer: WKCrownSequencer { get }

67 Rotations Per Second Useful for physics based animations Access sequencer from interface controller var crownsequencer: WKCrownSequencer { get } Get RPS from sequencer var rotationspersecond: Double { get }

68 Rotational Deltas Counting number of rotations

69 Rotational Deltas Counting number of rotations Argument in WKCrownDelegate callback func crowndidrotate(sequencer : WKCrownSequencer?, rotationaldelta: Double)

70 Rotational Deltas Counting number of rotations Argument in WKCrownDelegate callback func crowndidrotate(sequencer : WKCrownSequencer?, rotationaldelta: Double) Maintain accumulator to determine number of rotations

71 Rotational Deltas Counting number of rotations Argument in WKCrownDelegate callback func crowndidrotate(sequencer : WKCrownSequencer?, rotationaldelta: Double) Maintain accumulator to determine number of rotations 1 full rotation = accumulated deltas of 1

72 Rotational Deltas Counting number of rotations Argument in WKCrownDelegate callback func crowndidrotate(sequencer : WKCrownSequencer?, rotationaldelta: Double) Maintain accumulator to determine number of rotations 1 full rotation = accumulated deltas of 1 Half rotation = accumulated deltas of 0.5

73 Rotational Deltas Counting number of rotations Argument in WKCrownDelegate callback func crowndidrotate(sequencer : WKCrownSequencer?, rotationaldelta: Double) Maintain accumulator to determine number of rotations 1 full rotation = accumulated deltas of 1 Half rotation = accumulated deltas of 0.5 Determine how count corresponds to sensitivity of changes in your content

74 Reported Values for RPS and Deltas Sign indicates direction

75 Reported Values for RPS and Deltas Sign indicates direction

76 Reported Values for RPS and Deltas Sign indicates direction Positive up rotation

77 Reported Values for RPS and Deltas Sign indicates direction Positive up rotation Negative down rotation

78 Reported Values for RPS and Deltas Sign indicates direction Positive up rotation Negative down rotation Values are orientation agnostic

79 Digital Crown Focus Sequencer only reports values when focused

80 Digital Crown Focus Sequencer only reports values when focused Other elements can take over Digital Crown focus Picker Slider Scrolling controller

81 Digital Crown Focus Sequencer only reports values when focused Other elements can take over Digital Crown focus Picker Slider Scrolling controller Can use a gesture to gain focus on your UI element

82 Digital Crown Focus Sequencer only reports values when focused Other elements can take over Digital Crown focus Picker Slider Scrolling controller Can use a gesture to gain focus on your UI element Focus WKCrownSequencer to receive values func focus()

83 Vertical Paging Faster table row detail navigation

84 Hierarchical Navigation

85 Hierarchical Navigation

86 Hierarchical Navigation

87 Hierarchical Navigation

88 Vertical Paging NEW

89 Vertical Paging NEW

90 Make Your App More Responsive NEW Doesn t require navigating back to table

91 Make Your App More Responsive NEW Doesn t require navigating back to table One checkbox in Storyboard

92 Make Your App More Responsive NEW Doesn t require navigating back to table One checkbox in Storyboard Table must be using segues

93 watchos 3 Table API Mostly the same

94 watchos 3 Table API Mostly the same New method to segue into vertical paging func performsegue(row : Int)

95 watchos 3 Table API Mostly the same New method to segue into vertical paging func performsegue(row : Int) WatchKit handles preheating of controllers Some controller lifecycle methods called when not yet visible

96 watchos 3 Table API Mostly the same New method to segue into vertical paging func performsegue(row : Int) WatchKit handles preheating of controllers Some controller lifecycle methods called when not yet visible Architecting for Performance on watchos 3 Mission Thursday 3:00PM

97 Notifications The original quick interactions

98 Notifications Refresher Apple Watch integral part of notification flow

99 Notifications Refresher Apple Watch integral part of notification flow Quick interaction

100 Notifications Refresher Apple Watch integral part of notification flow Quick interaction User feels a haptic

101 Notifications Refresher Apple Watch integral part of notification flow Quick interaction User feels a haptic Sees a Short Look

102 Notifications Refresher Apple Watch integral part of notification flow Quick interaction User feels a haptic Sees a Short Look Sees Long Look after short interval

103 User Response to Notification

104 User Response to Notification

105 User Response to Notification Dismiss notification

106 User Response to Notification Dismiss notification Launch watch app

107 User Response to Notification Dismiss notification Launch watch app Notifications support custom actions

108 User Response to Notification Dismiss notification Launch watch app Notifications support custom actions Foreground actions make app active Background actions routed to iphone app in watchos 2

109 watchos 3 Notification Support

110 watchos 3 Notification Support New User Notification Framework Introduction to Notifications WWDC 2016 Videos

111 watchos 3 Notification Support New User Notification Framework Introduction to Notifications WWDC 2016 Videos WatchKit

112 watchos 3 Notification Support New User Notification Framework Introduction to Notifications WWDC 2016 Videos WatchKit Notification handling APIs similar across platforms

113 watchos 3 Notification Support New User Notification Framework Introduction to Notifications WWDC 2016 Videos WatchKit Notification handling APIs similar across platforms Local notifications can now be scheduled on Apple Watch

114 watchos 3 Notification Support New User Notification Framework Introduction to Notifications WWDC 2016 Videos WatchKit Notification handling APIs similar across platforms Local notifications can now be scheduled on Apple Watch Background actions now delivered to extension if scheduled on Apple Watch

115 UNUserNotificationCenter NEW Register to be delegate class ExtensionDelegate: NSObject, WKExtensionDelegate, UNUserNotificationCenterDelegate { func applicationdidfinishlaunching() { UNUserNotificationCenter.current().delegate = self; } }

116 UNUserNotificationCenter NEW Register to be delegate class ExtensionDelegate: NSObject, WKExtensionDelegate, UNUserNotificationCenterDelegate { func applicationdidfinishlaunching() { UNUserNotificationCenter.current().delegate = self; } }

117 UNUserNotificationCenter NEW Register to be delegate class ExtensionDelegate: NSObject, WKExtensionDelegate, UNUserNotificationCenterDelegate { func applicationdidfinishlaunching() { UNUserNotificationCenter.current().delegate = self; } }

118 UNUserNotificationCenterDelegate NEW willpresent notification callback

119 UNUserNotificationCenterDelegate NEW willpresent notification callback Called only if application is active func usernotificationcenter(center: UNUserNotificationCenter, willpresent: UNNotification, withcompletionhandler: (UNNotificationPresentationOptions))

120 UNUserNotificationCenterDelegate NEW willpresent notification callback Called only if application is active func usernotificationcenter(center: UNUserNotificationCenter, willpresent: UNNotification, withcompletionhandler: (UNNotificationPresentationOptions)) Completion handler argument determines presentation

121 UNUserNotificationCenterDelegate NEW willpresent notification callback Called only if application is active func usernotificationcenter(center: UNUserNotificationCenter, willpresent: UNNotification, withcompletionhandler: (UNNotificationPresentationOptions)) Completion handler argument determines presentation.alert.none Presents Long Look App handles notification

122 UNUserNotificationCenterDelegate NEW didreceive response callback

123 UNUserNotificationCenterDelegate NEW didreceive response callback func usernotificationcenter(center : UNUserNotificationCenter, didreceive: UNNotificationResponse, withcompletionhandler: (UNNotificationPresentationOptions))

124 UNUserNotificationCenterDelegate NEW didreceive response callback func usernotificationcenter(center : UNUserNotificationCenter, didreceive: UNNotificationResponse, withcompletionhandler: (UNNotificationPresentationOptions)) Called when a foreground action makes app active

125 UNUserNotificationCenterDelegate NEW didreceive response callback func usernotificationcenter(center : UNUserNotificationCenter, didreceive: UNNotificationResponse, withcompletionhandler: (UNNotificationPresentationOptions)) Called when a foreground action makes app active Called for background actions on notifications

126 UNUserNotificationCenterDelegate NEW didreceive response callback func usernotificationcenter(center : UNUserNotificationCenter, didreceive: UNNotificationResponse, withcompletionhandler: (UNNotificationPresentationOptions)) Called when a foreground action makes app active Called for background actions on notifications If scheduled on Apple Watch

127 Notification Scheduling and Delivery Notifications on iphone forward to Apple Watch when iphone screen off Apple Watch on-wrist and unlocked

128 Notification Scheduling and Delivery

129 Notification Scheduling and Delivery watchos 3 allows scheduling of local notifications on Apple Watch

130 Notification Scheduling and Delivery watchos 3 allows scheduling of local notifications on Apple Watch Delivered only on Apple Watch

131 Notification Scheduling and Delivery watchos 3 allows scheduling of local notifications on Apple Watch Delivered only on Apple Watch Schedule iphone notification if required

132 Notification Scheduling and Delivery watchos 3 allows scheduling of local notifications on Apple Watch Delivered only on Apple Watch Schedule iphone notification if required Notification identifiers used to avoid duplicate alerts

133 Notification Scheduling and Delivery watchos 3 allows scheduling of local notifications on Apple Watch Delivered only on Apple Watch Schedule iphone notification if required Notification identifiers used to avoid duplicate alerts Apple Watch notifications take precedence over forwarded with same id

134 SpriteKit and SceneKit Enhanced UI Interactions

135 Classes to Display Scenes NEW

136 Classes to Display Scenes NEW WKInterfaceSKScene for SpriteKit

137 Classes to Display Scenes NEW WKInterfaceSKScene for SpriteKit WKInterfaceSCNScene for SceneKit

138

139

140

141

142

143

144

145 Displaying the Content NEW

146 Displaying the Content NEW Prepare the scene with SpriteKit or SceneKit APIs

147 Displaying the Content NEW Prepare the scene with SpriteKit or SceneKit APIs Present a SpriteKit scene with function on WKInterfaceSKScene func present(_ : SKScene?) func present(_ : SKScene?, transition : SKTransition)

148 Displaying the Content NEW Prepare the scene with SpriteKit or SceneKit APIs Present a SpriteKit scene with function on WKInterfaceSKScene func present(_ : SKScene?) func present(_ : SKScene?, transition : SKTransition) Set the SceneKit scene property on WKInterfaceSCNScene var scene : SCNScene

149 Your watchos 3 API Toolkit Glanceable, Actionable, Responsive Gesture recognizers Digital Crown rotation Improved table navigation New Notifications Framework SceneKit and SpriteKit integration

150 Quick Interaction Techniques Tom Witkin watchos Engineer

151 Quick Interaction Techniques

152 Quick Interaction Techniques Actionable complications

153 Quick Interaction Techniques Actionable complications Glanceable notifications

154 Quick Interaction Techniques Actionable complications Glanceable notifications Simple navigation

155 Quick Interaction Techniques Actionable complications Glanceable notifications Simple navigation Drop wrist

156 Actionable Complications

157

158

159

160 Why Complications

161 Why Complications Highly glanceable

162 Why Complications Highly glanceable Frequent updates

163 Why Complications Highly glanceable Frequent updates Keeps app in memory

164 Why Complications Highly glanceable Frequent updates Keeps app in memory Accelerates user into your app

165

166 647 x 1150

167 647 x 1150

168 647 x 1150

169 More Information Adding Complications to the Gallery developer.apple.com/library/prerelease/content

170

171 Glanceable Notifications

172 Why Notifications

173 Why Notifications Customizable

174 Why Notifications Customizable Displays valuable information

175 Why Notifications Customizable Displays valuable information Removes the necessity to launch your app

176 Why Notifications Customizable Displays valuable information Removes the necessity to launch your app Now supports: SpriteKit SceneKit Inline video

177 SpriteKit SceneKit

178 SpriteKit SceneKit Game Technologies for Apple Watch Mission Friday 3:00PM

179 SpriteKit SceneKit

180

181

182

183

184

185 WKInterfaceSKScene

186 WKInterfaceSKScene WKInterfaceLabel

187 312 x 390

188 Simple Navigation

189 Gestures Digital Crown

190 Digital Crown

191

192

193

194

195

196

197

198

199

200

201 Drop Wrist

202

203

204 Keeping Your Watch App Up to Date Mission Thursday 9:00AM

205 Responding to User Action

206 Instant Feedback

207

208

209

210

211

212

213 Choose Item

214 Choose Item Buy

215 Choose Item Buy Show Loading Indicator

216 Choose Item Buy Show Loading Indicator Show Confirmation

217 Choose Item Buy Show Loading Indicator Waiting Show Confirmation

218

219

220

221

222

223 Choose Item

224 Choose Item Buy

225 Choose Item Buy Show Feedback

226 Choose Item Buy Show Feedback Show Notification

227 Choose Item Choose Item Buy Buy Show Feedback Show Loading Indicator Show Notification Show Confirmation

228 Choose Item Choose Item Buy Buy Show Feedback Show Loading Indicator Show Notification Show Confirmation

229 Processing After Dropping Wrist

230 Processing After Dropping Wrist Background NSURLSession

231 Processing After Dropping Wrist Background NSURLSession Background task assertion

232 Processing After Dropping Wrist Background NSURLSession Background task assertion WatchKit Tips and Tricks WWDC 2015 Videos

233 2 seconds

234

235 Focus on quick interactions

236 Focus on quick interactions Use complications and notifications

237 Focus on quick interactions Use complications and notifications Create glanceable UIs with SceneKit / SpriteKit

238 Focus on quick interactions Use complications and notifications Create glanceable UIs with SceneKit / SpriteKit Simplify navigation

239 Focus on quick interactions Use complications and notifications Create glanceable UIs with SceneKit / SpriteKit Simplify navigation Don t make the user wait

240 More Information

241 Related Sessions What s New in watchos 3 Introduction to Notifications WWDC 2016 Videos WWDC 2016 Videos Designing Great Apple Watch Experiences Presidio Wednesday 1:40PM Keeping Your Watch App Up to Date Mission Thursday 9:00AM Architecting for Performance on watchos 3 Mission Thursday 3:00PM

242 Labs WatchKit and ClockKit Lab Frameworks Lab B Wednesday 12:00PM WatchKit and Background Tasks Lab Frameworks Lab C Thursday 10:30AM WatchKit and WatchConnectivity Lab Frameworks Lab B Friday 2:00PM

243