A Brief Analysis of Content Distribution Feed Flow

Labs Guide

In this era where content is king, all types of products have begun to create rich information flows around their own tracks. Traditional information flows can no longer carry the rich and diverse content of today, and information flows no longer simply belong to information and entertainment products. Therefore, traditional information flows cannot carry the increasingly rich product content, and gradually a personalized content recommendation method - Feed flow has gradually emerged, with rich styles, including large card flow, double column flow, immersive flow, dynamic flow, text flow, dynamic flow, window flow, etc....

Part 01,   What is a feed?

A feed is an information stream that is continuously updated and presented to users. A feed is a content aggregator that combines several message sources that users actively subscribe to, helping users continuously obtain the latest subscription source content.

Feed, originated from the early RSS, is a way to present content to users and continuously update it. Users can choose to subscribe to multiple resources. The website provides the feed URL, and the user registers the feed URL in the reader. The aggregate page formed in the reader is the feed stream.

In 2006, Facebook redefined the feed, calling it News Feed, which is similar to the model we use widely today. It has several features:

Subscription sources are no longer a certain content, but the people/groups that produce the content. Subscriptions are usually mixed with non-subscription content, such as hot recommendations and advertisements.

Content is no longer strictly sorted by timeline, and intelligent feed sorting is widely used. The new feed flow deliberately no longer requires active search, but actively presents a wide range of content. It knows us well, gives us what we want to know, and allows us to refresh and indulge in it.

Part 02: Main modes of feed flow

Take Weibo as an example:

2.1 Push Mode

When a user triggers an action (such as posting a Weibo post), the action is recorded in the action table and also corresponds to the user's fan table, inserting a feed for each fan. However, for big Vs with more than 10,000 fans, inserting a feed for each fan is very costly in terms of data storage.

picture

2.2 Pull Mode

When a user (especially one who follows many people) triggers an action, they pull their own dynamics, search the user's follow list, and then search for new feeds based on the follow list. If a user follows too many people, querying the user's follow list also has a high data cost.

picture

2.3 Push-pull combination mode (there are many ways to combine, here are two examples)

2.3.1 Online push, offline pull:

When a big V posts a dynamic, it will only be released to the fans who are online at the same time. After the offline fans come online, they can pull the dynamic. This completes the push and pull.

picture

2.3.2 Scheduled push, offline pull:

After a big V posts an update, it will be pushed to the fans’ updates table at regular intervals as a permanent process.

picture

Part 03. Main components of the feed flow

The feed flow mainly consists of the following parts, as shown below:

picture

3.1 Pictures/Videos

In the feed of most products, pictures or videos occupy the largest area. Compared with text, pictures are more likely to stimulate users' desire to click. In products with community attributes, designers also need to consider how to adapt the horizontal and vertical screen covers.

The second is if a video appears at that location. In common video products, when the system recognizes that the content is in the middle area of ​​the user interface, it will automatically play the preview. Within 1-2 seconds, users can quickly browse the most exciting part of the video. In terms of display, it is usually displayed in a rectangle with rounded corners, and the rounded corners are generally set to: 8, 10, 12, 14, 16, 20PX.

3.2 Title

In the design of feed, the title is the most indispensable part. In terms of font design, most of them use black fonts. In terms of layout, it is one to two lines. If the title has too many words, it can be presented in the form of "...". Secondly, it is necessary to limit the creators and operators of the product to configure the title. Pay attention to the copywriting should be concise and not too cumbersome.

3.3 Copywriting

This area can be called the copy area or the secondary title area. In the design of this area, it is recommended that the font color be mostly gray. In the writing of the copy, more guiding words can be added to guide users to click.

3.4 Tags

Tags have two main purposes. The first is to help users quickly distinguish between content types such as previews, exclusive broadcasts, live broadcasts, featured content, recommendations, etc. Users can filter content in many feeds by looking at tags to quickly find the content they want to watch.

The second aspect is to help products distribute traffic more accurately. Products will group users according to their operating habits, and then label each group according to their interests. These labels correspond to different groups of users, so there are different recommendations for different users in Taobao Mall.

3.5 Auxiliary Information

Auxiliary information is mainly used to present information of different products. For example, on video platforms, auxiliary information can carry movie ratings, TV series episodes, playback volume, variety show update date, likes, comments, etc., and even add relevant quick operations such as muting. Auxiliary information should not be too prominent in the design. It is necessary to clarify the information level of a single feed and select necessary information for display.

3.6 Operation

The purpose of the operation area is to allow the product's algorithm to better understand user preferences, because user interests will change. If a user suddenly does not want to see certain content at a certain time, they can click to "dislike" or "reduce related content". This can also give users a certain degree of customization of the feed flow.

In terms of interaction form, after clicking the operation area, it is recommended to use a lighter interaction method, such as a pop-up window or bubble that appears at the bottom after clicking.

picture

Part 04, Feed Stream Format

It is not enough to just understand the components of a feed. A single feed stream is just like a single word in English learning. Memorizing a single word by rote is meaningless. The same is true for the design of a feed stream. We also need to be able to disassemble and reassemble the components mentioned above, because different products have different business attributes, and the content that needs to be provided to users is also different.

4.1 Text Flow

Introduction : Text flow is mostly used in information products such as Zhihu, Baidu, or in the user comment area of ​​products. This style can be used in the feed flow design that is mainly text-based, and can also be used in conjunction with dynamic flow (mentioned below).

Due to its high adaptability and ability to accommodate more operation buttons, it can serve products based on UGC content. UGC products need to emphasize interaction between users and expose interactive quick operations.

picture

Usage scenarios : text-based information products, news and information products, comment areas, product discovery pages/communities.

Design points : In the design of text flow, it is important to distinguish the priority of information. The title can be distinguished by using large bold font, while the text can be distinguished by using regular black font.

The operation area and auxiliary information can be placed below the main text, in gray, and the avatar and label can be laid out as a whole. In terms of interaction, buttons such as share/comment/like can be exposed to reduce the user's interaction cost.

4.2 Large card flow

Introduction : This style mainly serves feeds with pictures/videos as the main content. Take Taobao as an example. After Taobao proposed the concept of "browsing Taobao" in 2020, it no longer blindly pursued the shortest path for transactions. Instead, it allowed users to enter a feed of similar products after clicking on a certain product on the homepage, rather than the product details page. It can be seen that the large card flow is very suitable for the display of picture/video information.

Usage scenario : Content that is mainly based on pictures and needs to be combined with related operations, such as commenting/entering details/sharing/liking, etc. The disadvantage is that only one feed is displayed in a single row, which requires a large space. It is not suitable for use alone on the homepage and needs to be combined with other feed styles.

Design points : In the design of large card flow, due to the large space, it is necessary to pay attention to the placement of the title and operation area, and secondly, it is necessary to control the quality of the pictures uploaded by the creators or cooperative media. The most important thing is to consider the cover that is suitable for horizontal and vertical screens. Due to the different proportions of the pictures, it will involve the consistency of related operation interactions and the unification of visual consistency.

4.3 Double Column Flow

Introduction : Xiaohongshu is the only product that has brought the double-column flow to the user's field of vision. Since its launch, Xiaohongshu has always adopted the double-column flow format. Its advantage is that it can present the feed content dominated by pictures to the user to the greatest extent.

Initially, the long card style was the main style, mainly used to adapt to vertical screen pictures, but with the development of UGC content at this stage, the double-column flow has also begun to adapt to horizontal screen covers. For example, Youku’s homepage feed uses the short card style in the double-column flow, and there are also cases where long cards and short cards are used together.

picture

Usage scenario : Mainly suitable for UGC products that need to be mainly based on pictures. It is very suitable for the homepage, but it is not recommended to be used in combination with other feed styles, which can easily break the layout rhythm of the left and right columns of the double-column flow. There are limitations on the number of related operation buttons. It is not recommended to expose too many buttons. You can explore the interactive method of long pressing to suspend more operations. In terms of specific design style, it is recommended to refer to Xiaohongshu and only expose the operations of the creator and the number of likes.

Design points : When designing a double-column flow, you need to consider the spacing between the left and right columns and between the upper and lower rows. Since the height of the pictures and the number of words in the titles are different, you need to formulate good specifications to ensure that the user has a sense of rhythm between the two columns of content when browsing the content. The second is to control the number of operation buttons. According to the actual needs of the product, only the most important operations should be exposed.

4.4 Immersive Flow

The most representative use of immersive streaming is on Douyin and Kuaishou. As short video and live streaming modules are added to various product tracks, this style can be seen in almost all leading products. For example, Taobao's product details page and homepage have added live streaming modules. After clicking in, you can immerse yourself in the evaluation of electronic products or the actual effect of wearing clothing. In terms of information transmission, it will be more diverse and immersive than a single picture.

picture

Usage scenarios : This style is mainly suitable for short videos and live broadcasts.

Design points : Short videos play different roles in different products. For example, on Taobao, the purpose of short videos is to give users a more direct effect display, so that users can quickly understand the advantages of the product and place an order.

Therefore, the role of short videos in Taobao's detail page is to motivate users to buy, so a purchase link will be added in the lower left corner. For example, in video products, such as Youku, it provides relevant movie clips, so the purpose is to divert traffic to the movie playing area in the product, so there will be corresponding changes in the design process.

When using immersive flow, it is necessary to combine it with actual project requirements. You cannot directly copy the design methods of Douyin and Kuaishou to your own products, as this will easily lead to the fragmentation of product functions.

Secondly, the functions need to be displayed in partitions. For example, similar related operations can be aggregated and placed in a fixed area. Since there are many immersive flow function buttons, it is easy to cause interference to users and they may not be able to find the buttons they want to operate.

4.5 Dynamic Flow

Introduction : Weibo and WeChat Moments are the products that I believe use dynamic streams most widely. Since the content in these two products is too rich, they not only need to adapt to horizontal or vertical screen pictures/videos, but also need to consider adapting to different quantities.

And all images need to be displayed to users, including animated images. Therefore, the compatibility of feed is extremely high.

picture

Usage scenarios : Dynamic flow can be used in community products that focus on UGC, as well as community modules in a single product.

Design points : Since the theme of the published content is the cooperating media and users use it to record their personal lives, the advantages of the dynamic flow are very obvious. It can adapt to different numbers of pictures and users' customized tags. Therefore, it is difficult to say whether the dynamic flow presents content mainly composed of pictures/videos or mainly text. Designers need to negotiate with the business side to find out what the positioning of the feed is for the product.

The disadvantage is that it is difficult for users to grasp the key points of a single piece of content. Therefore, during the design process, designers need to clearly formulate relevant specifications and flexibly adapt the number of odd or even pictures to ensure visual balance.

4.6 Window Flow

Introduction : Window flow has appeared more and more in major products in the past two years, because the leading products are developing in the direction of super APP.

The various feed styles I introduced earlier all have their own advantages and disadvantages, but they still cannot meet the increasing demand for product content, so the showcase flow was born. Its style can be understood as arranging and combining feeds of different styles to give users matrix content recommendations.

picture

Usage scenario : It is mostly used below the King Kong area on the product homepage as the entrance to a function or service in the product, such as new product launches, limited-time sales, feature film reviews, etc. Secondly, it is used in the aggregation scenario of a certain type of content. For example, a certain type of video is formed into a combined list, or a certain type of book is formed into a book list, but due to the problem of too much content and difficulty in deciding the cover, the window flow method can be used to carry it.

Design points : Although the showcase flow can carry rich content and easily set off the product atmosphere, the designer needs to control the overall vision during the design process. Since multiple contents may appear in a single area, it is easy to cause page confusion. Therefore, it is not advisable to design a single feed too prominently, which will easily affect the product's traffic distribution.

Secondly, it is necessary to distinguish the style differences between individual feeds. Since a single feed is a collection of content in the showcase flow, it is necessary to pay attention to distinguishing the styles between different feeds.

Part 05: Summary   

This article briefly analyzes the origin, main modes, components and common feed flow styles of feed flow. Different styles have their own advantages and disadvantages, and there is no one-size-fits-all style. Therefore, in the design process, it is necessary to analyze the business goals and user goals, and analyze the requirements for labels/images/text/operations respectively, so as to design the feed that best suits the product needs.