{"id":17743,"date":"2017-08-02T10:36:44","date_gmt":"2017-08-02T05:06:44","guid":{"rendered":"https:\/\/blog.resellerclub.com\/?p=17743"},"modified":"2026-05-22T11:30:23","modified_gmt":"2026-05-22T11:30:23","slug":"pagination-7-best-practices-with-examples","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/pagination-7-best-practices-with-examples\/","title":{"rendered":"Pagination: 7 Best Practices with Examples"},"content":{"rendered":"

Pagination is a way to structure content on any medium – by grouping them by a fixed amount of space or number of elements. On websites, Pagination is simply the number of pages you see displayed at the bottom of a web page that serves to separate content for easy consumption. It is often the most overlooked element in design but arguably one of the most important. I say \u2018overlooked\u2019 because many believe the myth that users don\u2019t scroll, making pagination obsolete. Research however, proves otherwise. An <\/span>interesting finding from MOVR<\/span><\/a> suggests that on mobile, half of the users start scrolling within 10 seconds and 90% within 14 seconds. In July 2011, Apple <\/span>removed the scrollbar from Mac OS X<\/span><\/a> (it\u2019s the default setting, though users can put it back). This clearly shows that people are so familiar with scrolling that they don\u2019t even need the visual cue for it.<\/span><\/p>\n

Now that we\u2019ve established that users do in fact scroll to reach the pagination at the bottom, it\u2019s important to design it right. However, before I delve deeper, it\u2019s important to acknowledge that pagination has limited use-cases. It largely depends on the content & context. Google, for example uses pagination because Google wants to give you the best results on the first page and also because thousands of search results can be overwhelming if they\u2019re not page separated or if presented with an infinite scroll. <\/span><\/p>\n

Let\u2019s look at some best practices for designing the pagination:<\/span><\/p>\n

1.Ensure large clickable elements<\/b>: Many designs underestimate the importance of the size of pagination buttons. While this holds true for any call-to-action or button as well, it is especially important in pagination for a smooth user experience. A target that is too small can cause the user to accidentally hit a button to the left or right of the actual target especially on while viewing on mobile. The <\/span>suggested measure<\/span><\/a> is at least 44 points x 44 points to be accurately tapped with a finger on mobile.<\/span><\/p>\n

\"\"<\/p>\n

Source<\/a><\/p>\n

2. Ensure enough spacing between elements<\/b>: Going hand-in-hand with the previous point, spacing between elements ensures the user does not accidentally click on a target he doesn\u2019t intend to.<\/span><\/p>\n

\"\"<\/p>\n

3. Clearly indicate the page the user is currently on<\/b>: To successfully navigate, a user needs to know which page he is on currently. The understanding being, he really isn\u2019t keeping count if he\u2019s on the 3rd page or 5th page. Therefore, there is a need to identify the current page with a styling (not just colour) that\u2019s different from the other pages. Additionally, ensure the current page isn\u2019t linked.<\/span><\/p>\n

\"\"<\/p>\n

4. Numbers vs. Previous – Next: <\/b>Next & Previous links are useful for users if they\u2019re used in addition to pagination. Google uses both with styling that\u2019s different from the number elements and placed far away from the numbers so as to avoid confusion.<\/span><\/p>\n

\"\"<\/p>\n

5. Avoid First & Last Links or double arrows<\/b>: First & Last links on the other hand create confusion. They\u2019re indicated by double arrows which can be mistaken for single arrows. <\/span>The practical value in adding double arrows is that it enables the user to directly jump to the first or the last page with a single click in the case where he knows where the content he is looking for lies. Even so, the double arrows aren\u2019t the best option. An alternative to the double arrows is the \u2018…\u2019 with the first\/last page number visible no matter which page the user is on.<\/span><\/p>\n

\"\"<\/p>\n

6. Keep mobile in mind<\/b>: A good design is one that\u2019s responsive. Ensure you optimize for mobile, tablet and different screen sizes. This however does not mean merely aligning the page with the device screen size. It requires a little more intuition than that. While on a desktop, it is wise to provide a list of pages, for mobile, only the essential elements should be displayed. The essential being the current page number, First Page, Previous Page & Next.<\/span><\/p>\n

\"\"<\/p>\n

7. Should you provide manual input?<\/b> Manual input is where users can directly input into a blank field the page number they would like to see. This can eliminate the frustration of hitting \u2018Next\u2019 or \u2018Previous\u2019 which allows you to browse only one page at a time especially if you do know the page you want to head to. You could then use both to enhance user experience.<\/span><\/p>\n

\"\"<\/p>\n

Conclusion<\/b><\/span><\/p>\n

It can be tricky getting pagination right but if your pagination design serves the primary purpose of improving navigation, you\u2019re doing fine. It\u2019s important to note that pagination is not really intuitive so over designing by adding too many elements or even using multiple colours can confuse the user. Stick to simple navigation for smooth user experience.<\/span><\/p>\n

In the more recent years, alternatives like menus, navigation bars & categories haves reduced the phenomenon of numbered pages however, it still is relevant in specific use cases- for search results, for blog sites & possibly product sites (like Amazon). Google\u2019s Gmail inbox uses a variation of pagination by displaying range of items.<\/span><\/p>\n

 <\/p>\n

Reseller Club Hosting Services<\/h2>\n

Reseller Hosting<\/a> | Windows Reseller Hosting<\/a> | Cloud Hosting<\/a> | VPS Hosting<\/a> | Managed VPS Hosting<\/a> | Dedicated Server Hosting<\/a> | Windows Dedicated Server<\/a> | Managed Dedicated Server<\/a> | Linux Shared Hosting<\/a> | Windows Shared Hosting<\/a><\/p>\n

\n\t\t\t
\n\t\t\t <\/div><\/div>\n\t\t