Microsoft Band 2 Instruction manual

1

Microsoft Band 2
Experience Design Guidelines

Published for Third Party
Version 2.0

Microsoft Band 2

2

Welcome

Microsoft Band 2 Experience Design Guidelines

These guidelines provide an overview of the Band,

and dene guidelines for the user experience for

developers of third party apps.

Microsoft Band 2

3

Table of Contents

Introduction

Glossary

Interaction Patterns

Typography

Color

Iconography

Template Library

Microsoft Band 2

Introduction 4

Microsoft Band 2

Experience Principals

The experience principles should be

taken into consideration when

creating app tiles for the
Microsoft Band.

Direct, yet discrete.

Notications are timely, not disruptive and quick to

dismiss. Information passes from you to the cloud and

back again in a direct, yet personal way.

Hyper-glanceable.

Buzz, ping, glance, swipe... Indoors or out, dark or

bright, the information most important to you is
always at arm’s length.

Forgiving.

Interactions are hyper-mobile. A nondestructive
interface tailored for the range of human motion.
Positive reactions to your actions. Compensates
for error.

In and out in eight.

Never break the stride of life... Glance, peek, and

decide all in less than eight seconds — the right
type and amount of information at the right time.

Not a mini-phone.

Free your hands from the fear of missing out. Provide

enough information in the moment so you know if

and when you need to dig into your phone. It’s all
about the right amount of information, so you’ll never
miss the moments that are most important to you.

About you.

Knows your patterns and what you’ve done.
Anticipates your needs through smart

recommendations and tracking.

Microsoft Band 2

Brand

Introduction 5

8

4

7

3

Technology

Understanding the technology and dierent

inputs will help you design the best
experience for your user.

1 1

Optical heart rate sensor

2

6

10

2

3

4

5

6

7

8

3-axis accelerometer/gyrometer

GPS

Ambient light sensor

UV sensor

Capacitive sensor

Haptic vibration motor

Microphone

9

5

9

10

Galvanic skin response

Barometer

Microsoft Band 2

Brand

Introduction 6

7

Haptic Vibration Motor

The Microsoft Band SDK exposes nine

unique haptic vibration tones. These

tones are used throughout the band
experience, so use with care to align to
the standard haptic experience. Note
by using the device settings, users have
control over the intensity of haptic levels

and they can turn the haptic motor o.

Tones

1. Notication one tone:

2. Notication two tone:

3. Notication alarm:

4. Notication timer:

5. One tone high:

6. Two tone high:

One gentle notication tone

Two gentle notication tones

Three long high intensity tones

One long high intensity tone

One high intensity tone

Two high intensity tones

7. Three tone high:

8. Ramp up:

9. Ramp down:

Three high intensity tones

One tone with ascending intensity

One tone with descending intensity

Microsoft Band 2

Brand

Introduction 7

Interaction Inputs

There are the three primary physical
interaction points with the Band:

Screen

1

The 254ppi screen size measures
320px wide by 128px high.

Power Button

2

The Power Button turns the

screen on and o. Pressing and

holding the button for three

seconds initiates the Power O

modal dialog.

1

320px x 128px

32

3

Action Button

The Action Button provides
contextual actions for the user.

Microsoft Band 2

Brand

Introduction 8

1

2

UI Layers

The UI system is comprised of the
following layers:

System Notications

1

Power O, Low Battery
notications, and so on

Alarms

2

Remain on-screen until user
interacts with them

Notications

3

Time out after a few seconds

3

4

4

5

6

5

Activity Screens

In-activity for tiles like Run,
Workout, Guided Workout

Start Strip

6

Default landing screen (on the Me
Tile)

Open Tile

Tapping on any Start Strip tile
opens up this layer

Microsoft Band 2

Brand

Introduction 9

Visible screen area

Start Strip

The Start Strip is composed of three
main pieces:

System Bar

1

The System Bar oers a quick
peek of battery, heart rate, and

Bluetooth connectivity.

2

Me Tile

The primary tile on the Start Strip.
The Me Tile displays the current

320px

3

time, metrics, and system states.

App Tiles

Opening a tile launches you into

a specic experience or controls.

1

2 3

Microsoft Band 2

Brand

Primary Content

Secondary Content

Introduction 10

Visible screen area

Open Tile

When a tile is open, it’s composed of the
following elements:

1

2

Back Bar

The back bar stays xed on

the screen in an open tile, with
content scrolling behind it. The

40px back bar includes a 1px line

in theme-color highlight.

Page 1

320px

Page 1 Page 2

Primary Content Primary Content

Secondary Content Secondary Content

1 2 4

Page 3

3

4

The rst page in the tile.

3

Peek

The peek is the rst 22px of the

next page that provides a visual
cue that there is more content to
the right.

Page 2

The second page of the tile.

Microsoft Band 2

Introduction 11

Microsoft Band 2

Personality

Personality

Microsoft Band communicates in a straightforward,

honest and intimate way, like the voice of a trusted
friend. It speaks to you in the same way that you’d talk

to other people. Your Band should show empathy and
excitement.

Microsoft Band has more than one way
of communicating:

• UI text

• Iconography

Personality Goals

• Stickiness: provide reasons to come back

• Likeability: always have a positive attitude

• Facilitation of understanding: keep

communication simple

• Enable a sense of control

• Haptics vibrations

Microsoft Band 2

12

Glossary

This section contains denitions and visual references for

elements that will be mentioned throughout this document.

Microsoft Band 2

Glossary

Glossary

These are examples of common
elements that will be referred
to throughout this document.

13

Start Strip

The start screen of the Band UI is a strip
made up of the System Bar, Me Tile, App
Tiles, and the Settings Tile.

System Bar

The section located at the left end of the
Start Strip that contains the status of the
battery life, biometric sensors, and Bluetooth
connection.

Me Tile

App Tile

App tiles are the tiles on the Start Strip
that represent apps. Pressing an app tile
opens up that app on the band.

Settings Tile

The Me Tile is the default view of the Start
Strip. It’s the tile that contains the user’s

steps, distance, calories, oors climbed,

heart rate, and today’s date. The Me Tile also
displays the state of the Band.

The Settings Tile gives the user access
to the settings of the Band. The Settings
Tile is always the right-most tile on the
Start Strip.

Microsoft Band 2

Glossary

Page 3

Primary Content

Secondary Content

Page 1

Primary Content

Secondary Content

Glossary

These are examples of common
elements that will be referred to
throughout this document.

14

Badged Tiles

Tiles badge with numbers and a shift

in background color to show that new

content is available to the user.

Back Bar

In open tiles, the back bar allows the

user to close the tile and return to the
Start Strip.

Page 1

Primary Content

Secondary Content

Peek

The peek is the rst 22px of the next

Action Button

The hardware button that performs
contextual actions when pressed.

Action Button Indicator

The blinking arrow acts as a visual cue

page that provides a visual cue that
there is more content to the right.

that a contextual action is available.

Microsoft Band 2

15

Interaction Patterns

The Band has a simple horizontal navigation structure.
Swiping right from the Me Tile, a user can interact with
a tile app by tapping on the corresponding tile. The

Start Strip tile order is congured in the “Manage Tiles”

menu in the Microsoft Health app.

Inside a tile, users are greeted by their most recent
content and can swipe over to see older information or

additional controls. Tapping on the Back Bar sends the
user back to the Start Strip.

Microsoft Band 2

Interaction Patterns

16

Interaction

There are 6 common patterns performed
when interacting with the Band:

1

Tap

Tap for selection.

2

Horizontal Swipe

Swipe left and right to navigate.

1

2

3

3

4

5

6

Vertical Swipe

Swiping up and down to read
more text.

Action Button: Single Press

Press to perform primary action
in given context.

Action Button: Double Press

Double-press to perform a
secondary action in given context.

Action Button: Press and Hold

4

5 6

Press and hold for 3 seconds to
access voice commands.

Microsoft Band 2

Interaction Patterns

17

Visual Cues

To help guide users through the
experience, visual cues are used to hint
at available interactions.

1

Peek (Horizontal)

The Peek shows the user that

there is more content available by
swiping horizontally.

1

2

3

2

3

4

Peek (Vertical)

In a vertical list picker, there is a
peek of the options above and

below.

Scroll Bar

Upon a screen press, a scroll bar
appears to provide added context
that there is more text available
by swiping up and down.

Action Button Indicator

The Action Button indicator

4

5

5

arrow will always appear when a
primary action is available.

Chevron Indicator

When there are button options to

the right, there is an arrow peek

indicator.

Microsoft Band 2