by anthony on 02/06/13 at 5:06 pm
Everyone has scrolled to the bottom of a web page before and seen that row of numbers. That row of numbers is a website’s pagination. Pagination is a user interface pattern that divides content into different pages. It’s important to have one on your site to prevent your pages from becoming too long and overwhelming. But the way paginations are designed today are painful for users to use. It’s time to turn the page on painful pagination.
Stop Making Your Pages So Short
A web page is not like a book. The size of a book limits how much content can fill a page, but a web page has infinite height and can hold or load as much content as the website can handle. The only drawback to putting too much content on a page is that it can make the site load slower. However, most sites have enough bandwidth to support showing more content per page without compromising the loading time. The problem is that most sites show users very little content with short pages. By making your pages longer without compromising loading speed, users will get more content per page and won’t have to click the pagination as much. They’ll be able to easily scroll to see more content faster.
Users have better experiences with scrolling than clicking. The mouse wheels, touchpads and touchscreens of today make scrolling faster and easier than clicking. To get to the next page in a pagination, the user has to find the link target, hover the mouse over it, click it and wait for the new page to load. That’s a lot of work when you break it all down. Imagine the user having to do that over and over because of short pages. To scroll, all the user has to do is flick their finger on the mouse wheel, touchpad or touchscreen. There is no wait time and new content comes to them with minimal effort. Stop making your pages so short and allow users to scroll for more content instead of clicking.
A clever way to measure if your pages are too short is to look at the height of your scrollbar. A short page will have a tall scrollbar. A longer page will have a short scrollbar. You don’t want to have a scrollbar that’s too tall or short, but something that’s in-between. This balance will offer users more content without slowing down page loads.
Offer Content Filters to Users
Some paginations can have so many pages that the page numbers start to reach triple digits. No user will ever sit and browse from page 1 to 100. This is why you should never display your content as a giant, endless archive. Instead, offer your users different content filters that organize and display the archive by specific categories or attributes. This allows users to only see content that matters to them without getting overwhelmed.
Make Your Click Targets Bigger
Many sites underestimate how important the size of pagination click targets are. That click target is the user’s only means of getting to the next page. Make the target big and easy to see so that users will want to keep going to the next page. This means turning your “next” and “previous” links into larger links or buttons. With a larger click target, users will be able to spot and hit it faster and easier.
Don’t Use First and Last Links
Some paginations have first and last links that allow users to skip to the first or last page. This is unnecessary and ususally confuses users. Sometimes the first and last links are displayed using double arrowheads, which users will often mistakenly click thinking it’s the single arrowhead link that takes them to the next page. Labeling the links “first” and “last” also causes clicking errors because of its proximity to the “next” and “previous” link.
The first and last link is not necessary because most users prefer to look at content chronologically. There’s no reason for them to start from the last page unless they’re trying to find content from the past that they’ve already seen before. For those cases, you should have a search field in your navigation for that.
However, there is utility in giving users the option to go back to the first page. The first page often has the most relevant and recent content. After paginating the user might want to go back to the first page without having to click the “previous” link over and over. You should display the first page link as the number one with an ellipsis, such as “1…”. This way it won’t visually interfere with the “next” and “previous” links.
When to Display Page Numbers
It’s not necessary to always show a row of page numbers in your pagination. If your pagination has a lot of pages in the high double digits or above, it’s not helpful for users to see how many total pages there are because they won’t be able to get through them all. However, if your pagination has only a few pages in the low double digits or below, showing the pages in your pagination can encourage users to browse to the end. You should display page numbers when the amount of pages are small, but go with a simple next and previous button when the they are enormous.
There is one exception to this rule. When dealing with eCommerce sites, it’s better to show the page numbers in your pagination so that users can refer back to a specific page to look at products they’re considering to buy. Page numbering also allows users to shop for products more throughly because it shows them which pages they’ve viewed, and where they are in their viewing progress. Not only that, but when users need to bookmark a page, it saves it with descriptive title tags of the page number and product category so that they can pick up where they left off without forgetting what they were shopping for.
When to Use Infinite Scrolling
There are only a few instances where infinite scrolling is effective. When your content opens in a new tab or modal window, infinite scrolling is a useful technique. But if your content opens on the same page, infinite scrolling can frustrate users. When the user clicks to go back, they’ll lose their place and progress in the content stream and will have to scroll from the top of the page again. Opening content in a new tab or modal window allows users to keep their place and progress and continue scrolling without restarting or refreshing the page. An example of infinite scrolling opening content in modal windows is Pinterest. An example of infinite scrolling opening content in new tabs is Inbound.
Another issue with infinite scrolling is that when users get to a certain point in the stream, they can’t bookmark where they are and come back to it later. If they leave the site, they’ll lose all their progress and will have to scroll endlessly down the page to get back to the same spot. This is why infinite scrolling is bad for eCommerce sites. When users shop online, they want to be able to come back to the place they left off and continue their shopping. They also want to be able to save a page of products they’re comparing. Infinite scrolling is effective only when it’s used in the right context.
Paginating with Keyboard Arrows
Not many sites are taking advantage of arrow key pagination yet. This unique technique gives users the freedom to paginate without clicking the pagination. A simple press of the right arrow key takes them to the next page while the left arrow takes them back a page. However, users won’t know this feature is available unless you make note of it on your site. An example of this technique in use is Dribbble.
Avoid the Pains of Pagination
The pains of pagination run deep. For most users, a hard to use pagination is what stops them from continuing to browse a website. If the deeper pages of your site aren’t seeing the light of day, you could have a pagination problem. There are a lot of bad paginations on the web today. Do your part to stop bad pagination by making sure the pains of pagination aren’t found on your site.