samsung digital health s health...

Copyright © Samsung Electronics, Co., Ltd. All rights reserved.

Tracker Design Guidelines

Samsung Digital Health – S Health Service

1.2.0

Copyright © Samsung Electronics, Co., Ltd. All rights reserved. 2 Samsung Digital Health – S Health Service

Tracker Design Guideline Overview

This document includes design guidelines for the Samsung Digital Health SDK’s tracker and tracker tile.

Tracker

The tracker is a basic building block of S Health. User’s health data can be monitored, measured or updated through the tracker

such as counting steps, measuring heart rates, tracking exercises, collecting health data on background, or allowing user to enter

data manually.

S Health has useful health trackers and user can see interesting health data through the tracker tile on the main screen by turning

on the each tracker’s switch for subscription on the S Health > Manage items menu.

S Health’s Trackers


Tracker Design Guideline Design Principles

The S Health Service package of Samsung Digital Health SDK provides interfaces to create your tracker and post its tile on

S Health to provide intelligent health data for user.

Your tracker will be shown on the S Health > Manage items page after installation of your application on the device.

Consider the following principles before designing your tracker and its tile.

Principle 1 - Tracker Definition?

An application that defines a tracker can be rejected as S Health’s partner apps if the

tracker’s data is duplicated with S Health’s trackers because the defined tracker’s tile can be

posted on S Health’s main screen with other S Health’s trackers.

As the right figure, S Health posts the related tracker’s tile automatically when your

application writes measured data to S Health. If your application’s tracker is defined to

express the user’s blood pressure, two tiles for S Health’s blood pressure tracker and your

application tracker will be posted at the same time.

Check S Health’s existing trackers before defining your tracker. If the cover your application’s health data, avoid to create a new tracker for your application if S Health’s trackers cover.

Your

Application

1. Measure user’s blood pressure

2. Write data to S Health 3. S Health posts the related tracker’s tile

automatically with application’s data

S Health Tracker’s operation

Principle 2- How many your tracker can be defined?

Only one tracker is allowed for each S Health’s partner application.

Chang the tracker tile type whenever the app posts the its tracker tile if

required instead of defining one more tracker definition.


Tracker Design Guideline Tracker Operation

The following figure describes a use case of tracker how your tracker’s tile is shown on S Health.

You can post different tile types for your tracker as you want.

1. User subscribes your tracker.

2. The tile of your tracker displays

on the main screen.

5. The measured value displays

on the different tile type .

3. Tab the button of

the tile.

4. Jumped to your

application and start

the measurement.


Tracker Design Guideline Screen Grid

S Health provides 2x and 3x screen grids.

The user can select the preferred grid in S Health > Manage items.

If you set your tracker tile for the 2x grid only, the SDK’s S Health Service resizes your tile automatically for the 3x grid. Some

property values like the title, measured data, or button text can be clopped by cases.

Checking your tile on both grids is needed for the nice view to users.

3x grid

2x grid


Tracker Design Guideline Tracker Definition

If your application is registered as S Health’s partner apps and user installs your application successfully, your application’s

tracker is shown in the S Health > Manage items menu.

2 3

1

Icon’s size

− 36 dp(H) x 36 dp(W)

2

Title text

− Max text length: 16

− Font size: 19 dp

− Color: Assigned by S Health

− Left aligned

3 Tracker

− Allowed tracker number

for each app: 1

1


Tracker Design Guideline Tracker Tile

If user subscribes your tracker on S Health > Manage items, its tile is shown on the main screen of S Health.

Tracker Tile

The subscribed tracker is visualized as a tile with the rectangular box on the main screen of S Health. It has the three types as the

figure below. It presents a notification to user or the latest data collected by its tracker such as calories burned, running distance,

or number of activities. And it acts as a gateway to its tracker. E.g. it can jump to the tracker’s detailed page or start measurement

when the tracker tile is selected.

Tracker Tile Types


Tracker Design Guideline Tracker Tile Types 1

The tracker tile needs to be designed to consume it quickly on the main screen by user as well as perform the proper action for its

tracker when it is selected.

Note that the background color of the tile is fixed. E.g. white. However, one can use the primary brand color for the title, content

value and unit, and button background. They are marked with * in this guideline.

Samsung Digital Health provides the following tracker tile types and you can choose one of them for your application.

Tracker Tile Type 1

The type 1 is useful when notifying user without tracker’s measured data.

It contains only the following properties.

- Icon

- Title

- Button

This tile type is useful to post the first tile when the user subscribes your tracker

and there is no data to display yet.

You can add an event to the button to start the data measurement on your app.

Icon

Title*

Tracker Tile without Content Value

Button*


Tracker Design Guideline Tracker Tile Types 2

Date

Content value*

Tracker Tile with Content Value

Title*

Icon

Content unit*

Tracker Tile with

Content Value and Button

Date

Content unit*

Title*

Icon

Button*

Content value*

Tracker Tile Type 2

The type 2 presents the latest tracker’s latest data with the following properties.

- Icon

- Content value

- Content unit (optional)

- Title

- Date

Tracker Tile Type 3

The type 3 presents the tracker’s latest data with the button action and the

following properties.

- Icon

- Content value

- Content unit (optional)

- Title

- Date

- Button


Tracker Design Guideline Interaction Policy

You can add the intent on the tracker tile itself or the button to perform the specific action.

The tile intent is used to jump to its tracker to show its detailed information when the tracker tile is selected by user.

The button intent of the tracker tile is more specified. Its appropriate actions when the button is pressed are the following.

- Start or stop a tracking session

- Measure new health data

- Update health data

For a tracker that collects data on background, use one of tile types without the button and periodically update its tile.

Execute button action

Execute tile action Execute tile action


Tracker Design Guideline Tile Type 1 (2x Grid)

The following figure describes size information of the tracker tile without content value. Make your tracker to be in harmony with

other S Health’s tiles.

The figure below describes Tile Type 1’s detailed size information on the 2x grid.

Icon’s size

− Height: 60 dp

− Width: 60 dp preferably

(it can be wider within the

button width.)

Title text


− Color: Brand color

− Center aligned

1

2

Button text


− Color: #fafafa

− Center aligned

− CAPITAL letters

Button Background


3

4

Tile Type 1 (2x Grid)

60

60

22

31

128

1

2

4 3



The following figure describes size information of the tracker tile with content value. Make your tracker to be in harmony with other

S Health’s tiles.

1

2

3

4

5

Date

− Color: #252525 (opacity 50%)

− Center aligned

5

Icon’s size

− Height: 30 dp


(it can be wider within the title width.)

1

Good Bad example

"2500"

"2.5"

Meaningless data like "- - - - "

"Running"

Content value

− Numeric value



− Center aligned

2

Content unit

− Optional


− Color : Brand color

− Center aligned

3

4 Title text



− Center aligned




The following figure describes size information of the

tracker tile with a button. Make your tracker to be in

harmony with other S Health’s tiles.

Date

− Color: #252525 (opacity 50%)

− Center aligned

5

Button text


− Color: #fafafa

− Center aligned

− CAPITAL letters

6

Icon’s size

− Height: 30 dp


(it can be wider within the button width.)

1

Good Bad example

"2500"

"2.5"

Meaningless data like "- - - - "

Text like "Running"

Content value

− Numeric value




− Center aligned

2

Content unit

− Optional


− Color : Brand color


− Center aligned

3

4 Title text



− Center aligned

Button Background


7

1

2

3

4

5

6 7


samsung digital health s health...

Documents