TV building blocks

This article provides guidance on the main Firefox OS building blocks relevant to Firefox OS for TV, including characteristics and behaviour.

Buttons

Buttons perform actions when tapped or clicked by the user. Firefox OS provides a variety of button styles to fullfill different usages and contexts. A button could be composed of an image, text, or both.

General characteristics

• Buttons have two components: a visual target and a hit target. The visual target is the button that can be seen by users on the screen. The hit target is an invisible area that responds to the tap. To minimize tapping errors, the hit target is typically larger than the visual one.
• Buttons have four states: normal, selected, pressed, and disabled.
• Disabled buttons are buttons that do not respond to a click. Disabled buttons are dimmed.

Action Button

Action buttons can be used for two purposes : (type A) a few action buttons in a dialog box that cause certain actions to happen; (type B) a list of actions, related to the app's content, from which the user may make a selection.

• Action buttons are used for system level only, such as a confirmation prompt or an Object menu (contextual menu) in a dialog box.
• A primary action button uses a special highlight color to improve visibility and to simplify the choice for users. Buttons that have potentially negative consequences, such as deleting an item, are highlighted in red.

Action button type A in normal, selected, and pressed states:

Animation of action buttons in confirm dialogs:

Action button type B in normal, selected, and pressed states:

Animation of action buttons in object menu dialogs:

Special Button

Special buttons are buttons via which users may make an action inside an app. They have many styles designed for the app level. The following guide is for the most common buttons in Firefox OS TVs. Depending on the content needs, the style of each button can be adjusted to fit brand needs.

• Special buttons are used for apps only.
• A button could be image-only, text-only, image with background, text with background, or both image and text with background.
• Text is centered on the button.

Special buttons in in normal, selected, pressed, and disabled states:

Special buttons in motion:

Expand Button

Expand buttons can be used for two purposes: data filtering, in which users can view a single set of data in different ways; and a single set containing two or more buttons.

• Expand buttons are presented as a horizontal expanding group buttons.
• Only one button is focused at a time.
• Left, middle, and right buttons can be styled uniquely.
• Expand buttons’ widths vary depending on the number of buttons in a single set.
• You must provide at least two and no more than five items in a set.
• Each button appearing in a single set should be in text format only, without any icon.

Expand button in normal, selected, and pressed states:

Expand button in motion:

List

Lists are used to display a set of consecutive items, such as a list of contacts or messages.

• List items may vary in height (from one to three rows in a single item).
• List items may be as simple as just a string, up to including images, text, and buttons.
• Lists are comprised of rows, with optional section headers.
• Lists have four states: normal, selected, pressed and disabled.

Example of lists in settings:

Example of lists in drop-down menu:

Lists with switches in motion:

Dialogs

Dialogs prompt users for decisions or additional information required by the app to continue a task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking users to adjust settings or enter text.

Confirm

A confirmation prompt is used to confirm an action or inform users of an event. It's also frequently used to confirm tasks that cannot be undone (such as permanently deleting an item). Generally, a confirmation prompt is designed to disrupt tasks and, as a result, should be used sparingly.

• Confirmation prompts are currently modal — they occupy the entire screen and require user input to close them.
• Confirmation prompts consist of title, body text, list item, input field area, and action buttons.

Example of a confirmation prompt dialog:

Animation of confirmation prompt dialog:

Object Menu

An object menu (contextual menu) presents a list of actions related to the app's context, from which the user may make a selection.

• An object menu contains one or more items.
• The menu expands in width to accommodate its items, to a maximum of the screen’s width. Once that maximum width is reached, the content becomes selectable horizontally. Generally, the best practice is to try to include no more than five items plus a menu title.
• The title string is required.
• The menu is closed by:
  • Selecting one of the actions.
  • Clicking the “Return / back” button on the TV remote.

Example of a object menu dialog:

Animation of object menu dialog:

Notification

A notification provides lightweight feedback about an operation in a small popup. For example, your TV could display a “missed call” notification from a connecting phone or a notification of your favourite upcoming episode. Notifications automatically disappear after a specified time has elapsed.

• A notification can only show one message at a time, which depends on item priority.
• A notification consists of text, icons and buttons.
• The text area of a notification may vary in width, but still has a maximum width.
• A notification should be located at the bottom of the screen, but the alignment can be customized to right, left, or center.
• The color of the notification can be customized to fit any branding needs. Legibility of content is the highest priority.

Example of different types of notification:

Notification in motion: