Designing for the Apple Watch

DE SIG NI NG FOR  
THE A PP LE WATCH
May 2015

DESIGNING FOR THE APPLE WATCH | MAY 2015 2
TH E MARKET & OPPORT U N I T I ES
DESIGNING FOR THE APPLE WATCH

3DESIGNING FOR THE APPLE WATCH | MAY 2015
DESKTOP ➝ LAPTOP ➝ MOBILE

SMART WATCHES
BIOMEDICAL SENSORS
FITNESS TRACKERS
MULTIFUNCTIONAL
JEWELRY
HEAD MOUNTED
COMPUTERS, CAMERAS,
GAME PLAYERS
EYEWEAR FOR REM OTE
MEDICAL TRAININ G
INFANT & KID SAFE TY
TRACK ERS
➝➝ MOBIL E
THE GROU ND IS SHI FTING, AGAIN.

VIA VANDRICO INC. WEARABLES DATABASE
302WEARABLE DE V ICE S
CURRENTLY ON T H E M A RKE T

19.6M 45.7 M 126.1MUnits in 2014 Units in 2015 Units by 2019
WORLDWID E W EA RABLE  
DEVICE SHIPMENTS
EXPECTEDACTUAL
~ ~
VIA STATISTA

AR EAS OF
MA RKET FO CUS
Note: Some devices fall into more than one category.
LIF ESTYLE
FITNE SS
M EDICA L 
ENTERTAI NMEN T
IND USTRIA L
GA MI NG
PE TS /AN IM ALS
N UM B ER O F  
DEV I CES
1 85
13 4
55
39
26
21
5

AR EAS OF
MA RKET FO CUS
Note: Some devices fall into more than one category.
LIF ESTYLE
FITNE SS
M EDICA L 
ENTERTAI NMEN T
IND USTRIA L
GA MI NG
WT F.
N UM B ER O F  
DEV I CES

AVERAGE PR ICE
BY MARKET
IND USTRIA L
M EDICA L
ENTERTAI NMEN T
GA MI NG
FITNE SS  
LIF ESTYLE
PE TS /AN IM ALS
U SD
$9 18
$66 5
$540
$529
$259
$242
$1 34

THIS IS NOT A WEARA BLES BOOM
VIA STATISTA

+

$3 49 .00
+ $199 .00

YOU’LL NEED TO
RE THI NK FUNCTION
+ Small display
+ Limited hardware & battery capabilities
+ Limited data transfer

VITAMIN?Nice to have.
PAI NK ILLER?Must have.

CR EATE USEFUL, MUST-HAVE APPS
1 2 3 4
Complement  
the containing iOS
app, don’t replace it.
Measure interactions
in seconds & keep
them brief:  
3 screens per task,  
10 second bursts
Apps should be
personal, holistic,
lightweight &  
context-aware.
Reinforce intimate
behaviors through
indulgence, nostalgia,
identity, fulﬁllment,
enhancement & ritual.

TWI TT ER
IN STAGRAM
SPEAK +TRANSLATE
LARK CHAT
CO MM UNICATION

EV ERN OT E
K E YN OT E
1PASSWORD
SCIENTIFIC CALC ULATOR
WORK

MOTI ON X G PS
DRE AMDAY S
UBER
HISTORY HERE
TR AVEL

LARK CHAT
7 MI NUTE WO RKOUT
CALORIE COUN TER PRO
MAP MY RUN
HEALTH + FITNESS

Y E LP
STARBUCK S
CHIPOTLE
ETSY
SHOPPING

AP PLE APP OVERVIE W

DE SIGNING FOR THE APPLE WATCH
— Vision & Design Principles
— Ways to Interact
— App Structure
— UI Elements
— Speciﬁcations

V ISION & DESIGN PRIN CI PLES
— Personal
— Holistic
— Lightweight
— Context-Aware

26
PERSONAL
DESIGNING FOR THE APPLE WATCH | MAY 2015
+ Designed to be worn, UI is attuned to the wearer’s presence.
+ Always connected; enables instant access to info without your phone.
+ Apps should be an extension of the wearer & enhance experiences in  
meaningful ways.
• Raising your wrist to show the time and new alerts.
• Digital Touch (i.e. Heartbeat and Sketch features)
enables new types of communication
• Accelerometer / heart rate sensor can provide
personalized information about day to day activity
SA MPLE INPUTS INCLUDE:

27
TH I NK ABOUT…
How you can create personal value / give the wearer super powers /
improve their lives by making them smarter, stronger, faster, etc.

28
HOLI STIC
+ Blurs the boundaries between physical object and software.
• The Digital Crown is a ﬁnely tuned hardware
control that enables nuanced software navigation.
• The Taptic Engine produces subtle, physical
feedback associated with alerts and onscreen
interaction.
• Force Touch—a physical gesture interpreted by
hardware—reveals a new dimension of contextual
software controls.
• The physical border of the Retina display has been
considered, resulting in edge-to-edge UI design
that eﬀectively renders that border invisible.
E XA MPLES

29
TH I NK ABOUT…
How to integrate inputs and outputs / contribute to this
experience of hardware and software feeling indistinguishable.

30
LIG HTWEIGHT
+ Respect the context in which the wearer experiences them: 
brieﬂy, frequently, and on a small display.
• Glanceability 
Info is accessible and dismissible
quickly and easily, for both
privacy and usability. (e.g Short-
look notiﬁcation, Glances)
• Quick, minimal interactions 
Show the most relevant
information needed to complete
the task. (If your app has
multiple features, focus on core
functionality.)
• Small display size / the watch’s
position on the wrist
DE SI GN FOR:

31
TH I NK ABOUT…
Speed—Apple expects people to use the watch in 10 seconds bursts.

ONE MORE T HING…

TH I S IS NOT MY DAY.
VIA THE WATCH ON MY PHONE: WHAT TIME MEANS TO US.

TH I S IS.
VIA THE WATCH ON MY PHONE: WHAT TIME MEANS TO US.

35
CONTEXT-AWARE
The watch can can passively gather data about the
wearer’s vitals and activities.
Your connected phone, can potentially provide a lot
of additional information, (e.g. location, contacts,
upcoming meetings, and more.

36
TH I NK ABOUT…
Combining all of these inputs to form preferences,
patterns, and habits.
A user’s context helps us minimize interactions, make
assumptions and hopefully delight users by displaying
the right information at the right time.

J U ST WO KE UP? 
 
Suggest the type of clothes to
wear based on the weather.
JUST SAT DOWN  
AT A RESTAURA NT?
 
Recommend a dish based on
past dishes he or she liked.
LE AVE WOR K A R OUND  
TH E S AM E TI ME E VE RY DAY ?
 
Suggest an alternate route  
or the estimated time home
based on traﬃc.

38
BRAND ARCHETYPES TO EM PLOY
Six universal truths that were consistently present among brands that achieved intimacy with consumers most
often in our study. They help explain the character and nature of ultimate brand relationships.
I NDULGENCE
Creates a close
relationship centered
around moments of
pampering and
gratiﬁcation that can
be occasional or
frequent.
NOSTA LGI A
Focused on memories
of the past and the
warm, poignant
feelings associated
with them. These are
often brands a person
has grown up with.
IDENTITY
Reflects an aspirational
image or admired
values and beliefs that
resonate deeply.
FU LFILLM ENT
Exceeds expectations,
delivering superior
service, quality and
eﬃcacy.
ENH A NCE ME NT
Enables improvement
through use of the
brand—smarter, more
capable, and more
connected.
R ITUA L
When a person
ingrains a brand into
his or her daily
actions. It is more
than just habitual
behavior—the brand
becomes a vitally
important part of
daily existence.
VIA MBLM'S BRAND INTIMACY STUDY

WAYS TO INTERACT
— Action-based events
— Gestures
— Digital Crown
— Force Touch

40
STANDA R D I NPUT S
• Action-based events (taps) indicate selection or
interaction.
• Gestures such as vertical, horizontal swipes; left-
edge swipes navigate back to the parent interface
• Multi-touch gestures like pinch to zoom are not
available on the watch
• Digital Crown* to zoom/scroll without obstructing
the display, as you would when swiping with your
ﬁnger. Great for scrolling through longer pages.
• The Side Button can’t be accessed by apps.
• Force Touch* can display a context menu of up to
four items relevant to the current screen.
• The display can distinguish between a tap/press.  

41
NEW INTERACTIONS
• Action-based events (taps) indicate selection or
interaction.
• Gestures such as vertical, horizontal swipes; left-
edge swipes navigate back to the parent interface
• Multi-touch gestures like pinch to zoom are not
available on the watch)
• Digital Crown to zoom/scroll without obstructing
the display, as you would when swiping with your
ﬁnger. Great for scrolling through longer pages.
• The Side Button can’t be accessed by apps.
• Force Touch can display a context menu of up to
four items relevant to the current screen.
• The display can distinguish between a tap/press.  

42
AND SOME OT HERS…
Not Accessible by Apps (not 100% conﬁrmed)
• Sending a Drawing/Heartbeat
• Taptic Engine
• Voice Input (?)
• Apple Pay (?)
Accessible by Apps
• Accelerometer
• Heart Rate Sensor
• GPS

43
CONSIDERATIONS FOR WIR EFRAMES
• Action-based events (taps, glances)
• Gestures
• Digital Crown (scroll/zoom)
• Force Touch (globally accessible context menu)
• Haptic Feedback (vibrations might not be
accesible, but it’s helpful to consider when they’re
triggered for others)
Indicate additional states for

44
ONE-WAY FLOW (SEND)

45
2-WAY F LOW (SEND/RECEIVE)

APP STRUCTURE
— WatchKit App
— Notiﬁcations
— Glances
— Navigation
— Modal Sheets
— Handoﬀ

47
WATCHKIT APP
• Main way of viewing and interacting with app data
• Accessed via the watch home screen, Glance or
Notiﬁcation
• iOS apps can have custom nav, but WatchKit Apps
don’t support customization yet
• Only two types of navigation for the WatchKit App —
hierarchical & page-based
• Figure out what data is most important to the user,
how they relate and then the navigation structure that
best compliments accessing that data

48
NOTIFI CATIO NS
• Short- and Long-Look Notifications
• Limit notifications to only what’s most useful
• The best notifications use the user’s context  
(e.g. location, time, or activity) to provide a timely,
relevant piece of information

49
SHORT-LOO K
NOTIFI CATIO NS
• Contains the app icon, app name, and title from
the notification.
• Appears first and is visible for a brief time.
• Lowering your wrist dismisses it
• Raising you wrist or tapping on it displays
more detailed information and functionality
through the long-look notification
Since the title is the only thing you have control over,
it should provide a brief hint as to the contents of the
notification.

50
LONG-LOOK
NOTIFI CATIO NS
All apps share the same structure:
• The top displays the app icon and name  
(you also can specify the bar color)
• In between is your custom app content and
up to four custom action buttons
• Bottom is a dismiss button

51
GLAN CES
• A browse-able collection of timely/contextually
relevant moments from the wearer’s favorite apps
• Optional. Not all apps need a glance, and users
select which glances to display
• Limited to one non-scrollable screen. Put the
most useful, essential information on your screen.
Use color, hierarchy and imagery to visually
distinguish your glance
• Tap anywhere on the glance to open your app.  
(No need for buttons, sliders, or menus)

52
GLAN CES
• Template-based, with
separate templates for
the upper and lower
portions of the glance
screen.
• Use Xcode to pick the
templates you want
and then design your
content accordingly.

53
NAVIG ATION TYPES
Hierarchical structure is best for more complex apps
and resembles a lot of existing iPhone apps with the
user having to make a series of choices until reaching
the ﬁnal screen
Page-based structure lets the user navigate between
pages by swiping horizontally. This navigation is best if
the data between pages isn’t tied to data on other pages

54
MODAL SHEETS
• Temporarily prevents the user from
interacting with the rest of the app
• Consider using when:
• It’s critical to get the user’s attention
• A self-contained task must be
completed or abandoned without
distraction
• Keep tasks simple
• Avoid displaying a second modal interface
from your initial modal interface

55
MODAL SHEETS
• Single or multiple screens (displayed in a
page-based layout)
• Top-left corner is reserved for the close
button. (Users can tap or left-edge swipe
to dismiss)
• Close text is mandatory, always white, and
can be customized

56
HAN DOFF
• There are times when people may want to
dive deeper into content on their iOS
devices. Apps use Handoff to convey
information about the wearer’s current
activity to their other devices.
• Handoff is initiated by swiping up on your
app icon on an iOS device’s lock screen.
When your iOS app receives a Handoff
request, it uses the provided info to
continue the task that was initiated on the
watch.

57
DI FF ERENT STROKES
V IA

SPECIFICATIONS
— Screen Sizes
— Layout
— Typography
— Color
— Customization
— Home Screen Icons
— Menu Icons
— Animations

59
SCREEN SIZES
• The Apple Watch comes in 2 sizes 
– 38mm (340px by 272px) 
– 42mm (390px x 312px)
• Retina display  
Provide images @2x
• Design once for both sizes 
Apple uses relative sizing/spacing options so
images and objects resize to fill the available
space. (Though you can provide different sized
images or design two different layouts if you
really want to)

60
SCREEN SIZES
• Apple recommends a black background to match
the bezel
• The dark background also works better in light
(when compared to bright colors)
• The bezel adds visual padding; maximize the
available space and design for the full width of the
screen.
DESIGN FILE IN SITU  
(DISPLAYS V ISUAL PAD DING)

61
LAYOUT
• Apps display the same interface on both
sizes of Apple Watch.
• Relative positioning lets items expand
as needed to ﬁll the available space.
• Elements of your interface are laid out
top to bottom and left to right.
AVOID TOO MUCH INFO  
ON ONE SCREEN
CREATE VISUAL
GROUPINGS
USE THE FULL WIDTH
OF THE SCREEN
REPLACE BUTTONS WITH A
MENU WHEN APPROPRIATE
LIMIT THE NUMBER OF
SIDE-BY-SIDE CONTROLS
LEFT ALIGN ELEMENTS

62
TY POG RAPHY
• Make it legible!
• The San Francisco typeface is the system font on  
Apple Watch (free download).
• Two variants:  
San Francisco Text and San Francisco Display
• When specifying the system font for system interface
elements, Apple Watch automatically applies the most
appropriate version of the font based on the point size.
It also switches fonts automatically as needed.
• Dynamic Type also improves legibility by letting people
make global changes to their preferred text size.
CUSTOM TYPEFACES ARE SUPPORTED
(USE RESTRAINT!)
USE BUILT-IN TEXT STYLES AS MUCH
AS POSSIBLE FOR DYNAMIC SIZING

63
COLOR
• Use color to provide visual continuity, support
your branding, and aid in communication
• Every app has a global tint color that you can
conﬁgure to reﬂect your primary brand color
• You can add colors, but be sure to use light colors
for text to ensure legibility and contrast
WHILE COLOR SUPPORTS MEANING , THE ROUNDED
RECTANGLE SHAPE OF BUTTONS/LISTS IS THE PRIMARY
WAY TO INDICATE INTERACTIVITY
USE BLACK FOR YOUR APP’S
BACKGROUND COLOR
BE AWARE OF COLOR BLINDNESS
AND HOW DIFFERENT CULTURES
PERCEIVE COLOR

64
CUSTOMIZAT IO N
• Express brand identity through your font, color,
and image choices
• Avoid displaying your logo in your app. Space is
limited. Use that space for content, not for non-
functional branding elements
• Don’t include a launch screen
• Make sure custom fonts are legible
• Use your brand color for your app's global tint
color
• Avoid ﬁlling background areas with logos or
brand colors. Apply colors to speciﬁc elements
instead

65
HOME SCREEN ICONS
• Required and you need to provide icon resources
for both iOS and Apple Watch.
• Apple Watch icons are circular and don’t display
accompanying text.
• Embrace simplicity.
• Maintain similarity between your Apple Watch
and iOS app icons to associate the two icons.
• Create diﬀerent sizes of the Home screen icon for
both Apple Watch sizes (both @2x !)
• Design icons as full-bleed square images. Apple
Watch automatically applies a circular mask.

66
HOME SCREEN ICONS
• Required and you need to provide icon resources
for both iOS and Apple Watch.
• Apple Watch icons are circular and don’t display
accompanying text.
• Embrace simplicity.
• Maintain similarity between your Apple Watch
and iOS app icons to associate the two icons.
• Create diﬀerent sizes of the Home screen icon for
both Apple Watch sizes (both @2x !)
• Design icons as full-bleed square images. Apple
Watch automatically applies a circular mask.
Grab an icon template here: 
https://developer.apple.com/watch/human-interface-
guidelines/resources/

67
MEN U ICONS
• Menus contain actions that people can perform
• Each action requires a label and icon
• Labels are limited to two lines
• Menu icons are template images, which use the
image’s alpha channel (not its color channels) to
deﬁne the shape
• Consider the device size and the complexity of the
icon; Set line widths to 4 pixels or greater to
ensure that they remain legible.
• Use PNGs for menu icons.

68
ANIMATIONS
• Create pre-rendered animations using a sequence of
static images (PNG). Store images in your WatchKit
app bundle so that they can be presented quickly.
• Creating dynamic animations from your WatchKit
extension and transferring them to Apple Watch
adds a delay before playback.
• Use images or groups for playback control.
• Start and stop animations programmatically
• Control playback speed and direction
• Play back only a subset of frames.
• Other elements display full animations in an
endless loop.

UI ELEMENTS
— Labels
— Images
— Groups
— Tables
— Buttons
— Switches
— Sliders
— Maps
— Date & Timer Labels
— Menus

70
UI ELE MENTS
LABELS IMAGES GROUPS TABLES
More Details here: Apple Human Interface Guidelines

71
UI ELE MENTS
SLIDERSBUTTONS SWITCHES MAPS

72
UI ELE MENTS
MENUSDATE LABEL TIMER LABEL

RESOURCES

74
RE SOU RCES
Apple Human Interface Guidelines / Resources
Apple Xcode
For detailed UI concepts, best practices fonts, and resources
(layout templates, icon templates, bezels).
Xcode includes Swift to build WatchKit apps and the
super helpful iOS Simulator to ‘natively’ display & test
every apple device on your desktop while building.
Vandrico Inc. Wearables Database
Comprehensive database that compiles every wearable
on the market by industry, body part, etc, and includes a
ton of info, links and insights on the wearables.

TH ANKS!
75

Designing for the Apple Watch

Recommandé

Recommandé

Contenu connexe

Similaire à Designing for the Apple Watch

Similaire à Designing for the Apple Watch (20)

Dernier

Dernier (20)

Designing for the Apple Watch