The emergence of Toutiao has subverted traditional news products (such as NetEase, Sina and Sohu News).

Traditional news relies on editorial recommendations to reach users, while Toutiao relies on news algorithms, abandoning the idea of ​​traditional manual distribution, which has improved distribution efficiency by tens of thousands. It has quickly risen to become a leading news information product.

As the leading product in the news information flow, the design details and design logic of Toutiao are worthy of our consideration and analysis.

This article mainly explains some of the designs of Toutiao and the logic behind them. The outline of this article is as follows:

1. Information flow style

2. Information flow distribution

3. Search

4. Short videos

5. Short videos

6. Short content stream

1. Information flow style

What is information flow? Information flow consists of two parts: information flow = information + flow .

Information refers to content, which can be news, videos, pictures, etc., and is mostly presented in the form of lists or cards.

Flow refers to waterfall flow, which can be browsed infinitely.

So the information flow means that you can browse content information infinitely by sliding.

The quality of the information flow style will directly affect the information display efficiency and click-through rate, thereby affecting the user's efficiency in obtaining information and the overall reading time.

The following figure shows the information flow of the recommended channel on the homepage of Toutiao:

If we simply classify the information flow styles, the four most commonly used styles are plain text, text on the left and pictures on the right, short content, and large pictures and videos. As shown in the following figure:

The plain text style is used when there are no pictures in the news. When there are no pictures in the article, this style is used. The list contains: title, source, number of comments, and release time.

When there are pictures, the text on the left and the picture on the right are used. Currently, there are generally three types of news list styles containing pictures: text on the left and picture on the right, picture on the left and text on the right, and three pictures.

The style of left picture and right text strengthens the picture and weakens the title. For news information, pictures cannot accurately express the content of the news information, so few products use this style at present.

Currently, most products on the market use text on the left and pictures on the right, such as Toutiao, NetEase News, Tencent News, Sina News, etc. Only Sohu News uses the left picture and right text.

The three pictures attract users to click and view through pictures, and guide users to click through pictures. The advantage is that it can increase the click-through rate, but the entire information flow appears messy, affecting user reading.

Compared with NetEase, Toutiao's information flow is more comfortable to read and has less visual pressure. This is based on the fact that three-picture styles account for a small proportion of Toutiao's information flow. As shown in the figure below, the insertion of three-picture styles in NetEase News' information flow makes the entire information flow cluttered.

Compare the information flow styles of NetEase News and Toutiao, as shown in the following figure:

For pure text, the title color of Toutiao is darker, while that of NetEase is relatively lighter. The list height of Toutiao is higher than that of NetEase, which means that the number of Toutiao items displayed on the screen is less than that of NetEase News, but the overall sense of space and blank space is more comfortable. At the same time, Toutiao contains the release time, so that users can perceive the real-time nature of the news when viewing news information.

With the text on the left and the picture on the right, the list of Toutiao is higher than that of NetEase. In comparison, the title of Toutiao is more obvious, and the picture has a rounded corner radius, making the overall look of Toutiao more comfortable.

For large pictures and videos, there is not much difference between the two. The only differences are the title text color, cover corner radius and release time.

Summarize:

The overall sense of space, white space, and title color contrast of the headline flow are relatively good.

Compared with NetEase, there is more white space. In the same screen space, the content information displayed will be less, and the screen display efficiency will be lower. However, users are more comfortable during the reading process, and under the same circumstances, their reading time will be longer.

2. Information Flow Distribution

What is information flow distribution? Through certain design strategies, users' traffic can be reasonably distributed to other places, so as to achieve the design goals of the product and maximize the utilization of traffic. Improve traffic to maximize conversion and gain greater commercial value.

Toutiao’s information flow mainly includes five modules: top module, information list, advertising module, short content, and card entrance of other functional modules. As shown in the following figure:

There can be no more than two pinned contents at the top of the recommendation stream, and this is due to relevant policy reasons.

After the first piece of normal information flow, advertisements are inserted to generate commercial revenue for the platform. After that, information content will be recommended to users based on their reading habits, and advertisements will be inserted from time to time.

Toutiao has no editorial operations, so almost all news comes from machine algorithms. Without the manual operation of editors, Toutiao has a huge amount of content to recommend different content to users based on their reading habits.

3. Search Bar

In news information flow products, the search bar has two main usage scenarios. One is to provide a news search function to search for current or past news by keywords.

The other is to provide hot news in the search module for users to read.

So how to increase the number of clicks on the search bar. Toutiao displays hot news in the form of prompts in the search bar scrolling to attract users. At the same time, in order to display the maximum number of news items, a two-in-a-row design is adopted to ensure the maximum click-through rate.

After the user clicks on the search box, the first hot search keyword is built into the search box. Users can search by using the search function on the keyboard. You can also click on the two hot news below the search bar to search and view.

4. Short Videos

The video title is built into the player. The advantage of this is that it can reduce the height of the card and increase the exposure of the video. The disadvantage is that if the user wants to see the video title introduction, they need to click on the player for the title to appear again.

When the title is placed inside the player, 2.5 headlines can be displayed, while Haokan Video can only display 2 headlines when the title is placed outside, as shown in the following figure:

For the advertising business, an important indicator of revenue is ad exposure. In order to increase advertising revenue, the video height must be lowered to improve ad exposure efficiency and thereby increase revenue. Therefore, Toutiao placing the title in the player meets commercial goals, but does not meet user goals.

5. Short Video

There are roughly two types of layout designs for short videos. One is the Tik Tok-style layout, with the avatar and operation items located on the right. The advantage of this is that the amount of interaction with the video is clearly displayed, which can guide user interaction. But it has a certain occlusion effect on the content of the video.

The other is a good-looking video-style layout, which places the avatar nickname and operation items at the bottom to weaken the interactive data of the video. Let users focus on the video content.

The short videos on Toutiao use the same layout as TikTok. The avatar and operation items are placed on the right. However, in order to guide users to comment, an input box is added at the bottom of the interface to guide users to comment and make it more convenient for users to read comments. The swipe up gesture becomes a comment pull-up.

6. Short content stream

Short content (Weibo Toutiao) in the recommended flow, click to enter the short content feed flow. Rather than a short content details page. If the user wants to see the details, the user needs to click again.

This design obviously does not provide a good user experience, and it is estimated that the product is intended to divert traffic to other short content. Such interactive design can increase the exposure of the overall short content flow several times.

This approach sacrifices user experience, as users need to click twice in a row if they need to see details. This is a design that sacrifices business metrics.

The above is a simple analysis and deconstruction of some modules of Toutiao.

Author: Echo

Source: Echo design notes (uxecho)