Providing Feedback

Pressed States

All tappable UI controls should have a pressed state as well as a normal state.

Display the pressed state immediately when the user presses the item to provide feedback to the user that the item has been pressed.

Spinners

Display a spinner if the app performs an action that takes more than 1 second to perform and when it is not possible to make a reasonable guess as to the total duration of the process.

A spinner spins in a loop indefinitely until the process is completed. The spinner informs the user that the app is busy, but gives no overall indication to the user of the overall progress of the process.

Spinners can be embedded within other UI components, such as buttons, notifications, menu items, and list items. Whenever possible, show the spinner embedded in this way so that the user can understand what action is in progress.

Alternatively, when showing more general progress for a view, display a large spinner over the entire content area.

When displaying a spinner inside a button, the button should be in a disabled state while the spinner is displayed.

Progress Indicators

Display a progress indicator when the app knows the approximate time taken to complete an action and the rough progress towards completion of the action. There are several kinds of progress indicators:

Progress Button

Use this when you need to show download progress, loading from a database, or progress during a long operation. The horizontal bar in the button updates as the task progresses. Tap the X to cancel the task.

Progress Bar Item

Use this progress indicator to show progress within a list item. For example, in a list that display songs names, a progress bar item could show the progress of listening to a song.

Progress Bar

Display this control when you need to show the progress of a task (for example, launching or initializing). The progress bar simply shows overall progress. It does not allow the user to cancel the task.

Progress Slider

Commonly used in audio or video apps when the app knows how long the content is. You want to tell users where they are in the playback process, and allow them to control it. The slider thumb moves as the content plays. Drag it to move the playback position or tap anywhere along the slider to reposition it there directly.