Nets Design logo and other specific symbols

Page controls

A page control shows the position of the current page in a flat list of pages. It appears as a series of small indicator dots, representing the available pages in the order they were opened. A solid dot denotes the current page.

Guidelines

The page control dots are always equidistant, and are clipped if too many appear onscreen. Users can tap the leading or trailing edge of a page control to visit the next or previous page, but they can't tap a specific dot to go to a specific page. Navigation always occurs sequentially, usually by swiping the page to one side. Follow the below guidelines to help ensure the usability of the page controls in your app:

  1. Labels need to be short and concise, so ensuring the users can clearly unerstand the message.
  2. Labels can include plain or styled text. If you adjust the style of a label or use custom fonts, be sure to not sacrifice legibility.
  3. It’s best to adopt Dynamic Type so your labels still look good when a user changes text size on their device. See Dynamic Type.
  4. You should also test your labels with accessibility options enabled, such as bold text.
Nets page control image
Example of a page control on dark background
Nets page control image
Example of a page control on light background