Microsoft Band Visual Guidelines

Microsoft BandVisual guidelines

Preview 1.0Published for Third PartyVersion 1.0/02.20.2015

1

Microsoft

Welcome Microsoft Band Experience Design GuidelinesPreview 1.0

2

Microsoft

Table of Contents

Introduction

Brand

Glossary

Introduction

Typography

Color

Iconography

Grid Guideline

Interaction Patterns

Template Library

3

Microsoft

Microsoft BandIntroduction

Microsoft Band helps you achieve your wellness goals by tracking your heart rate, steps, calorie burn and sleep quality, and makes you more productive with email previews and calendar alerts at a glance. Maximize your fitness with Guided Workouts, 24-hour heart rate monitoring, and automatic activity counting. Take notes and set reminders with your voice using Cortana personal assistant on Windows Phone.* See incoming calls, texts, social updates, weather and more on your wrist. Microsoft Band features advanced technology including a bright, full-color touch screen, dust- and water-resistance,** accelerometer, UV sensor, and built-in GPS for run mapping. Works with Windows Phone, Android and iPhone.e Inc. iPhone is a trademark of Apple Inc.

4

Microsoft

Microsoft Bandpowered by Microsoft Health

Microsoft Band, the first device powered by Microsoft Health, helps you achieve your wellness goals by tracking your heart rate, steps, calorie burn, and sleep quality. It also helps you be more productive with email previews and calendar alerts - right on your wrist.

Microsoft Band is a wrist-worn device that launches Microsofts presence in the wearable marketplace. The Band innovates in the wellness category and keeps you connected to the things you care about most. Microsoft Band delivers on incredible hardware paired

with a multi-platform app that links to Bing Services including Health & Wellness, Sports, Finance, Weather, and Traffic. Microsoft Band is the only device that provides personal insights to keep users healthy and connected throughout the day.

5

Microsoft

TechnologyUnderstanding the technology and different inputs will help you design the best experience for your user.

Optical heart rate sensor

3-axis accelerometer/gyrometer

GPS

Ambient light sensor

UV sensor

Capacitive sensor

Haptic vibration motor

Microphone

Galvanic skin response

1

2

3

4

5

6

7

8

9

7

1

8

4

5

23

9

6

6

Microsoft

Haptic TonesThe Microsoft Band SDK exposes 9 unique haptic vibration tones. These tones are used throughout the band experience, so use care to align to the standard haptic experience. Note that via the device settings, users have control over the intensity of haptic levels and they can turn the haptic motor off.

1. Notification one tone:

2. Notification two tone:

3. Notification alarm:

4. Notification timer:

5. One Tone High:

6. Two Tone High:

7. Three Tone High:

8. Ramp up:

9. Ramp down:

One gentle notification tone

Two gentle notification tones

Three long high intensity tones

One long high intensity tone

One high intensity tone

Two high intensity tones

Three high intensity tones

One tone with ascending intensity

One tone with descending intensity

7

Microsoft

Interaction InputsThere are the three primary physical interaction points with the Band.

ScreenThe 243ppi screen size measures 320px wide by 106px high.

Power ButtonThe power button turns the screen on and off. Pressing and holding the button for 3 seconds initiates the Power Off modal.

Action ButtonThe Action Button provides contextual actions for the user.

3

3

11

320px x 106px

2

2

8

Microsoft

UI LayersThe UI system is comprised of the following layers:

System NotificationsPower Off, Low Battery notifications, etc.

NotificationToasts and Alerts

Activity ScreensIn-activity for apps like Run, Workout, Guided Workout

Start StripDefault landing screen (On the MeTile)

Open AppTapping on any Start Strip tile opens up this layer

1

1

2

3

4

52

3

4

5

9

Microsoft

320px

Default visible screen area

1 2 3

Start StripThe Start Strip is composed of three main pieces.

System BarThe Systems Bar offers a quick peek of battery, Daily Heart Rate, and Bluetooth.

Me TileThe primary tile on the Start Strip, the Me Tile displays the current time, metrics, and system states.

App TilesApp Tiles launch the underlaying Application.

3

1

2

10

Microsoft

1 2 43

320px

Default visible screen area

Open AppWhen the app is open, it is comprised of the following elements:

Back BarThe back bar stays fixed on the screen in an open app, with content scrolling behind it.

Page 1First page in the app.

PeekThe peek is the first 35px of the next page that provides a visual cue that there is more content to the right.

Page 2Second page of the app.

3

4

1

2

11

Microsoft

Features & SpecificationsActivity tracking & Goal setting

24-hour heart rate monitor:Tracks calorie burn, sleep patterns, and peak and resting heart rate.

StepsMicrosoft Band calculates the calories youve burned and the distance youve traveled each day.

Built-in GPSMeasures the distance youve run and tracks your pace and route.

Calorie tracking:Count the calories you burn each day. View daily or weekly stats and set goals.

Sleep tracking:When activated, Microsoft Band tracks the length and quality of your sleep and displays the results in sleep charts.

Work Out SmarterGet a quick read of the UV Index.

12

Microsoft

Features & SpecificationsAlerts & Notifications

Text messaging:Get your text messages right on your wrist. Reply instantly with a standard quick response or create your own set of personal replies.

CallsSee incoming call and voicemail notifications on your band. Reply instantly with a standard quick response or choose one that youve created.

Built-in GPSMeasures the distance youve run, tracks your pace and records the routes youve run, biked, or hiked and then maps them in the phone app.

Calorie tracking:Count the calories you burn each day. View daily or weekly stats and set goals.

Sleep tracking:Good sleep is one of the foundations of a healthy body. When activated, Microsoft Band keeps working discreetly while you slumber to track your length and quality of sleep. Use the app dashboard on your phone to analyze how often you wake, your periods of light and restful sleep as well as your average heart rate/hour.

UV MonitorGet a quick read of the UV Index while youre out and about to see how much sun youre getting.

13

Microsoft

System Features Live HealthierSet daily wellness goals and get personalized insights to help you achieve them. Accurately track your steps, heart rate, calorie burn and sleep quality.

Stay ConnectedSee incoming calls, texts, email, calendar alerts, social updates and more at a glance. Works with Windows Phone, Android and iPhone via Bluetooth.

Work Out SmarterMaximize your fitness with Guided Workouts, continuous optical heart rate measurement and automatic activity counting.

Do MoreMake the most of every moment with a bright, full-color touch screen, six advanced sensors, water resistance and built-in GPS.

14

Microsoft

Direct, yet discrete.Notifications 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 me is always at arms length.

Not a mini phone.Free my hands from the fear of missing out. Give me enough information in the moment so I know if and when I need to dig into my phone. Its about just the right amount of information, so I never miss the moments most important to me.

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

In and out at 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.

About me.Knows your patterns and what youve done. Anticipates your needs through smart recommendations and tracking.

Microsoft BandExperience Principals

The principles should be taken into considering when creating applications for the Microsoft Band.

15

Microsoft

Microsoft BandPersonality

Personality Goals Stickiness Likeability Facilitation of understanding Enable a sense of control

PersonalityMicrosoft Band is straightforward, honest and intimate, like the voice of a trusted friend. It speaks to you in the same way that youd talk to other people. Your Band should show empathy and excitement.

Like you, Microsoft Band has more than one way of communicating:

1 Through UI text2 With iconography3 With haptics

16

Microsoft

Glossary This section contains definitions and visual references for elements that will be mentioned throughout this document.

17

Microsoft

Glossary

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

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

Me TileThe Me Tile is the default view of the Start Strip and is the tile that contains the users Steps, Distance, Calories, Heartrate, and Todays Date. The Me Tile also displays the state of the Band.

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

Settings TileThe tile that gives the user access to the band settings. The settings tile is always the right most tile on the Start Strip.

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

18

Microsoft

Glossary

Badged TilesTiles badge with numbers and a shift in background color to show that new content is available to the user.

Back BarIn open apps, the back bar allows the user to close the app and return to the Start Strip.

TrackerThe biometric trackers located in the open Me Tile that provide biometric progress towards steps, distrance traveled, Calories, and Heartrate.

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

Action ButtonThe hardware button that performs contextual actions when pressed.

Action Button IndicatorThe blinking arrow that acts as a visual cue that a contextual action is available.

9654Steps

2.65

19

Microsoft

Typography As the visual representation of language, typographys main task is to be clear. Its style should never get in the way of that goal. But typography also has an important role as a layout component, with a powerful effect on the density and complexity of the designand on the users experience of that design.

Our aim for services is rigor and reduction. We use a minimum amount of weights and sizes and strive for the most efficient approach across all screens. We align with Microsofts brand personality and help to build a voice thats friendly, authentic, and conversational. And we ensure that the particulars of our typographytype ramp, sizes, leadingwork in harmony with tiles and other elements.

20

Microsoft

Typography

Typography

The Microsoft Band contains 6 different font styles. Of these 6 font styles, 2 have full character sets and 4 contain only numbers and punctuation marks.

The different character sets are detailed on the next two pages.

7R

10B

14SL

18SL

18B

23SL

Full Set

Limited Set

Download fonts

Segoe UI P Regular 7px

Segoe UI P Bold 10px

Segoe UI P Semilight 14px

Segoe UI P Semilight 18pxSegoe UI P Bold 18pxSegoe UI P Semilight 23px

21

Microsoft

Typography

NUL

SOH

STX

ETX

EOT

ENQ

ACK

BEL

BS

HT

LF

VT

FF

CR

SO

SI

DLE

DC1

DC2

DC3

DC4

NAK

SYN

ETB

CAN

EM

SUB

ESC

FS

GS

RS

US

SP

!

#

$

%

&

(

)

*

+

,

-

.

/

0

1

2

3

4

5

6

7

8

9

:

;

?

@

A

B

C D

E F G H I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

`

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

p

q

r

s

t

u

v

w

x

y

z

{

|

}

~

DEL

NBSP

SHY

Full Character Set(Windows 1252)

http://msdn.microsoft.com/en-us/goglobal/cc305145.aspx

22

Microsoft

Typography

SP-

./01

2345

6789

:

%

Limited Character Set

23

Microsoft

Typography

Highlight Color

Primary Content

Secondary Text

Header 1Primary ContentSecondary Content

Typographic Hierarchy

Typographic hierarchy within content is achieved with color. Headers use the chosen color themes highlight color. Primary content uses white to give it the most visual prominence and focus. Secondary content is slightly toned down by using a gray color class called Secondary Text.

For more information on color themes and classes, reference the Color section of this document that begins on page 33.

24

Microsoft

Typography

Download fonts

Letter Spacing

At this time, custom letter spacing (tracking or kerning) can not be achieved on the band. Keep this in mind when creating comps of your app to be as realistic as possible.

Segoe UI P Default Spacing

Default Tracking 01234567890TRACKING SET AT 0

Segoe UI P Custom Spacing

Tracking set at -201234567890TRACKING SET AT 100

Do

Dont

25

Microsoft

Color Color provides intuitive wayfinding through the Bands various levels of information, and serves as a crucial tool for reinforcing the interaction model. Color should be applied in consistent patterns across the Band and is the primary way for users to personalize their Band. First selected in the initial set-up process, Theme Color controls and Me Tile background images are accessible through phone apps setting menus. Theme Colors are used as the background of all tiles and should be used internally in apps for content headers and icons. Because the Band hosts a wearable UI it is important to protect the aesthetic decisions of the user and allow for the reflections of their tastes. We strongly recommend the use of the user selected Theme Color in your app. The Band operates in the 16-bit RGB 565 color space.

26

Microsoft

Color

Color ClassesFor each color theme, there are six color classes that are used to represent various states of activity on the band.

Start Strip Tile Background (New content)

High Contrast

Lowlight Down-feedback on Start Strip TilesDown-feedback on Buttons

Highlight Open-App Header Text

Muted Fitness: Achievement Marker Backgrounds

Secondary Open-App Secondary TextIcon Toggle Switches

Lowlight

HighlightedState

Secondary

MutedState

HeaderColor

Base Start Strip TileApp Bar

Base

27

Microsoft

Essentials Active DiscreetColor Themes

Base

Start Strip

In App

Highlight

Lowlight

Secondary Text

High Contrast

Muted

28

Microsoft

Color

Color & Typography

When applying brand colors to the Band, keep in mind that text will commonly be viewed on black backgrounds. In many cases, a brighter Highlight version of a brand or theme color will need to be chosen in order to maximize legibility.

This is the base theme color applied to text.

This is a brighter highlight version of the theme color applied to text.This is the base theme color applied to text.

This is the brighter highlight version of the theme color applied to text.

29

Microsoft

Iconography Icons are used extensively on the Band to represent the underlying app, metric, and/or functions. On the Start Strip, it is recommended that tiles use a single 46x46 px white PNG icon centered on the tiles background. Within individual apps, it is recommended that no more than 10 distinct icons are used.

30

Microsoft

Iconography

App Tiles & Icons

Each app is visually represented on the Start Strip by an icon that fits within a 46px x 46px box.

Apps that contain messaging content will badge when new content arrives. When badged, the tile icon scales down to 24px x 24px to accommodate the badging system.

If your app requires both sizes, you may need to redraw your icon to make sure it is visually optimized for the smaller size.

46px x 46px 24px x 24px

Exercise Guided Workout

Run Sleep Messages Calendar Email Bike UV Notification Center

Bing Weather Bing Finance Bing Sports Bing News Clock Facebook Twitter Starbucks Facebook Messenger

Calls

31

Microsoft

Grid Guidelines The Start Strip has tiles with 2 px of padding in each direction.

The in app grid is designed to provide all of the needed navigational affordances (back to the start strip, content below, and content to the left). To enable this structure, inside each app the system maintains a 40px width back bar, 35 px of peek content, and a on screen content page with a width of 245 px.

32

Microsoft

Grid Guidelines

Common Grid RulesOpen App

These general margin and spacing rules will help you create custom layouts that will maintain a consistent and unified visual experience for the user.

3 Lines of text

Scrolling text

31px

15px

30px

30px

20px

28px

28px

30px

15px15px

15px

Peek

PeekBack Bar

Back Bar

33

Microsoft

Grid Guidelines

Common Grid RulesNotifications

These general margin and spacing rules will help you create custom layouts that will maintain a consistent and unified visual experience for the user.

28px

28px

31px

31px

15px30px

30px60px

Peek

Peek

Notifications with options

Notification with no options

34

Microsoft

Common Interaction Patterns The Band has a simple horizontal navigation structure. Swiping right from the Me Tile, a user can interact with an app by tapping on the corresponding tile. The Start Strip tile order is configured in the Manage Tiles menu in the Microsoft Health application.

Inside of an app, users are greeted by their most recent content and can swipe right to see older information. Tapping on the back button will send the user back to the Start Strip. .

35

Microsoft


InteractionThere are 6 common patterns performed when interacting with the band.

TapTap for selection

Horizontal Swipe (Pan)Swipe left and right to navigate.

Vertical Swipe (Scroll)Swiping up and down to read more text.

Action Button: Single PressPress to perform contextually relevant actions.

Action Button: Double PressDouble press to cycle through content while in an activity.

Action Button: Press & HoldPress and hold for 3 seconds to access voice commands.

3

4

5

6

1

2

36

Microsoft

1

4

2

5 6

3


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

PeekThe Peek shows the user that there is more content available by swiping horizontally.

Peek (Vertical)The vertical peek shows 4px of the next line of text in a column of text.

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

Action Button IndicatorThe Action Button Indicator arrow should always appear when a primary action is available.

3

4

1

2

37

Microsoft

3

1 2 4

Template Library The following templates are provided in the partner SDK for you to use.

38

Microsoft

Template Library

245px40px 35px

30px

30px

31px

15px

Header 1Primary ContentSecondary Content

15px Body Segoe UI P / Regular / 7px / Sentence Case

Header / Primary / SecondaryThe most basic page layout consists of a header, time stamp and a single line of content.

39

Microsoft

Template Library

Header ScrollSome tiles may have content that extends out of the viewport. The user can scroll up and down to view this contnet.

30px

28px

28px

20px

320px

HeaderScroll Content Line 1Scroll Content Line 2Scroll Content Line 3

Body Segoe UI P / Regular / 7px / Sentence Case15px

245px40px 35px

40

Microsoft

Template Library

245px40px 35px

01:Readout02:Readout03:Readout

30px

30px

31px

15px

10px Body Segoe UI P / Regular / 7px / Sentence Case15px

Icon bounding Box 20x20px

MetricsMetrics should be displayed next to their corresponding icon on a Header / Primary / Secondary page layout. Metrics should be displayed in the singular or stacked in threes.

41

Microsoft

Template Library

245px40px 35px

30px

56px

20px5px


10px 10px 10px Body Segoe UI P / Regular / 7px / Sentence Case15px

14SL Segoe UI P / Regular / 14px

Metric w/Secondary contentLarge metrics can be displayed providing that they respect page padding concerns.

42

Microsoft

Template Library

Single Metric

245px40px 35px

30px

56px

20px5px

Body Segoe UI P / Regular / 7px / Sentence Case15px

14SL Segoe UI P / Semilight / 14px

43

Microsoft

Template Library

245px40px 35px

30px

56px

20px5px

Body Segoe UI P / Regular / 7px / Sentence Case

14SL Segoe UI P / Semilight / 14px


15px 10px

Single Metric with Icon

44

Microsoft

Thank you.

45

Microsoft

Documents

Microsoft Band Visual Guidelines