Recently, the leader required the revision of the gift panel of the broadcast room. I went to find some competing products and analyzed them, and found that many broadcast rooms began to support the horizontal screen mode. In landscape mode, there are two layout forms of gift panel. The first one is the gift panel of STATION B, which pops up from the bottom. The second kind is the right slide out with Look live broadcast as an example. What causes the difference between the two designs?
▽ Gift panel of station B
Delta netease LookliveThe present panel
As we all know, one of the core of B station culture is bullet screen, and there is even a similar saying about bullet screen culture. Although I do not know much about bullet screen, it can be seen from it that bullet screen is very important for B station, or for the users of B station. In many cases, it’s as important as live content. Similar to, a very good video, without the barrage, always feel less taste. A mediocre video, with an interesting bullet screen, can also attract users’ attention.
I don’t know if you are the same, I don’t watch the bullet screen myself, the feeling is not deep, other B station deep users told me so. Station B without barrage is soulless.
In station B, users are highly dependent on the bullet-screen. From this point of view, it is easy to understand that the gift panel in the live broadcast room pops up from below — it does not interfere with the bullet-screen information.
Probably, to design a gift panel, do not know how to layout, after thinking a conclusion, must not block the bullet screen. Then the choice of form is clear.
We have to accept this format even if it is very different from the portrait gift panel design. Is it a good way to “adapt to local conditions”?
In addition, there is a detail that can be used to verify the above idea.
If we compare the difference between the horizontal and vertical bullet screens in the live broadcast room of station B, we will find that in the vertical state, the bullet screen often fills the whole live screen. Gift-giving bubbles and interactive areas are at the bottom of the screen, and there are only bullets in the screen.
At this time, if you move across the screen again, you will find that the number of bullets will be some distance from the bottom of the picture even if there are many. The gift-giving bubble is also displayed in the screen, but it’s also a bit distant from the bottom.
When you open the gift panel, you will find that the size of the distance is exactly the height of the gift panel.
Therefore, it can be seen from this point that the bullet screen and panel are deliberately separated, so as not to let the panel block the bullet screen, and also not to let the bullet screen affect the gift.
The interactive area was removed directly and not retained in the picture. Because the interactive information in the interactive area will be displayed in the screen in the form of bullet screen, as for the system message, such as the prompt of “who enters the live broadcast room”, the priority in station B is not as high as the bullet screen, so the prompt in the lower left corner will have no impact even if it is covered by the gift panel.
That’s why B is in the studio designing the gift panel like this.
In landscape mode, similar to Look live, the gift panel slides out from the right.
Similarly, live shows like Look, no matter the user’s speech or system information, are located in the interaction area at the lower left corner in the landscape mode. Because there is no bullet screen, the side-sliding gift panel is a better choice.
However, some products, such as Kuaishou, will have both the interaction area at the lower left corner and the bullet screen, so it is necessary to measure the priority of the product’s bullet screen. If the priority is not high, the integrated interaction area at the lower left corner will be shown first, which is a way to save effort. The gift panel slides out from the right without affecting the overall layout.
Kuaishou gift panel and bullet screen message
In the landscape mode, there is only a bullet screen in the live broadcast room like Tiktok, but no interactive area. If you observe carefully, you can even find that in the landscape mode of Tiktok, all information will appear on the screen in the form of bullets, including interactive messages and system prompts, and even fill the whole screen if there is a large number of them. At this time click on the gift panel, unexpectedly the right slide out.
By contrast, we can see that the horizontal screen mode of station B is more delicate in design, distinguishing system prompt, bullet screen message, gift panel, etc., with very obvious distribution. However, each module of Douyin is relatively messy, and the appearance of the gift panel module affects other information of the page content. The information hierarchy and layout of the page are slightly chaotic.
There is a knowledge point in these two cases, that is, “information priority determines layout form”.
What is information priority? The information on an interface is sorted from most important to least important.
For example, in the live broadcast room, the most important information must be the live broadcast content, and other information is generated according to the live broadcast content. It is because the live broadcast content triggers the desire of users to reward, so click the gift button, and the gift panel pops up.
The display form of the panel also needs to balance the layout according to other contents on the page, such as the priority of the bullet screen, or the priority of the interaction area, etc. They should be arranged in an orderly manner and not interfere with each other. For example, there are design differences between B station and Look live broadcast.
The tiktok landscape mode of the gift panel is designed so that the entire content of the page is scrambled, which is not desirable.
This is called a lack of content focus, and you should pay particular attention to it.
In addition, from the content focus leads to another knowledge point, is about visual experience, that is, UI in the process of designing similar pages, need to pay attention to the experience.
As you can see in the picture above, the height of the gift panel of station B is less than half of the screen, including the transparency, which can vaguely penetrate into the live broadcast. Although it has a sense of cutting, it is acceptable.
However, the frosted glass design of Look makes the picture cut seriously, resulting in more than half of the live video being blocked during the gift-giving process. I believe this process may affect users’ desire to give gifts. For example, I have the idea of giving a gift, but at the wonderful moment, I think that clicking on the gift will block the picture, so I will send the gift later, so I forget, or forget.
In the example above, although Kuaishou’s interface also adopts the design of sliding out on the right, its gift-giving panel is designed with a smaller width, which is precisely for the reason mentioned above.
Therefore, you should pay special attention to these points mentioned in the article when designing the gift panel in landscape mode of broadcast room.
This article, through the analysis of information priority and interface elements, explains the design ideas of the broadcast room gift panel. Of course, the content of the article can be expanded, but one or two knowledge points are enough for an article.