How to start programming for Apple Watch discussing technical, UX/UI related facts.

1. A P P L E WAT C H
A D E V E L O P E R ’ S P E R S P E C T I V E
E N N I O M A S I @ E N N I O M A

2. P R O G R A M M E R S ! W H Y D O E S I T M AT T E R ?
Apple Watch sales forecast for the 2015
15 million units (lowered!)
http://bgr.com/2015/05/20/apple-watch-sales-projection-kgi/

3. NFC WiFi 802.11 b/g/n BLE 4.0
GPS AccelerometerHeart Rate Sensor

4. A D E V E L O P E R ’ S P E R S P E C T I V E
https://twitter.com/willipmrpip/status/510126522574049280/photo/1
Fact#1
The watch doesn’t act as an iPhone

5. A D E V E L O P E R ’ S P E R S P E C T I V E
https://twitter.com/willipmrpip/status/510126522574049280/photo/1
Fact#1: The watch doesn’t act as an iPhone

6. A D E V E L O P E R ’ S P E R S P E C T I V E
Fact#2
Watch apps need a paired iPhone
From the late 2015 it should be possible to
build standalone apps

7. A D E V E L O P E R ’ S P E R S P E C T I V E
Fact#2: Watch apps need a paired iPhone

8. A D E V E L O P E R ’ S P E R S P E C T I V E
WatchKit Extension

9. A D E V E L O P E R ’ S P E R S P E C T I V E
Watch App

10. A D E V E L O P E R ’ S P E R S P E C T I V E
UX Fact#1
Interaction is measured in seconds
The device is too small …
… it doesn’t act as an iPhone!

11. A D E V E L O P E R ’ S P E R S P E C T I V E
UX Fact#2
Build a passive user interface
Provide value without a direct interaction

12. A D E V E L O P E R ’ S P E R S P E C T I V E
Design Fact#1
Don’t create targets smaller that 1cm x 1cm

13. A D E V E L O P E R ’ S P E R S P E C T I V E
Design Fact#1: Don’t create targets smaller that 1cm x 1cm

14. A D E V E L O P E R ’ S P E R S P E C T I V E
Design Fact#2
Black is the new white!

15. A D E V E L O P E R ’ S P E R S P E C T I V E
Design Fact#2: Black is the new white!

16. A D E V E L O P E R ’ S P E R S P E C T I V E
Design Fact#3
Readability is fundamental

17. A D E V E L O P E R ’ S P E R S P E C T I V E
Design Fact#3: Readability is fundamental
http://en.wikipedia.org/wiki/San_Francisco_%282014_typeface%29

18. A D E V E L O P E R ’ S P E R S P E C T I V E

19. A D E V E L O P E R ’ S P E R S P E C T I V E
Gestures
Navigation
UI Elements
Notifications
Glances

20. A D E V E L O P E R ’ S P E R S P E C T I V E
Taps
Vertical Swipe
Horizontal Swipe
Left Edge Swipe
Force Touch
Gestures
We can’t
customize these
actions!

21. A D E V E L O P E R ’ S P E R S P E C T I V E
- Taps
- Vertical Swipe
- Horizontal Swipe
- Left Edge Swipe
- Force Touch
Digital Crown
Gestures Interaction

22. A D E V E L O P E R ’ S P E R S P E C T I V E
Hierarchical
vs
Page-Based
Navigation

23. A D E V E L O P E R ’ S P E R S P E C T I V E
UI Elements
Labels Images
GroupsTables

24. A D E V E L O P E R ’ S P E R S P E C T I V E
UI Elements
Buttons Switches Sliders

25. A D E V E L O P E R ’ S P E R S P E C T I V E
UI Elements
Maps Date&Time Menus

26. A D E V E L O P E R ’ S P E R S P E C T I V E
Notifications
http://martiancraft.com/blog/2015/02/briefs-apple-watch/
short look long look
app icon
app name
notification text
Up to 4 actions
More content

27. A D E V E L O P E R ’ S P E R S P E C T I V E
Glances
Partial view of the app (~widget)
Resides on the extension
Only one for each app

28. A D E V E L O P E R ’ S P E R S P E C T I V E
Q&A
E N N I O M A S I
ennio dot masi at gmail dot com
@ennioma