Menu
Pagination is a component that controls pages. It is used when showing multiple pages in a limited space. Unlike tabs or filters that change the context of the information being viewed, pagination is used when showing multiple pieces of information in the same context.
For example, you can think of an image rolling banner that introduces various promotions, or when searching for 'red clothes under 30,000 won', only 12 products can be shown on one page, so more products are shown on pages 2 and 3. Different forms of pagination are used depending on mobile and desktop.
This is the most common component used when controlling pages. It is a familiar form used in many services. It uses less visual techniques, so the cognitive load is low. Its simple form makes it suitable for use in any environment.
This is a component that is often used when navigating a large number of pages on a website. It is useful in situations where the user moves between multiple pages and needs to remember a specific page. It requires a lot of space because there are many elements to display and a lot of margin for minimal manipulation.
It is located below or above the object element that it controls. It is expressed so that it is easy to find but not too noticeable. When placed at the bottom of an element, it is usually expressed in black, and when used on an image element, it is expressed in white. It is common to use the same color as the surface to make it transparent to distinguish between the active and inactive states. When there are many elements, it is also used to fill the background color to easily identify the control elements. It is placed flexibly depending on the target that it controls. When the quantity is too large to be expressed as a dot, it is also used with an element that indicates the number.
On larger screens, users may not be aware that they can move the slider left and right, so left and right buttons are sometimes placed.
Control pages with numbers and buttons. Usually located under tables or card lists. Expressed as text with numbers in a separate space. 'Previous' and 'Next' buttons for moving between one or more pages are expressed as text or icons.
When navigating through multiple pages, there are times when you need shortcuts to go to the first and last pages. That's why they are placed before and after the previous/next. Furthermore, they can be expressed intuitively and concisely with minimal elements such as icons and numbers.
When users navigate with page indicators, they are informed that there are more elements ahead or behind them. The information is conveyed by the fading of successive elements. This is expressed through size rather than gradients or transparency.
When adding an interaction that automatically advances to the next page, we add a play bar to indicate how much time is left. Unlike dots, we display it as a bar that shows the remaining time and the current time.
In the page control, you should design it to fit the cases of viewing the first page, the middle page, and the last page. In case the number of digits increases, fix the width by setting the maximum number of digits, or design it responsively so that the width increases according to the number of digits.
Every Tuesday morning, a designer with 16 years of experience curated Collect design trends.
