Home > Devices > Fire Phone

Dynamic Perspective Controls

Button

Class

com.amazon.euclid.widget.ZButton

Definition

Buttons use a text label and/or image to present the user with a call to action. Choose text or images that clearly communicate what happens when the button is pressed.

Usage Guidelines

Do not use buttons to denote state. To choose between two states, use a switch or toggle button.

Input/Interaction Overview

Tap to select.

button

Check Box

Class

com.amazon.euclid.widget.ZCheckBox

Definition

Check boxes allow users to select one or more options from a set.

Usage Guidelines

Do not use a single check box to choose between two states. Instead, use a switch or toggle button.

Input/Interaction Overview

Tap to select.

check box

Header Bar

Class

com.amazon.euclid.widget.ZHeaderNavigationBar

Definition

The header bar provides a container for the screen's title and up to two action buttons. If up navigation is enabled, a left-pointing arrow appears to the left of the title and tapping on the title or the arrow takes the user up one level in the app's navigation hierarchy.

Usage Guidelines

Do not use the header bar for notifications or status.

Input/Interaction Overview

  • Tap to select.
  • Peek to reveal labels.
header bar

Media Controller

Class

com.amazon.euclid.widget.ZMediaController

Definition

The media controller is a compound control used to play media. It consists of a mini player, a seek bar, and up to two optional secondary buttons. The layout of the controls can be configured using three different built-in presets, two for portrait and one for landscape.

Usage Guidelines

Do not use a media controller in cases where a play/pause button is not needed.

Input/Interaction Overview

  • Tap play/pause button to toggle between playing and pausing the media.
  • Tap secondary button to perform associated action.
  • Drag thumb to adjust playback position.
media controller

Progress Bars

Class

com.amazon.euclid.widget.ZProgressBar

Definition

A progress bar is a visual indication of the progress of an operation. There are two types of progress bars: determinate and indeterminate.

Determinate progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.

Indeterminate progress bars are for situations when the current value is unknown or when the current progress cannot be presented as a percentage.

Usage Guidelines

Do not use a determinate progress bar when the progress is indeterminate.

Do not use an indeterminate progress bar when the progress is determinate.

Input/Interaction Overview

The progress bar is not interactive.

determinate progress bar
Determinate progress bar
indeterminate progress bar
Indeterminate progress bar

Radio Button

Class

com.amazon.euclid.widget.ZRadioButton

Definition

Radio buttons allow users to select one option from a set.

Usage Guidelines

Use radio buttons when you need to display all available options at once, such as when one or more of the choices is unfamiliar to the user. If users are familiar with all available options in the set, consider using a spinner to save space.

If users need to select more than one item from the set, use check boxes instead.

Input/Interaction Overview

Tap to select.

radio button

Seek Bar

Class

com.amazon.euclid.widget.ZSeekBar

Definition

A seek bar is a determinate progress bar with a draggable thumb. You can use a seek bar as a control for selecting a value out of a range of values, from zero to a configurable maximum.

Usage Guidelines

Do not use a seek bar as a control over a range of values when the number of options is less than 10.

Input/Interaction Overview

  • Drag the thumb horizontally to increment or decrement the selected value.
  • Tap to set a new value (if tapToSeek is true).
seek bar

Switch

Class

com.amazon.euclid.widget.ZSwitch

Definition

Switches toggle the state of a single option.

Usage Guidelines

Do not use a switch when there are more than two states.

Input/Interaction Overview

Tap to change state.

switch

Tab Bar and Tool Bar

Class

com.amazon.euclid.widget.ZTabBar
com.amazon.euclid.widget.ZToolBar

Definition

Tab bars and tool bars are containers for a finite set of navigation tabs or action buttons.

Tab bars hold navigation tabs. Navigation tabs allow users to switch between functional views within an app. For example, the phone app has tabs that allow users to switch between screens showing recent calls, contacts, the keypad, and voicemail. Once selected, a navigation tab maintains its selected state until another navigation tab is selected.

Tool bars hold action buttons. When tapped, an action button can perform an action, display a pop-up menu, or both.

Usage Guidelines

When more than four navigation tabs are necessary, use the left navigation pane instead of a tab bar.

If your app uses more than four action buttons in portrait, or six in landscape, all additional buttons are placed in an overflow menu.

Input/Interaction Overview

Tap to select.

tab bar
Tab bar
tool bar
Tool bar

Return to UX Guidelines