Design

UI and UX

The structure of Smart Bulletin makes Smart Bulletin expand vertically as content pieces are attached one after another. Smart Bulletin provides UI and UX that allow the display of multiple content pieces on a single screen and access to each content piece in such a structure.

UI Elements

The Smart Bulletin screen consists of the following:

 

 

Title Area

This area displays the Settings icon and the number of notifications.

  • Settings: displays the Settings screen when tapped.
  • Notification Icons: displays the total number of notifications issued by all the attached providers.

The Title Area's background image changes with time.

 

Provider

This area shows attached providers.

  • Provider header: displays the title of the provider, notification icon and Fold-all icon. Developers cannot specify its layout.
  • Provider body: displays the provider's content. Developers can specify its layout.
  • Notification icon: displays the icon for notifications issued by the provider.
  • Fold-all icon: displays the icon that folds all providers.

 

Card

It is recommended that a provider in Smart Bulletin should consist of more than one card so that it can show different information according to the situation. Cards can be added and removed dynamically.

The figure below is a card template recommended by Smart Bulletin.

 

 

  • Initial card

The card that is shown first when the user enters a provider.

The initial card introduces the provider and shows instructions, such as how to set up a provider. Tapping this card directs the user to the initial settings screen or runs the application.

 

  • Status card

Each provider has a status card by default. This card shows the content's basic status and its controller. Tapping this card displays detailed information about the status of the content.

 

  • Event card

An event card shows up when a certain condition is met. You can remove event cards. Tapping this card displays detailed information about the event.

 

It is recommended that information displayed on a card is simplified for the sake of concise delivery and that detailed information is provided after the card is tapped. In addition, it is recommended that a card should consist of a single command.

 

For information on how to implement a card, see Source Code Analysis.

 

UX Scenarios

Multiple providers can be attached to Smart Bulletin. Here, we will take a look at how to attach a provider to Smart Bulletin and how to access the attached provider.


Attaching Providers

On Smart Bulletin's Settings screen, you can select the providers that you want to display in Smart Bulletin. To enter the Settings screen, tap the Settings icon in the top right-hand corner of Smart Bulletin or go to Settings > Home > Smart Bulletin on your Android device. The Settings screen is shown in (a).

The items you checked are displayed in Smart Bulletin, and the display order is the same as shown on the Settings screen. To change the display order, press and hold the icon ( ) on the left of any item and drag it into the desired position as shown in (b).



(a) (b)

Setting Providers


The installed providers automatically appear in the list on the Settings screen. To install a new provider, enter the App Store by tapping the download icon in the top right of the Settings screen.


Navigating through Providers

When providers are not displayed fully on the screen because there are too many of them, you can navigate through the providers by scrolling and folding/unfolding them.



(a) Scrolling (b) Folding

Navigating Providers


  • Scrolling

Providers in Smart Bulletin are listed vertically. You can navigate through providers by scrolling them up and down as shown in (a).


  • Folding and Unfolding

Tapping the Fold-all icon ( ) in header of each provider displays an array of folded providers on the screen as shown in (b). Tapping a certain provider in the folded screen unfolds all folded providers and then switches to the selected provider screen.


Gestures

Smart Bulletin only supports tapping and flicking to enable control with the simplest motions.

Styles

Because the Smart Bulletin displays various pieces of information integrated into one place, it is necessary to make sure that providers have a similar style. To ensure consistency, Smart Bulletin providers are required to follow Smart Bulletin's style guide.


Compliance with the style guide is mandatory except in special circumstances.
It is recommended that you develop apps referring to the sample application in the SDK package as the sample application complies with the style guide.


In Smart Bulletin, each provider consists of the followings.


Items of each provider


  • Provider body: content layouts, colors, text and images can be provided. See 3.2.1 Layouts, 3.2.2 Typography, 3.2.4 Colors and 3.2.5 Animations.
  • Title text and color: the title color and text can be specified. See 3.2.4 Colors.
  • Ongoing notification icon: a notification icon must be provided if the provider will issue ongoing notifications. See 3.2.3 Iconography.
  • Background color: the background color for the provider can be specified. See 3.2.4 Colors.


Layouts

This section describes the content layouts to be displayed in provider bodies. A provider body is the area left after excluding the header and margin from a whole provider area; the recommended height for a provider body is 175 dp.

 

Size and margin of provider body

 

Body Layouts

You can apply the following layouts in the content area.

 

  • Type A

Type A is used when there is only a title or a title and a small amount of body text. The initial screen of Sample Card Provider in sample application applies Type A.

 

Item

Left margin

Top margin

Size

Alignment

Main title

8dp

7dp

22dp

Left

Body text

8dp

11dp

14dp

Left

 

For detailed information about fonts, see Typography.

 

The following is an example of Type A.

 

  • Type B

Type B is used only when there is only body text. Sample Configuration Provider in sample application applies Type B.

 

Item

Left margin

Top margin

Size

Alignment

Body text

8dp

11dp

14dp

Left

 

For detailed information about fonts, see Typography.

 

The following is an example of Type B.

 

  • Type C

Type C is used when it mainly consists of controllers without text.

 

Freely structure Type C layouts with images and so on, but make sure it harmonizes with the other providers.

 

For detailed information about fonts, see Typography.

 

The following is an example of Type C.

 

The Smart Bulletin package provides samples of the three kinds of layout. You can find more detailed information from Sample Resources.

 

Card Layouts

As for providers that use cards, a divider must be added for a newly created card. If necessary, you can add a card removal button in the top right of a card. As for the divider and button layouts, see the following figure and table.

 

 

 

Layouts for card

 

 

Item

Right margin

Top margin

Size

Alignment

Divider

none

None

348x1dp

N/A

X Icon

3dp

3dp

23.5x23.5dp

Right

Main text

Any

Any

Any

Left

Sub text

Any

Any

Any

Left

 

The Smart Bulletin package provides card layout and icon sample files. You can find more detailed information from Sample Resources.

 

For detailed information about fonts, see Typography.

 

Background Images

Create a background image that is the same size as the provider body area. For the color of a background image, choose the same color as the provider's background color, so that the body does not look separate from the other parts.

When a background image contains an icon or a photo, align the icon or the picture so that it is centered and position it 54 dp from the right, as shown below.

 

 

Position of images and icons on provider body

 

 

Item

Size

Alignment

Distance between the image center and the right border

Background Image

Parent width x 175dp

N/A

N/A

Items on background

Any

Center

54dp

 

The Smart Bulletin package provides background image sample files. You can find more detailed information from Sample Resources.

 

Sample Resources

Design sample files are provided to ease your layout design work when you develop a provider. Layout samples and icon samples are contained in the resources/layouts directory of the Smart Bulletin package

 

List of sample resources

File

Description

bg_smartbulletin_example.png

A sample of a background image that contains an icon

ic_smartbulletin_cancel_normal.png

A sample of a card removal icon in normal state

ic_smartbulletin_cancel_pressed.png

A sample of a card removal icon in pressed state

smartbulletin_provider_layout_sample.psd

Samples of the three kinds of layouts and card layouts

- type A: Type A layout

- type B: Type B layout

- type C: Type C layout

- list: layout that contains a card

Typography

This section describes the basic fonts of Smart Bulletin and formatting for each text type.

 

Fonts

You must use the Android fonts Roboto and Noto Sans for Smart Bulletin providers. Use Roboto for English and Noto Sans for Korean.

 

You can download the fonts at the following links:
Roboto http://developer.android.com/design/style/typography.html
Noto Sans https://www.google.co.kr/get/noto/

 

If you change the default font in your device, the new font must be applied to the Smart Bulletin providers as well. However, if you have only changed the font sizes, you do not need to change the font of providers.

 

Sizes

The text in a provider can be divided into two parts, the title and the body text. For more information about the recommended formatting for each text type, see the below figure.

 

Font Styles

 

Detailed Properties of Font Styles

Item

Font

Size

Alignment

Property

Title

Roboto Light

22dp

Left

android:includeFontPadding=”true”

Body text

Roboto Regular

14dp

Left

android:includeFontPadding=”true”

Card main text

Roboto Regular

Any

Left

N/A

Card sub text

Roboto Regular

Any

Left

N/A

 

Except for the text used for the title and body text, you can freely specify the size of any other text that is used for each provider.

 

Colors

The color of text must be the same as the color of the provider's title. For guidance on title colors, see Colors.

As for providers that contain a card, distinguish the card's text from the body by specifying the opacity of the text on the card. The text on a card can be divided into the main text and the sub-text. For more information about the formatting of each text see the below Table.

 

Detailed properties of Card Text

Item

Color

Opacity

Card Main text

Same as the title color

80%

Card Sub text

Same as the title color

50%

Iconography

This section describes the characteristics of the ongoing notification icons that are provided by providers.

The ongoing notification icons are circular images with a size of 17.5 dp x 17.5 dp. If you create an icon with a size of 21.5 dp x 21.5 dp as shown in the following figure, then Smart Bulletin displays the icon after cropping the image in a circular shape based on its center.

 

Icon Size

 

Make sure that the color of a notification icon is the same as the color of the provider's title. In addition, notification icons should be simple, single-color 2D icons, and you should not use patterns or photos.

 

The Smart Bulletin package provides ongoing notification icon samples. The sample files can be found in the resources/icons directory of the package.

 

List of sample icons

File

Description

ic_smartbulletin_healthbadge_example.png

A sample of an ongoing notification for health

ic_smartbulletin_musicbadge_example.png

A sample of an ongoing notification for music

Colors

This section describes the background color and text color of a provider.


Background Colors

We recommend you use one of the colors shown in the following figure for the background color of a provider.



Recommended colors for background


If it is necessary to use a unique color because of the app's nature, use a color with a brightness of 20 or higher and a saturation of 70 or lower.



Guide for using customized background colors


The color of the provider's overall background, the color of the body's background and the color of the card's background must be the same.


Text Colors

The color of the title and the text on the body must harmonize with the background color. If the background color's brightness is less than 90, use white (FFFFFF). If the background color's brightness is 90 or higher, use a color with a brightness of 45 or lower.



Text Colors

Animations

When implementing an animation for a provider, be sure to follow the material design guideline.

For example, the animation that plays when a card is created from a provider is as shown in the following figure.



Card Creation Animation

Dos and Don’ts

This section shows good and bad examples of following the Smart Bulletin style guide.


  • Dos


Good examples of basic provider



Good examples of provider that contain cards


  • Don’ts

A provider's header and body should not be distinguished by the use of colors or a line. The following figure is an incorrect layout, where an outline has been created with a shadow effect applied to the provider body.



Examples of incorrect layouts


A provider's whole area and its body and card should use the same background color. The following figure is an example of color misapplication; on the left one, the body's color is different from the color of the whole area, and on the right one, the card's color is different from the color of the whole area.


Examples of using incorrect colors

Navigation