Interaction Detail Analysis - Pagination

Vonnie?|?2012-02-04?| Interaction Design

Tell us about the three commonly used methods of displaying information in categories:

Regular paging? Information scrolling paging Scrolling bar

The former is a horizontal paging method, the latter two are vertical information paging. Paging as a very small component, most sites will not spend much effort to design, the design is also similar, users have already used the habit of learning cost 0, but if you can do in the details of the more careful and attentive, the user experience will be improved.

First, look at the regular page

1) Composition

Previous + page number + next page

? Jump to page __/page __";

? Confirm" button;

? Keyboard support;

2) Usage Scenarios

When the web page content is large and can not be fully displayed in a limited area;

In order to facilitate the user to jump between multiple pages and quickly locate (especially sequential page flipping), the design of the page flip to provide navigation between multiple pages.

In the e-commerce site 3 level page, search results page and other information-rich page is very important.

What type of content is paging?

How many pages are there?

Which pages are viewed the most?

What are the chances of manually going through all of them

Are the pages turned out of order and why?

Does it look at pages that have already been turned?

Do page flips appear at both the top and bottom of the list?

Does the "last page" have to be there?

When is a page flip at the top of the list?

According to user's mental model, when browsing email content, it is a repeated browsing type and the page is long, so it is necessary to add a page flip at the top, but the users of e-commerce website search result page and Sina Weibo will flip the page when they browse to the bottom of the page, so it is not necessary to put a page flip at the top.

Is it possible to show page content on mouseover? And when?

Consider these questions before designing, and design for the tradeoffs.

3) Interaction analysis

Google page turn

search results for the first time to provide only 10 pages;

design guess: google developers think that the average user in the 10 pages will be able to find the desired content.

Click on any page number to continue browsing, found that the subsequent page number provided is: the current page + 9;

Design guess: when the user clicks on the page number down, google developers think that the first 10 pages of the content can not satisfy the user, and so the scope of the search will be enlarged.

But the maximum number of page numbers provided is 20;

Design guess: but considering the width of the web page or can not continue to increase the number of page numbers indefinitely, so it is set to provide a maximum of 20 page numbers at a time.

Baidu page turn

Always have the first "1" page, in the middle of the "..." indicates that the page number is not displayed;

Design guess: users turn to the back of the page can not find the desired content, it will return to the first page. When you want to find the content, you will return to the first page to find again, at this time the "1" page is the role of home.

Selected page number and mouseover page number style is always in a position unchanged, do not need to move the mouse to click on the next page, and then the page number is automatically replaced by the state;

Design guess: aiming at the page number to click on the more difficult to reduce the number of times the user to aim at the location. However, it is not done perfectly, users still have to scroll the browser bar to the bottom to aim at the page number position every time they refresh a page. This tiny friendly interaction can be applied to the rotating chart design to reduce the mouse aiming operation.

But it also provides up to 20 page numbers;

Sina Weibo mini pagination

Scrolling page and page flip are used in combination;

Previous page and next page are put together to make it easier to click;

Usually users press "next page" most often, so the style of previous page can be simpler;

Previous page style can be more simple;

This is the best way to make the page more user-friendly, so it is better for the user to click on "next page". The upper page style can be simpler;

4) User Mental Model Analysis

Take the Taobao search results list page as an example:

Users enter keywords to conduct a fuzzy search, and then a list of related results appears, users need to look through the search page by page, at this time, the "previous" and "next" pages are more convenient to click on. "next page" is used most, so to design easy to click switch; or interval two or three pages to view, so the style to distinguish between viewed page number and not viewed; the first few pages of the maximum chance of browsing, when turning to the back of the relevant content is less and less, the user will want to return to the first page, so it is best to always display the home page; the number of pages should not be too long, do not lead to user visual identification Too long, do not lead to the user's visual identification difficulties; should not be too short, so as not to give the user the illusion of less information on the site.

Sina microblogging information list page user mental model:

users browse the information is concerned about the information, will be like reading a newspaper page by page to browse down, so the "previous" and "next" used the most often; followed by the jump page, in order to reflect the lightness of the page. In order to reflect the concept of lightweight microblogging, the middle page of the traditional page flip is simplified into a drop-down menu, which not only identifies the current page position, but also allows you to flip the page to switch to the next page;

5) Summarize

The disadvantage is that it interrupts the user's reading, and affects the user's attention to the main content.

Advantages are clear organization, easy to find information in sections, and low pressure on background requests;

As with other components, paging is not a standalone component, but also has to be designed in conjunction with the environment in which it is used.

Second, information scrolling page

GOOGLE image

"infinite scrolling page", when the user browses to the bottom of the page, automatically refreshes the page to display the new information;

after many consecutive pages, when there is no more content can be displayed, the automatic appearance of associated information

The button "view more information", "view more information", "view more information", "view more information", "view more information", "view more information", "view more information", "view more information". button "view more information" to guide users to browse other related information;

or need to click to turn the page;

When the page is too long, the "back to top" button must be provided;

more close to the user's Mental model, easy to read and browse. The disadvantage is that when a piece of information can not be refreshed in time, you can not jump to browse the information below it.

III. Scrollbars

1) Scrollbars and horizontal paging priorities

How to design for both scrollbars and paging.

Page turns and scrollbars complement each other, both are pages too long, in order to segment the content of the method;

Page turns inside the scrollbar

Design guess: the scrollbar to the bottom of the party appear page turns. Probably from the browser, the scroll bar inside the page flip;

QQ mailbox

For example, the browser, because of the nested relationship between the software and its content;

There is a page flip also scroll bar, scrolling the content should not be too long (PC products)

Design conjecture: the scroll bar needs to drag the slider to browse, if the slider is too short, it will be even more difficult to operate; statistics of IE, FF, Office and so on. In the case of IE, FF, Office and other common software, the slider height is usually 8px and then no longer shrinks. When the height of the slider is only 8px, the experience of dragging the scrollbar is quite poor.

Mobile products appear to be unrestricted

Design guess: do not need to drag the mouse, manually click on the mobile terminal is the most convenient and commonly used operations;

2) Paging is not necessarily click jump

There are up and down page at the same time can be quickly dragged to browse through the information on the different pages, suitable for the content of the page to be able to roughly browse ;

four, Summary

1) From the structure of the information, the traditional page flip is a horizontal information segmentation display, while the "infinite scroll page" belongs to the vertical information incremental display (with scrolling page information growth).

Distinguish between visited/unvisited page styles, which can better help users remember and not repeat browsing;

The clickable area of the link is as large as possible, which is convenient for users to click, and the page spacing is enough to avoid users clicking by mistake;

Clearly identify the position of the current page, which is usually in the middle of the page;

Provide a batch of page turns (e.g., the next 10 pages);

The page is not a page turner, so it is not a page turner, but a page turner.

When the page is too long, add "back to the top";

Do not need to "previous page" "next page" will not be displayed, such as the latter than the former more frequently used The former can be simplified into a symbol >;

Display the total number of pages (when the total is not displayed, the last page can not be flipped to the last page);

"Previous" "Next" position is fixed;

The number of page numbers should not be too long (present too much at once leads to visual confusion, users turn the page number difficult) or too short (especially search results, will create the impression that the site has less information);

Try to use the first page and the last page links, and placed in a fixed position outside the ordinary page number area;

In addition to putting the first page, you can choose to put the first three pages of the page number, visually more stable;

? Avoid fancy interactions and streamline;

Allow jumping page flips when there are too many page numbers;

2) Tabs and page flips paged in the same direction are seldom used at the same time, and the same is true for scrolling page flips and scrollbars. However, horizontal and vertical components can be used in cross-compatibility, such as scrollbars and page flips.

3) There is no rule that horizontal must be a page flip and vertical must be a scrollbar, it can be diffused: horizontal is a scrollbar and vertical is a page flip, but this way does not seem to be easy to operate.

The soul of all components is how the user operates them.

Related tags

Interaction details Interaction design Paging