Recommend 60 paging cases 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) Provide large clickable areas. Do not underline the current page. Separate web links. Provide previous and next page links. Use home and last page links (where applicable). Put the first and last pages outside Pagination 101, Faruk Ates has completed the final draft on pagination. Some Styles For Your Pagination, you can download any applicable pagination style. 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 the source code of your theme. Mistake #1: Pagination options are not visible Because the main 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 5 Next Page Read More |
<<: Understanding the MySQL query optimization process
>>: How to clear default styles and set common styles in CSS
Recommend
Submit the image through the container DockerCommit and push the image DockerPush
After creating a container locally, you can creat...
Detailed explanation of the difference between in and exists in MySQL
1. Prepare in Advance For your convenience, I cre...
Comparison of div and span in HTML_PowerNode Java Academy
1. <div></div> and <span></s...
Solution to high CPU usage of Tomcat process
Table of contents Case Context switching overhead...
Teach you how to create a project using vue-cli3 in five minutes (beginner's guide)
Table of contents 1. Build the Vue environment 2....
jQuery plugin to achieve seamless carousel
Seamless carousel is a very common effect, and it...
Several scenarios for using the Nginx Rewrite module
Application scenario 1: Domain name-based redirec...
Understanding and using React useEffect
Table of contents Avoid repetitive rendering loop...
The use of vue directive v-bind and points to note
Table of contents 1. v-bind: can bind some data t...
How to install MySQL database on Ubuntu
Ubuntu is a free and open source desktop PC opera...
How to smoothly upgrade and rollback Nginx version in 1 minute
Today, let's talk about a situation that is o...
win2008 server security settings deployment document (recommended)
I had been working on the project before the New ...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...
Summary of methods for querying MySQL user permissions
Introduce two methods to view MySQL user permissi...
Example tutorial on using the sum function in MySQL
Introduction Today I will share the use of the su...