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)

 

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

 

  • 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.

Navigation