Notification board

The Notification Board is a main component of the Tizen wearable UI that allows users to view notifications on their wearable devices. The Notification Board displays notification panels side by side in chronological order, with the most recent notifications located closest to the Watch Face.

Notifications received from the mobile device or the wearable application are displayed and archived in the corresponding panels as notification cards. Users can scroll horizontally to move from panel to panel. When users tap a panel or swipe upward, the latest notification card in the panel will be expanded. Users can tap on a notification group to open the panel and read saved notifications.

What is a Notification?

Notifications on the mobile devices usually contain brief, text-based information that leads users to the actual pages of an app. Instead of using the notifications simply as the lead-in pages to mobile apps, Tizen wearable uses them as an effective means of communicating and exchanging information through its unique notification system capable of delivering a colorful and delightful user experience.

The wearable device converts notifications from the mobile device into Notifications by adding visual and interactive elements, and maintains its notifications synchronized with the notification panel of the mobile device.

If the relevant app is not designed for notifications, a standard notification card is generated using the image and text from the mobile notification.

  • The wearable device converts a phone notification into a notification

The wearable device converts a phone notification into a notification

Using the Samsung Mobile SDK, you can create a unique notification style for your app. You can add photos to notifications to make them more vibrant or add action buttons to make them more versatile.

  • Various styles available for notifications

Various styles available for notifications

Guidelines for Designing Notification

This section provides useful information about the Notification Panel design components in the Samsung SDK.

Designing Panels

There are several design elements that you can customize for the Notification Panel: the notification panel icon and the main action icon, card type(small, medium, large, full), and title.

  • Examples of Notification Panels.

Examples of Notification Panels.
Icons

You can design an icon for the Notification Panel to optimally brand your app. If the icon design is not provided, the Notification Board displays your mobile app icon in the top center of the notification panel.

Color bar(only Gear S)

The color bar is a specific element for rectangular type wearable devices. It is narrow band at the top edge of the Notification Panel. Tizen wearable system takes the dominant color of your Notification Panel icon and generates the color bar for you. Together with the Notification Panel Icon, the color bar helps users identify your app when they skim through panels to search for a specific notification.

Designing Cards

You can select a template that best suits your notification. For collapsed cards, you should use a Primary template as shown in the examples below.

  • Examples of basic primary screen templates

The wearable device converts a phone notification into a notification

When users tap the screen to expand a notification, the secondary template part will be attached to the primary template. Below are the secondary templates. Many elements in Primary and Secondary templates are optional; therefore you can omit some elements and the layout will dynamically adjust the information accordingly.

  • Examples of basic secondary screen templates

Examples of basic secondary screen templates
  • Notification card components on a rectangular type wearable device.

Notification card components on a rectangular type wearable device
  • Notification card components on a circular type wearable device.

Notification card components on a circular type wearable device.
Title

The title is the most important information on a card. Use the most important word or phrase in a card as the title. For instance, the best title for a messaging app card would be the sender’s name.

Sub-Header

A sub-header is an optional element. You can design this element to show the time a notification was received. A messaging app can use a time stamp, but apps like S-health do not necessarily need to specify the time. In such cases, you may use this element to display a subtitle, or to provide brief explanation of the message itself.

Action Button

On a circular type wearable device, action buttons are placed on separate cards, and are hidden until users open the More menu pages by tapping the visual cue.

On a rectangular type wearable device, one large action bottom button is provided on each card, for a quick and easy user access. You can assign different actions for each card in the same panel. This allows you to combine a main action that goes well with the card.

Card Background

The card background is a specific element for the rectangular type wearable devices. You can customize the background and font color for your card to suit your needs. By default, a black layer with a 40% opacity is used as the background of a card. The layer is intended to increase legibility of the white text on the screen. This ensures that the text is easy to read at all times, regardless of the background images.

Designing Action buttons

One large action bottom button is provided on each card, for a quick and easy user access. You can assign different actions for each card in the same panel. This allows you to combine a main action that goes well with the card.

On a circular type wearable device, action buttons are placed on separate cards, and are hidden until users open the More menu pages by tapping the visual cue.

Notifications appear in the panel as cards, and each card has a set of associated actions. For instance, users can reply to a message or call the sender by using the action buttons on the card.

On a rectangular type wearable device, the main action of a card will be displayed on the lower center of the screen. The default main option will be the "Show on device." However, depending on the app design, you can create and use more appropriate actions for the main action button. Actions other than the main action should be linked to the More menu button and stay hidden until the user opens them. You can design the More menu pop-up screen with text buttons or action icons.

Note

On a rectangular type wearable device, you can design the More menu pop-up screen to use only one button type (either text buttons or action icons) at a time.

Action button icon and More menu icon in notifications

Action button icon and More menu icon in notifications

Different actions for different card types on a rectangular type wearable device

Different actions for different card types on a rectangular type wearable device

A circular type wearable device does not provide main action buttons. Users can tap the visual cue on the screen to open the More menu and select the related actions.

A circular type wearable device does not provide main action buttons

Different actions for different card types on a circular type wearable device

Different actions for different card types on a circular type wearable device
Designing Action Buttons for a Rectangular Type Wearable Device

You can design an action icon using a white (R: 255, G: 255, B: 255) line-type drawing, based on the guidelines provided in Iconography . However, you do not have to design the action button background, since the Tizen wearable system automatically creates it for you and applies the dominant color of the Notification Panel icon.

When designing an action, make sure that the action allows the user to complete a task. If an action stops halfway through and does not allow the user to complete the intended task, this will result in a bad user experience. Also, avoid actions that require too many follow-up user actions.

  • Examples of action Icons

Examples of action Icons
Note

You do not have to apply special effects to the action icons. Tizen wearable system automatically applies drop shadow and outer glow effects to the action icons for you. This ensures that they stand out on any background.

Designing Actions for Notifications

The Samsung Rich Notification SDK provides user input interfaces that may be accessed via action buttons placed on notifications. Action button icons and functions can be designed by a 3rd party. When users tap an action button, they can perform one of the following actions: keyboard input, single/multiple selections, making a call, sending a message, or viewing on a mobile device. Also, an input field can be made available for actions that require text input, such as “Reply” or “Comment.”

For example, users can tap an action button for "Places" on a Notification to view a list of places nearby. Then, users can select one or more of them to view detailed information.