Updated: September 28, 2017

Page Controls

Intro

A page control displays the number of open pages in a flat collection of similar or relatable views.

Page controls are shown as dots that represent the total number of views in order, with the prominent dot denoting the current page.

A page control can be useful to show users how many pages are available. It does not allow users to directly navigate to a specific page — they must rather navigate one-by-one.

Usage

Use page control when the content being displayed in multiple views are related or similar.

Do not use a page control as the main navigation paradigm for an app.

Do not include more than 10 pages at once. Presenting too many pages at a time makes it difficult for users to keep track of their current position. It also becomes time-consuming to navigate between too many pages.

Compact & Regular

Page indicators support both regular and compact widths.

In regular width,  page indicators are only used in the content area. In compact width, page indicators can be used in either the header or the content area. When used in the header, there can be a maximum of three pages.

See more information on Object Headers.

Structure

Page Controls must sit within its content container.

A. Container

The container is what holds the various related pages. When used in the header, the header defines the size of the container.

When used in the content section, the page content decides the size of the container. The container will remain constant for all pages.

B. Page Control

Page control should be centered and positioned below the content. This keeps it visible without blocking the content.

Behavior & Interaction

Swipe gesture

Users can navigate between pages by swiping the page control container to the left or right. Ensure that the swipe area covers the entire Page control container.

Tap Gesture

Use the tap gesture for further navigation to the details of the content. The entire page control container must act as the touch target to navigate. Provide hints to the user to communicate availability of further navigation.