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
Active Dot: The current page or section is indicated by a highlighted dot, differently colored for emphasis.
Inactive Dot: Represents the other available pages or sections, dimmed to distinguish from the active page.
Container: The outer structure that holds all the page control indicators.
Styles
States
Size
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.
Last updated