Pagination Examples and Good Practices
|
<br />Structure and hierarchy reduce complexity and improve readability. The more organized your article or site is, the easier it will be for users to understand your points and get the message you want to convey. On the web, this is done in a number of ways. Headlines and lists are used as logically independent blocks of information in the body of the text. Another solution is a mechanism called pagination, which provides users with additional navigation options for browsing within a single section of a given article. In addition to "previous" and "next" buttons, these places in the article also involve numbers, prompts, and arrows. Search engines almost always use pagination, and newspapers often use it to navigate large articles with several sections. In some cases, pagination is also required for blogs (weblogs). Additional navigation can simplify access to some site pages, for example allowing users to easily browse through a site's archives. In most cases, pagination is superior to traditional "previous page, next page" navigation, providing visitors with faster and easier navigation through the site. It's not required, but a nice feature to have. Let's look at some good paging practices, some examples of when and how to perform paging. Good practices for pagination design (7 aspects from Faruk Ates):
Related references
Mistake #1: Pagination Options Are Not Visible <br />Since the primary purpose of pagination is to serve as an improved navigation, it must make it clear to visitors where they are, where they have been, and where they can go next. These three facts give the user a complete understanding of how the system works and how the navigation should be used. But most importantly, the navigation options should be visible. hugg.com does not follow this policy. The link color has very low contrast with the white background. No mouseover effects are provided.  Mistake #2: Unintuitive pagination <br />If you have to choose between a fairly complex (but beautiful) navigation and a simple one that contains the necessary functionality, always go for the simple approach. If users don’t understand the mechanics behind pagination, they won’t be able to use it, and therefore they won’t use your site. Helium.com is a great example of this mistake. Take a look at the screenshot below: What do these arrows represent? Represents the page you visited or the page you are visiting? Why does this link to the second page have a white background? Why are the arrows different colors? This is not intuitive.  Unintuitive designs stem from a lack of structure, hierarchy, and considered design decisions. Empty navigation is just as unintuitive as overcrowded solutions.  Web links without spaces are difficult to scan and navigate. Make-Believe.org is an example of a site that was designed to be unintuitive.  Previous Page 1 2 3 4 Next Page Read Full Article |
<<: Webpack loads css files and its configuration method
>>: Multiple ways to change the SELECT options in an HTML drop-down box
Recommend
Detailed explanation of MySQL monitoring tool mysql-monitor
1. Overview mysql-monitor MYSQL monitoring tool, ...
Common date comparison and calculation functions in MySQL
Implementation of time comparison in MySql unix_t...
Detailed explanation of the organizational structure diagram case of Vue's vue-tree-color component
Table of contents npm Install the loader Import P...
MySQL uses limit to implement paging example method
1. Basic implementation of limit In general, the ...
Implementing parameter jump function in Vue project
Page Description: Main page: name —> shisheng...
Graphical tutorial on installing JDK1.8 under CentOS7.4
Linux installation JDK1.8 steps 1. Check whether ...
JavaScript imitates Jingdong magnifying glass effect
This article shares the specific code for JavaScr...
Windows CVE-2019-0708 Remote Desktop Code Execution Vulnerability Reproduction Issue
1. Vulnerability Description On May 15, 2019, Mic...
Form submission refresh page does not jump source code design
1. Design source code Copy code The code is as fol...
Detailed steps for debugging VUE projects in IDEA
To debug js code, you need to write debugger in t...
Implementation of Docker container state conversion
A docker container state transition diagram Secon...
MySQL EXPLAIN statement usage examples
Table of contents 1. Usage 2. Output results 1.id...
MySQL 8.0.17 installation graphic tutorial
This article shares with you the MySQL 8.0.17 ins...
Say goodbye to hard coding and let your front-end table automatically calculate the instance code
Preface When my team was developing the tax syste...
The perfect solution for MYSQL5.7.24 installation without data directory and my-default.ini and service failure to start
MySQL official website download address: https://...