Pagination Examples: The Best Ones and What Makes Them Good

pagination examples: screen with codes

When looking at a website, the means of navigating the site and viewing the products can make the difference as to whether a visitor stays on the site, purchases an item, or even whether he or she comes back again. Check out these pagination examples for some ideas of how to improve your site.

What Are the Best Examples of Website Pagination, and What Makes Them Good?

Anyone who has ever used a website to shop, to get information or for many other uses will understand how frustrating it is when you want to go to another page and either cannot find the pagination or it functions clumsily or ineffectively. Many times, a pagination system that is not user friendly will cause a person to leave the website in frustration because of the difficulty of use.

We don’t care much for navigation sites that have no pagination, but choose instead to use eternal scrolling, betting on people's FOMO (fear of missing out.) Pinterest, Ebay and MOMA (Museum of Modern Art) use this type of system, which makes it hard to re-visit an item without scrolling through it all in reverse. There is some thought among marketing professionals that this method of non-stop scrolling keeps you on the page and more likely to make a purchase. People with FOMO tendencies will scroll endlessly until they are sure they have seen it all and that by having done so, they will make a better choice. Some people may subscribe to this method of shopping, but without a “save this item” or place saver feature, it is very difficult to find an item again. You can get around this by actually placing an item in your cart so that you have easy access and then edit the cart prior to purchase, or empty the cart if you change your mind.

What Our Ratings Are Based On

We will look at some of the best examples of pagination to see what works and keeps visitors on a site. Before we talk about those, it is important to understand the functions of pagination. They are to assist visitors in navigating your site, to allow a visitor to find and revisit a page that is of interest to them, to give your site a sense of organization and order, and to give a visual frame of reference for an item of interest – rather like a bookmark.

Don’t let this element of your website become an afterthought for which you must reconstruct your site to employ. Start with a good pagination system and build your site around it. Several factors may affect your pagination, so your system needs to be flexible.

For instance, search criteria may change not only the order something appears in but also the number of pages themselves may change. That is to say that for instance, if someone is shopping for dresses and selects the “See All” option, they may find an $83 red ankle length dress they like on page 17 of 24. If they search by price and select “lowest to highest,” that blue dress may be on page 3 of 24.  If they should select search by length, and select “ankle length,” the same dress may show up on page 6 of 9. Your pagination system needs to be flexible enough to work well with any scenario, so the consumer need not start over with looking each time. That is a good way to lose a potential customer.

We do like sites that also have pagination at the top of the page so you don’t have to scroll to the bottom every time you want to advance the page. We favor sites that allow you to type in the number of the page you want to visit, those that have a larger number of clickable pages to select from and those that let the visitor choose how many items he or she wants to view on each page. Most people would much rather view 10 pages of 50 choices each than 50 pages with 10 items each.

Our Top 10 Picks

Pixabay (2.5 stars)

Pixabay is a great site for people in many walks of life who want quality photography for free. We love the service, but the pagination is awkward. We are attempting to show good pagination examples, but it is important to illustrate why these others work so well and this example by contrast may help drive the point home. Pixabay uses a minimalist approach to its pagination. You simply have a right arrow and a left arrow, each inside a light blue square at the bottom of the page. You can go one page at a time in either direction, or use the “Next” button above the arrows. The disadvantages are that you have no idea how many results were found or how many pages you will need to scroll through in order to see all of your options. If you see an image you like but want to see what your alternatives are, you have no way to go back to that page without going through every single one. Now let’s move on to another great example of good pagination.

Google (3 stars)

So what types of pagination are there, and which are the best pagination examples? Look at one you probably use several times a day and don’t even think about it because it works so well. Go to Google.com and type in the word “steakhouse.” Your results page will show first of all, the number of results that came back for that query. In this author’s case, there were 79,100,000 results. Look at the pagination at the bottom of the page. You will see the word <Goooooooooogle> with 10 zeroes, each of which has a numerical page number directly below it. The page you are currently on is indicated by the “o” being turned red, as compared to the remainder, which are yellow. You will also notice that there is a left arrow and a right arrow to that you can go to back a previous page or forward to the next page.

When narrowing the search by typing “wild game steakhouse” in the search bar, the number was reduced to 6,090,000 results. The pagination appears the same as in the first example, only now the number of pages would be greatly reduced. Further narrowing by general location, “wild game steakhouse Oregon” the number is reduced again to 1,080,000 results. Still 10 zeroes in the word, “Google,” and it still shows 10 pages. Now when really drilling down to “wild game steak house Depoe Bay Oregon,” what happens to our pagination? It has disappeared from the page, as there are only seven results, which are all visible on page one.

To summarize, Google makes its pagination easy on its users in a two ways; clear indication as to which page you are visiting, and right and left arrows to aid in moving to previous or next pages.

Land’s End (4 stars)

This site employs a basic but clean pagination system. All in one line, we see that we are looking at items 42 of 113, that there are 24 items per page being shown. Next, we see a row of boxes with the page numbers, the one being visited is in a black box and the other choices are in white. There are arrows at each end of the numerical row. There are also double arrows, which allow you to go either to the first or last page.

Amazon (4 stars)

Let’s visit another site with good pagination that you probably use routinely. To see an example of it yourself, type in Amazon.com and type in “ankle length blue dress” and click on “All Departments” to see what you get there. We got 1-48 of over 2000 results. Now check out the pagination. Amazon handles its pagination just a bit differently. Whereas with Google, you can click on page 10, then the right arrow to get the next 10 result pages, Amazon gives you pages one, two, and three followed by an ellipsis – indicating there are more pages – and for this search, the number seven – indicating there are seven pages of results. On Amazon you could click on page 3, followed by “next,” which will only get you one more page at a time. Amazon also indicates what page you are on. The page number shows as bolded black text, as opposed to regular blue text for unselected pages. As with Google, Amazon has left and right arrows with the addition of the words “Previous Page” and “Next Page.” We also like the option to view the items in grid or list format.

Wayfair (4 stars)

A visitor on Wayfair is allowed to select from 24, 48 or 96 items per page. The pagination itself is at the bottom center of the page. The previous and next arrows at each end are boxed and change color according to their availability. For instance when you are on page one, the “previous” arrow is black, obviously indicating it cannot be used, however the “next” arrow is blue, inviting a visitor to explore the possibilities that lie in that direction. The page numbers themselves are well spaced to minimize accidentally clicking on the wrong number.

The Strange Attractor (4 stars)

The Strange Attractor uses a row of well-spaced page numbers. The current page is in a box to show what is selected. There is a progress slider below the buttons with an indicator mark so that you can see how much progress you have made as you make your way through the pages. The overall look is a fun digression from the average but lacks the addition of the previous and next indicators.

Giant Bomb (4 stars)

Look at the model called Giant Bomb. This model is easy on the eyes and very user friendly. The page numbers are contained in their own individual boxes, which appear to be protruding from the page. The selected page looks as if it has been pushed in. There are also buttons for previous and next arrows. The grey color would look well on most sites.

Overstock (4.5 stars)

Overstock uses a unique system. At first glance, the pagination looks similar to many others we have discussed. You have the standard <previous and next> arrows with the page selection in the center. It reads Page 1 of 84 (or applicable number) so you know right away what page you are on (bolded) and how many pages there are for your search results. Here is where it gets interesting. Just to the right of the last page number there is a down arrow, or carat, which when clicked opens a pop-up menu of every page number. The page you are on has a check mark next to it and there is a scroll bar on the right side of the menu that allows you to scroll through all the pages to find the page you are looking for. And though it is not actually part of the pagination, we like the back to top button so you don’t have to scroll back up.

K-Mart (4.5 stars)

This discount chain store has a better pagination system than some of the upper-crust shops. In straightforward fashion, it will tell you it is displaying 1-50 of 237 items (or applicable numbers) and a simple box tells you the page you are on. In all-caps it states NEXT or PREVIOUS so you clearly know which to tap. However, in similar fashion to Overstock, on the current page box there is a carat which, when clicked, opens  a drop-down menu listing each page in the lineup and a convenient scroll bar so that a visitor can scroll to the desired page quickly and select it.

Winestore (5 stars)

Also check out the Winestore model on this site. In this pagination system, you find the page numbers listed as “Page 2 of 17.” It appears that the only way to change the page is by using the previous and next buttons, which are highlighted with red. However, off to the side you will find a "Go to page:" and a box to type in the number of the page you want to visit, followed by a “Go” button. This comes in very handy if you found an item you want to see again and can simply type in the page number rather than flipping through one page at a time.

Now you have seen a few of the best pagination examples and can understand how different systems can affect the navigation of a website. If you are interested in learning more about any of the pagination examples, you might visit one of these sites for information on how to build or purchase the modules: https://dcrazed.net/pagination-css3-templates/  or https://www.crazyleafdesign.com/blog/beautiful-pagination/