Page Control

Page controls are used for navigating between multiple pages or sections within a carousel or paginated view. They typically display a series of dots or indicators representing the number of pages.

Overview

Page controls enable quick navigation between sequential sections or views in paginated or carousel interfaces. They serve as a visual indicator, showing the number of pages and the current active one.

When to use

• Page controls are often used in mobile or tablet interfaces to allow swipe-based navigation between views.

• Use page controls to allow users to navigate between pages in a multi-page carousel or content section.

• Ideal when users need to view multiple sections of content without scrolling, such as image galleries.

• For onboarding flows or multi-step wizards, page controls can visually track user progress.

• When space is limited, page controls provide a compact solution for navigating content.

When not to use

• Do not use page controls if the number of pages exceeds a reasonable limit (more than 10), as they can become cluttered.

• If each page requires detailed contextual information, use a different form of navigation to provide more clarity.

• If the content doesn't require user interaction or page switching, page controls may not be necessary.

• If you have enough space for more detailed navigation elements, such as a tab bar or buttons, page controls may not be the best choice.

Types

Anatomy

1. Active Dot: The current page or section is indicated by a highlighted dot, differently colored for emphasis.

2. Inactive Dot: Represents the other available pages or sections, dimmed to distinguish from the active page.

3. Container: The outer structure that holds all the page control indicators.

Styles

States

Size

Size	Dot (px)	Container Height (px)
Default	8	24
Large	10	34

Accessibility

• Keyboard Navigation: Ensure that users can navigate between pages using keyboard input, such as arrow keys or tabbing through the indicators.

• Screen Reader Support: Each page control indicator should be labeled for screen readers, indicating the current page and the total number of pages.

• Responsive Design: The page control should adapt to different screen sizes to maintain clear visibility on both desktop and mobile devices.

• High Contrast for Visibility: Ensure that active and inactive dots have enough contrast for easy differentiation by users with visual impairments.

• Size and Spacing: Make sure the dots are large enough to tap or click comfortably, with appropriate spacing for touch devices.

Example

• Image Carousel: For a product gallery, page controls can be used to switch between different product images.

• Onboarding Flow: In a step-by-step onboarding process, page controls can represent the user’s progress through the steps.

• Mobile App Sliders: Page controls are often used in mobile app sliders for users to swipe between different content sections.

• Tutorial Screens: In an app tutorial, use page controls to guide users through the various instructional slides.