Thoughts and experience sharing on interactive design of reading lists for information products
 Compared with traditional reading platforms, a reading list is like a table of contents in a physical book. The table of contents of a novel is concise: title + page number; the table of contents of a magazine is relatively rich: title, subtitle, picture, abstract, page number, exquisite layout, and some even include advertisements. Each type of content will have a list format suitable for its presentation. Here are a few things to consider when designing a reading list for information products: 1. Visual Center Highlight the content that the product wants users to see and guide users to read the key recommended content. When reading information, we are often disturbed by the surrounding text and images, and it is not so smooth. According to the visual psychology of the human eye, there are several characteristics that can easily guide or interfere with the direction of visual movement. 1) Eye guidance a. Generally speaking, warm colors are more likely to attract attention than cool colors, and bright colors are more likely to attract attention than dark colors. When reading, the line of sight usually moves from left to right and from top to bottom, but the guidance of color will change the order of the line of sight. Reasonable use can add emphasis to the list, otherwise it will destroy the user's psychological expectations, create a reading burden, and affect cognitive efficiency.  Pictures can assist text in visual communication, help understanding, and make the layout three-dimensional and realistic.  Products that focus more on the more stable information itself tend to place thumbnails after the news headlines. The image quality of this type of information content is often average. At the same time, it allows users to read each title in a relatively stable state of mind and choose the content they like. The images are only expected to serve as an auxiliary to the title. For entertainment-oriented and fragmented information products, placing a thumbnail before the title can more intuitively convey the meaning of the content, thereby shortening the time it takes for users to understand the text title and allowing users to quickly browse down the picture on the right, thereby achieving the purpose of quick screening.   Regular arrangement of arrows or numbers can easily make one side of the page too heavy or have a strong hint. Pay attention to the stability of the page.  The easiest way is to use a bright style, or change the background color of the item. You can also find a place for this article that can stand out from other levels, such as placing a thumbnail before the title. But you also need to consider the overall visual effect of the page. One principle is that "too much emphasis equals no emphasis."  2. Non-disruptive 1) Long lists are not a nuisance if they can be scanned efficiently. At least they make browsing less effort and cost-effective. In long lists of information, it is not necessary to use standard page numbering for the following reasons: a. From a world of reading content to a world of navigation. Every time a user selects a page to view more content, he needs to drag himself out of a world of reading content and put himself into a world of navigation. Users no longer think about what kind of content they want to read, but how to find more things to read. Selecting a page number adds natural pause time and gives users a chance to assess whether they want to continue reading or leave. b. Otherwise, page numbers have no essential meaning. Users select by page number only to make it easier for them to find the content they want to read on page 2 or earlier. Give him a better method, such as filtering by week, month, year, category, tag and other attributes, which is much more effective than page numbers. There are also many mobile terminals that use paging indicator controls, but remove the page number, which is a good idea. 2) The focus of ad reading is on content, and users do not care about seeing ads that are not related to the content or ads that do not affect list browsing. Users who frequently use browsers or free applications should be accustomed to the existence of advertisements and understand the significance of advertisements to the products, as long as they do not disturb their normal reading. a. Don’t pretend that your ad is a funny piece of content. Although doing so can increase the number of clicks on the ad, users will also be annoyed because they have been "cheated", which will result in a bad experience. b. Provide relevant advertising to the Content. Data shows that users are willing to click on car-related ads. When users are looking at car models, the corresponding store recommendations provide them with a channel to purchase and even compare prices, so of course users are happy to go. c. Easy to ignore. Sometimes, in order to make the list neat and the product beautiful, ads are inserted between lists in the design and pretend that it is an item in the list. But the visual effects of the ad should be minimized so that it looks inconspicuous and can be easily skipped without being noticed. Some products place ads at the top of the page. Although the location is obvious, they can be closed with a button or only displayed when pulling down, which is also a compromise.  The advantage of Weibo as a reading medium is that it occasionally presents highlights, keeping the reading pace and surprising. Keeping your breathing rhythmic will help you keep moving more, and keeping the rhythm of your content will help you keep reading longer. The alternation between fun and boredom gives users time to rest and regain interest, as well as anticipation for the next little surprise, thus creating a comfortable overall product experience, rather than an average of a lot of fun and a lot of boredom.  Common items: category, thumbnail, number of comments, number of pictures, author. |
<<: The way to represent colors in HTML is by using 6-digit hexadecimal codes, RGB or keywords.
>>: Windows Service 2016 Datacenter\Stand\Embedded Activation Method (2021)
Recommend
MySQL 8.0.15 installation and configuration graphic tutorial and password change under Linux
I wrote this blog to remember that I just install...
How to install WSL2 Ubuntu20.04 on Windows 10 and set up the docker environment
Enable WSL Make sure the system is Windows 10 200...
Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages
Table of contents Preface Prototypal inheritance ...
The difference between Update and select in MySQL for single and multiple tables, and views and temporary tables
1. Use data from table A to update the content of...
Detailed explanation of React setState data update mechanism
Table of contents Why use setState Usage of setSt...
MySQL 5.7.21 installation and configuration method graphic tutorial (window)
Install mysql5.7.21 in the window environment. Th...
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...
Idea packaged into war package deployed to tomcat and access path issues (illustration and text)
The most important thing for idea to package a we...
How to set up URL link in Nginx server
For websites with an architecture like LNMP, they...
Pygame code to make a snake game
Table of contents Pygame functions used Creating ...
Detailed explanation of the difference between arrow functions and normal functions in JavaScript
This article explains the difference between arro...
How to modify server uuid in Mysql
Source of the problem: If the slave server is the...
Use and understanding of MySQL triggers
Table of contents 1. What is a trigger? 2. Create...
Simplify complex website navigation
<br />Navigation design is one of the main t...
Detailed explanation of how to use grep to obtain MySQL error log information
To facilitate the maintenance of MySQL, a script ...