Recommend 60 kinds of pagination cases and good practice

Source: Internet
Author: User

Structures and hierarchies reduce complexity and improve readability. The deeper your article or site is organized, the easier it is for users to understand your point of view and get the message you want to convey. On the web, this is done in several ways.

Text headlines and enumerations are used as logically separate blocks of data to render information. Another workaround is a mechanism called paging, which provides users with additional navigational options for browsing in a single part of a given article. These areas of the article include numbers, hints, and arrows in addition to the previous page (previous) and next page (next) buttons.

Search engines almost always use pagination, and newspapers often use it to navigate large articles that have several parts. There are also cases where paging is required for blogs (weblog). Additional navigation simplifies access to some site pages, such as making it easy for users to browse through the site's archive.

In most cases, pagination is superior to the traditional "previous page, next page" navigation, which provides visitors with faster and more convenient navigation through the site. It is not necessary, but a useful good feature.

Let's look at some examples of good pagination practices, when and how to perform pagination.

Good practice for pagination design (from 7 aspects of Faruk Ates)
Provides a large area of clickable area
Do not use the underline
Indicate the current page
Separate page links
Provides a link to the previous page and the next page
Use the first and last links (where applicable)
Put the home page and the last page outside
Related reference
Pagination 101,faruk Ates has completed the final version of pagination.
Some Styles for Your pagination, you can download randomly applicable paging styles.
If your blog is based on WordPress, you can install the plugin Wp-pagenavi to generate pagination. It is very easy to install, but requires you to modify some of your source code with the theme.
Error #: Paging option not visible
Because the main purpose of paging is to act as an improved navigation, it must let visitors know where they are, where they have gone and where they can go next. The three facts give the user a complete understanding of how the system works and how this navigation should be used.

But most importantly, the navigation options should be visible. Hugg.com not follow this policy. The link color and white background contrast are very low. No mouse hover effect provided.

Error: Pagination is not intuitive
If you have to choose between a fairly complex (but beautiful) navigation and a simple navigation that includes the necessary functionality, it always tends to be easy. If users do not understand the mechanism behind pagination, they will not be able to use it, so they will not use your site.

Helium.com is a good example of this error. Take a look at the screenshot below: What do these arrows represent? On behalf of the page you visited or on behalf of the page you are visiting? Why does this link to the second page have a white background? Why do the arrows have different colors? This is not intuitive.

The lack of intuitive design stems from structural, hierarchical and thoughtful design decisions. Blank navigation is as intuitive as an overcrowded scheme.

No interval of web links difficult to scan and browse. Make-believe.org is an example of this, and its design is not intuitive.




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.