Discussion on the browsing design method of web page content

Discussion on the browsing design method of web page content
<br />For an article on a content page, if the article is too long or has categories (rankings), then paginated reading is undoubtedly the best choice.
If the content of an article does not involve classification, such as novels, then the page numbers can be displayed in a normal way, because the content is coherent and it is unlikely that the middle content will be skipped and the following content will be read directly:

But what if the content of an article involves classification? For example, the very common digital rankings involve the classification (ranking) of article content. At this time, should you consider changing the page numbering method or adding a page number content preview to display?

Because content such as rankings are actually made up of complete and independent content pages, the first and second places are two complete and independent entities. They are only put together for the sake of this ranking. There is no problem if you skip the second place and directly check the information of the third place.

As shown in the picture above, the entire article seems to be a complete whole, but the content inside can be read in different categories.
If there is no content preview navigation below this page number, how can users know the content displayed in this article? Users can only view the content page by page, which puts them in a passive state.
However, when there is such a content preview navigation under the page number, the reading experience brought to users is completely different. Through such a complete and clear preview navigation structure, users can understand the content to be presented in the article in advance without reading the full text. When seeing this preview navigation, users can judge whether the article is still interesting for them to read. At the same time, they can also skip the content that they already understand or do not want to understand, so as to focus on the areas that interest them.
Compared with a page navigation that simply arranges page numbers there, the content of the page with a preview navigation will leave a deeper impression on users. Because users can skip the "general" information and go straight to the "essence", there is a huge difference in the impression left on users by the general information and the extracted information.
This is also a big reason why RSS subscriptions are popular.

<<:  Use CSS variables to achieve cool and amazing floating effects

>>:  Implementation of Node connection to MySQL query transaction processing

Recommend

How to fix the width of table in ie8 and chrome

When the above settings are used in IE8 and Chrome...

Tutorial on installing php5, uninstalling php, and installing php7 on centos

First, install PHP5 very simple yum install php T...

Detailed steps to install Docker mongoDB 4.2.1 and collect springboot logs

1: Install mongodb in docker Step 1: Install mong...

Directory permissions when creating a container with Docker

When I was writing a project yesterday, I needed ...

Comprehensive understanding of HTML Form elements

As shown below: XML/HTML CodeCopy content to clip...

Vue implements calling PC camera to take photos in real time

Vue calls the PC camera to take pictures in real ...

10 content-related principles to improve website performance

<br />English address: http://developer.yaho...

How to quickly deploy Gitlab using Docker

1. Download the gitlab image docker pull gitlab/g...

Detailed steps to configure MySQL remote connection under Alibaba Cloud

Preface As we all know, by default, the MySQL ins...

How to prevent computer slowdown when WIN10 has multiple databases installed

Enable the service when you need it, and disable ...

MySQL 8.0.22 winx64 installation and configuration graphic tutorial

mysql 8.0.22 winx64 installation and configuratio...

CSS animation property usage and example code (transition/transform/animation)

During development, a good user interface will al...

HTML form submission method case study

To summarize the form submission method: 1. Use t...