pagination Design in Web pages

Source: Internet
Author: User

Talk about the current three kinds of classified display information methods:

General page-Flipping information scrolling scroll bar

The former is a horizontal page, the latter two are longitudinal information page. Paging as a small component, most sites will not spend much effort to design, the design is similar, the user has used the habit of learning costs 0, but if you can do in detail more intimate, user experience will be improved.

First, look at the regular page

1) Composition structure

• Prev + page + next page

• Jump to __ page/__ page ";

• Confirm "button;

• Support keyboard operation;

2) Use Scenario

When the content of the Web page is more, it cannot be displayed completely in the limited area;

In order to facilitate users to jump between multiple pages and quick positioning (especially in order to page), through the page design to provide multiple pages of navigation.

In the electric Dealer website Level 3 page, the search results page and so on information big page is very important.

• What type of paging content?

• How many pages are there?

• What are the most viewed pages?

• The chance to flip all of them manually

• Will the page be not in order, and why?

• Will you view the flipped pages?

• Does paging appear at the top and bottom of the list?

• Does the "last page" have to be a must?

• What is the page at the top of the list?

According to the user's mental model, browsing the contents of the mailbox is repeated browsing type, and the page is longer, at this time need to add a page at the top, but the Electronic Business site search results page and Sina Weibo users are browsing to the bottom of the page will have a paging action, so do not have to put the pages on the top.

• Can I display the content of the page mouseover? When can I?

Consider the above problems before design, and choose the design according to the situation.

3) Interactive Analysis

Google page

Search results provide only 10 page numbers for the first time;

Design conjecture: Google developers think that the average user can find what they want in these 10 pages.

Click on any page to continue browsing, found that the following page number is: Current page +9;

Design conjecture: When the user clicks on the page number, Google developers think the first 10 pages of content can not meet the user, so the search scope to enlarge.

But a maximum of 20 page numbers are provided;

Design conjecture: However, given the width of the page or the inability to continue to increase the number of pages unlimited, set up to provide 20 page numbers at a time.

Baidu Page

Always have the first "1" page, in the middle with "..." to indicate the page number not displayed;

Design conjecture: When the user turns to the back page number also can not find the content, will return the first page to look again, at this time the "1" page is the role of home.

The selected page number and MouseOver page number style always stays in one position, do not need to move the mouse to click the next page, then the page number automatically replaces the state;

Design conjecture: It is more difficult to aim at the page number, which can reduce the number of users aiming at the position. But did not do the perfect, the user each refresh one page, still want to scroll the browser bar to aim at the page position. This small, friendly interaction can be applied to the wheel-map design to reduce mouse-pointing operations.

But it also provides a maximum of 20 pages;

Sina Micro-BO Small page

The combination of scrolling page and page;

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.