How Weibo Applies and Violates Interface Design Principles and How Can It Improve Its Interface Design

How Weibo Applies and Violates Interface Design Principles and How Can It Improve Its Interface Design

Yingxin Lyu

Abstract

nowadays the popularity of mobile social applications, these publishers of the most popular social applications are too confident that they will never lose their users. Thus, they gradually put user experience in the less important place than their business interests. Weibo is a typical example. Now, users are standing this application with illogical interface design. This paper is about the study of interface design of Weibo, a popular social media app. First, it applies modularity and the eight golden rules of interface design to analyze how Weibo design its interface. Then, the paper shows some cases of Weibo’s bad and unfriendly interface design. In the last part, it gives the reasons for formation of these violations in Weibo’s interface design and tries to give advices about how to solve them in the perspective of how to improve user experience.

Introduction of Weibo

Weibo is a broadcast social media that shares short, real-time information. It is one of the most popular social media platforms in China since its launch in August 2009. The English name of Weibo is microblog, and the earliest microblog website is Twitter. The working mechanism of Weibo and Twitter are much alike. Weibo has website and mobile app. With Weibo, people can share everything they like. They can post words, pictures, videos, music, and many other media. The microblog they post named “weibo”, the same as the application. A user can follow their friends and celebrities in order to receive their weibos. Other people can also follow the user in order to see his or her posts. Now, Weibo is very famous of its “Weibo Hot Search”. It is not only a chart showing the real-time most trending topics but also offering places for advertising. Moreover, Weibo creates many topic communities for users.

The Weibo mobile application has five main pages separated by the bottom menu with five buttons. It is a general ways of separating different main pages of applications. The design of these five buttons also applies the principle of affordances. The first page is the home page with all the weibo post by people a user follows will be present here. The user scrolls down the page in order to see more. It is an infinite scroll that the user can read all weibos posted by his or her following. There is a parallel page named “For You”. Weibo uses big data and recommendation algorithm to offer recommended weibos for the user. The second page is especially for video watching. Now because short videos are more and more popular, so Weibo creates a page for videos only. The third page includes searching bar, Weibo Hot Search, and hot weibo recommendation. The fourth page is for receiving and sending message. A user can chat with their friends and other following people. He or she will receive alert if receiving comments or likes from others, or being mentioned by others. The last page is for the user’s personal data. The user can check weibos he or she posted, all weibos that he or she liked before. Moreover, the page shows the user’s most visited people and community, which are shortcuts to the destination that the user’s preferences.

 

Application of interface design principles

  1. Modularity

The basic module of app is a single weibo that posted by a user. On the home page and “For You” page is the array of weibos posted by following people or recommend weibos. The video page shows only weibos with videos posted by other users that Weibo recommend to the user. Moreover, the hot search chart is also depended on every weibo. It calculated keywords’ frequency of appearance in weibos posted in real-time. Entering one of these hot searching keywords, the page is also composed of the array of weibos, which includes the keyword. Thus, Weibo uses three ways to distributed all kinds of contents in different pages, and the basic element is a single weibo.

  1. strive for consistency

First, the theme color of Weibo is orange, and the icon is a cartoon figure of an eye. In the operating interfaces, orange functional buttons are everywhere. The names of vip users are also orange. Secondly, Weibo creates its own identical terminology: “topic” and “super topic”. Words and short sentences can create their “topic” community, and fans can send posts with hash tags of the topic. The font design is the same as operating system. Normal literal contents are black. The “topic” contents with hash tags are blue, the same as the color of usual hyperlink. Weibo also keep the way of presenting contents in a same way: in a rectangular area, from the top to the bottom are name, literal content, pictures or a video, and “Repost”, “Reply” and “Like” buttons. Each rectangular area has a short interval. Users browse all the posts by sliding up and down.

  1. Seek universal usability

Weibo can learn from people’s preferences and recommend contents that the users may like. For a new user, who has not followed many celebrities and friends, Weibo will recommend many weibos for him or her, and quickly learn the preference in order to improve the recommendation’s accuracy. For intermittent users, Weibo knows them well, so they will receive many recommended weibos in “For You” and “Hot” pages, which offer them abundant contents. Weibo not only bring contents for users to read and watch, expert users will discover more communities and areas which lead them to make friends and have a chat group with other fans and even the celebrities.

  1. Offer informative feedback

Weibo offers feedback of users’ operations. Weibos on the home pages only show limited words and pictures, so if he or she wants to see the complete content, the user needs to tap the white background of the weibo. The feedback is that after tapping, the color of the background of posts will become deeper, and then it will transfer to the page of the full content of the weibo.

If the user taps the “Like” button, the color will also change from grey to red.

Moreover, every time after the user scrolling down the home page to refresh, at the top of the interface, it will present the informative hint saying how many new weibos are updated.  

The third example is that after a user tapped the button to download a picture, a hint message will appear in the middle of the screen telling the picture is already saved in the album of the smartphone.

  1. Design dialogs to yield closure.

When the user wants to post texts, pictures, or videos with the application, Weibo gives them a good series of guideline of how to operate step by step. To make it transparent, let’s suppose that a user wants to post a weibo with pictures and texts. First, he or she needs to tap the “add” button at the top right corner of the home page, and then there will appear a menu, so they can choose to upload a post, picture, or video. After choosing “picture”, it will jump to an interface that is connected to the photo album of the smartphone for the user to choose photos.

Then, he or she can tap the top right “next” button, the same as “add” button. Now the user coming into the editing interface, in which chosen pictures can be put on labels or stickers, cropped or adding some mosaic. The “next” button is still on that position. After completing editing pictures, the user can go to the next step.

In this new page, he or she can write descriptions of the pictures. Alternatively, if he or she wants to come back the edit pictures again, tapping the picture will guide the user back to the last step. The final step is to tap the “send” button, which is still at the top right. If the user wants to discard the post, the “cancel” button is just at the top left.

These key buttons that guiding users to move to the next step are all placed in the same position makes the processes of sending posts easy to follow.

  1. Prevent errors.

Weibo offers some interface design for users to prevent error. For example, a user can like a weibo by tapping the “Like” button. However, if he or she taps the button by mistake, they can click it again to cancel the “Like”. Moreover, when a user is editing the post, if he or she clicks “cancel”, then there will jump out an interface with three choices: “Save as a draft”, “Don’t Save”, and “Cancel”. These choices give the user the chance to save the content as draft or discard it. The more important is that “Cancel” gives him or her the chance to prevent the unintended error so that he or she can keep the content. If the user still makes some mistakes after publishing the post, he or she still has the chance to get rid of mistakes; however, Weibo only provides the function of editing a published weibo to vip users. It is not suitable for this function to be a rechargeable one. Since editing is such a general function for every user, and there is no other way for a non-vip user to edit a published weibo except deleting it and publish a corrected one. Otherwise, Weibo just wants to force as many users as they can to pay money to them.

  1. Permit easy reversal of actions.

Weibo offers many units of reversibility to users in order to improve their experience. Firstly, users can post or repost a weibo, and correspondingly they can easily delete them. They can follow other users and can unfollow them by easily tap the same button. Secondly, the main pages of the application are marshalling rectangular areas of weibos, and each area has many buttons. For users browsing them with a finger scrolling down continuously, unconsciously tapping buttons is a common phenomenon. However, whatever buttons users tapped by mistake, the actions are reversible. Maybe it will jump into the comment page, but the user can quit the page although it will cause abundant operations than expected. Maybe the user will click “Like” button by mistake, but he or she can tap it again to reverse it.

 

  1. Keep users in control.

Since Weibo created its mobile application, the arrangement of “Repost”, “Comment”, “Like”, these three buttons have never changed. It provides users of familiar convention of how to use the app’s most basic functions. The interface of editing a new weibo is also almost the same. Whatever the user needs to insert pictures or not, there is always a large area of blank area to type content. People are used to such interface, so weibo does give them the strong “sense that they are in charge of the interface and that interface responds to their actions.”

  1. Reduce short-term memory load.

As mentioned before, each weibo possesses a rectangular area, but both literal contents are summarized and only nine pictures can be presented, if there are more than nine pictures with the weibo, the remaining ones will be hidden. Thus, if the user wants to see the complete content, he or she needs to tap the white background, and it bring them go to the page of complete content of the weibo and its comments. In order to avoid short-term memory load, in the summarized version of the weibo, the nine present pictures will be loaded at first. Then on the page of complete content, these pictures do not need more time to load. The same information is used on one display and then on the other display.

Violations

  1. Unfriendly arrangement of advertisements

First, on the main page where should be full of weibos posted by following people of the user, but there are too many advertisements which have already prevented the user to normally enjoy the contents. Every seven normal weibos there will appear one advertisement weibo inserting in the array. These high frequency advertisements are disturbing for users who want immersive and continuous reading experience. On the “For You” page, which is full of recommended weibos, there are still insert advertisements. Format of these ads is quite like a normal weibo, the only difference is that under the name of the posting account, there will be a small icon saying “AD”. If the user does not read carefully, at the first sight he or she will take it as a normal weibo because they look so similar. It is a crafty way to push advertisements. Probably, the user will be interested in one picture of the advertisement weibo, so he or she taps it. However, it takes the user to another page, a page for advertisement. Then he or she finds out that it is a cheat. It is hard to say that such an advertisement can be defined as content that the user is interested. It is harder to say that using such a way to push advertisement is smart or annoying. The point is that, these advertisement weibos may cause unintended and unnecessary operations in order to come back to normal browsing page. “Time is precious,” everyone wants to complete their task smoothly, without externally imposed delays, even if the task is entertainment.

Second, Weibo designs the position of banners of ads easily to be tapped by users’ finger so advertisers can achieve more clicks. The page of complete weibo content should be composed of literal contents, pictures or videos, and comments. However, now Weibo inserts a banner of ads in the gap of media content and comments. The exact position of each ads banner is depending on the length of the content of the weibo. If the banner is coincidently placed at the position that the user usually swipes the screen to exit the page, then he or she will easily tap the ads out of expectation, which is quite annoying. This design violated the principle of “preventing errors”. Moreover, it caused unprecedentedly numerous errors to tap these advertisements by mistakes.

Third, advertisements will bounce out and cover more than half of the page, which frequently leads users tap it unconsciously. On the page for watching the video, the page is separated into three parts: the upper one is the window for video watching, the banner of advertisement is in the middle, and the lower one is a part for several elements including the literal content introducing the video, comments and recommended related videos.

After a user watching the video on this page over two minutes, there will bounce out an ads from the bottom and fill in the whole page except the area of the video. If at that time the user is just browsing the comments or recommendations, the suddenly appeared advertisement will be tapped by mistake. Moreover, if he or she watches the video in full screen, when going back to the original page, the advertisement will suddenly bounce out as well. Since in the video watching area the swiping right gesture is for video speeding, so people tend not to swipe on that area. However, all the other area is filled out by the advertisement, if the user is not careful enough, the way he or she swiping out will be identified as a tap. This will lead the application go to a new website. More seriously, it sometimes allows opening another application without the need of inquiry. It is so annoying that the user has to close several things in order to go back to the original page.

  1. Confusing partision

First, the home page includes two main subpages: one is for weibos posted by following people, the other is “For You” recommended weibos for the each user. However, on another main page, under the area of hot search, there are the hot weibos also recommended by Weibo for each user. These two kinds of pages have something in common, and it is hard for a user to tell the difference between their functions. Thus, Weibo should make it more clearly for users to browse recommendations, instead of giving users two similar things in different pages.

Second, two different video watching interfaces bring novice users a lot of confusion. The first kind is what mentioned before with three parts in the whole page. The other one is much alike the Tik Tok video watching interface. The whole background is black, and a landscape video is in the middle, or a portrait video filling out the whole screen.The introduction is at the bottom of the page, and the buttons of “Like”, “Reply”, and “Repost” is on the side.

It is well known that for watching a video on a portrait device, most apps share the same pattern of gestures to pause, start, and fast forward. However, in these two concurrently existing video watching interfaces, they do not share the same pattern of gestures. It is so confusing and annoying that the user should realize and learn to use different gestures to operate two kinds of video watching interfaces, or it will mess up the enjoyable mood of surfing a social media app. This is the violation of the first golden rule of interface design: strive for consistency.

  1. Illogical placement of buttons

First, Weibo changed the placement of “add” button, which leads users to post a new weibo. The change first made old users very hard to get used to it, and make mistakes frequently. The “add” button was in the middle of the bottom menu, the banner including five buttons guiding to five main pages. The placement is quite like instagram, and instagram is still using such a design.

Now the middle button is for “Discover” page, and “add” button is moved to the top right side of the banner of the home page. Moreover, it became much smaller than before. Thus, using the new version of Weibo, users always found out that when they want to post a new weibo, they made mistakes to tap the “Discover” page. However, on the “Discover” page, there is nowhere to find the “add” button, so they have to go back to the home page. After ensured that there is no button for adding a new weibo in the lowest banner, they will find out that what they want is on the top right corner.

This change of the placement of the button that users are so accustomed for year is such a bad decision. It violated the principle of “Keeping users in control”. Even expert users in such a situation will also find that the app is almost out of their control feel disappointed and annoying.

Second, placement of buttons on the right side of the interface causes many unintended tap. One example is the “Like” button, which is arranged with “Repost”, “Reply” under the content of a weibo, and “Like” is on the most right side. Most people are used to holding their smartphones with right hands and use their right thumbs to swipe the screen. The problem is that the “Like” button is just in the area that users mostly swiping the screen, so it is so often for them to tap a “Like” out of their expectations.

Sometimes they will quickly find out that they liked a wrong weibo, but sometimes they cannot realize it in time. It may not have some serious results in most cases. However, on one’s personal home page, there not only shows weibos you posted but also weibos you liked. Thus, if the user unconsciously liked a weibo that is not suitable to be presented to his or her followers, it is embarrassing.

Reasons for violations and how to revise them

The core problem of all these unfriendly interface design is that Weibo put more emphasis on something other than users’ experience. If Weibo wants to revise all these bad designs, put user experience in the first place is the most crucial thing that it needs to realize now. Whatever the app is for profit or non-profit, the user is so important that if nobody uses the app anymore, the app have to declare the death.

First, the placement of advertisements that guide users to tap them is for their commercial interests. Moreover, the high frequency of advertisements weibos is for achieving more advertisement and making more profits. It is understandable that an app needs advertisements to make money, but it need to present the advertisements in ways that are more acceptable. Now it is taking advantage of schemes to achieve more clicks, which is a consumption of users’ enthusiasm.

There are several ways to solve this problem. Weibo provides rechargeable vip services. Now, vip users are standing these annoying ads as other normal users. Actually, if reducing and hiding all ads should be one of the vip services, at least it will improve the experience of vip users. For other users who still need to be exposed to advertisements, Weibo should change their ways to present. Considering principles of interface designs, even if there should be some advertisement, they still need to be under the control of users. The first thing it needs to revise is every possibility that may lead unintended tap of an advertisement. Second, clearly telling user that it is an advertisement is important. An advertisement pretends to be a weibo is crafty and will arouse discontentment. Then, normal users have the possibility and chance to ignore these advertisements. Moreover, if it can make effort to the make advertisements more creative and interactive, that can reduce some detestation.For example, interactive ads in WeChat Moments are quite interesting. Some of them make users feel like they are interacting with the celebrities. These advertisements do not play a video automatically, only after users’ swiping the finger as the arrows present, it will jump to another page and show the whole video.

The logic is same to the design of “Like” button that is easy to be tapped when swiping the screen. It is a guess that Weibo wants user to be more active, so it hopes that there will be some unintended tapped “Like”, which can increase to data of numbers of active users. However, users do not want so many unintended operations. If Weibo really wants users to be more active, it should make the interface more user-friendly.

It is easy to solve the problem, taking Instagram and Facebook as examples, both of them do not place “Like” on such an embarrassing position. Instagram put “Like” and “Comment” on the left side. “Like” and “Comment” of Facebook are more close to be in the middle, and “Like ” is on the left side, so it will less be tapped by mistake. Whatever the placement of the banner of “Repost”, “Reply”, and “Like”, leaving the space for finger to swipe the screen is the essence of this interface design.

Second, repeated pages of recommended weibos is to provide more channels for those publishers to achieve more exposure and reading, so they can further achieve more followers, and more exposure. However, for users who read these recommended content, they cannot feel distinct differences between “For You” page and “Hot” page. These two pages need to be classified into one page, instead of being separated. It can remove the “For you” page to “Discover” page, and parallel it with “Hot” page. It will make the function of each page more clear.

As for the two different interfaces for videos, there are two interfaces because videos are uploaded on two different platforms. In Weibo, there are areas for short videos and original videos (longer than one minute). Thus, short videos will be present in the interface that like Tic Tok, with a black background, and original videos have a more specific interface to present detailed introduction, comments and similar videos. Because their interfaces and operating gestures are so different, they caused so many confusion and failure.

According to the principle of striving for consistency, these two kinds of videos should be presented in the similar interface. Whatever it is a short video or longer video, users only want to watch and enjoy it. If they can keep in the same interface, the experience will be much better. The interface with three partition of the page is better for all kinds of videos. Now Weibo wants to establish its own original video platform. It must keep the interface that can clearly show the introduction of the video. Moreover, the gesture operation of this version of interface is the same as other video watching app. The most important thing is that Weibo should remove the advertisements that will suddenly bounce out and fill out almost the whole screen. The advertisements that will fill the window of the video after finish playing the video is more friendly because at least, users have some safe space to quit the page.

Third, the “add” button loses its place in the lower banner is because of the appearance of “Video” button. Now browsing short videos is a very trendy way for people to socialize, and Weibo wants to join the market, so it especially created a page for video watching. There is no more space for a button in the lowest banner, so it moved “add” button away. However, the problem is that the distance between the original and new placements is too far away. Even for an expert user, it cost some time to find. Now users are getting used to this new placement of these buttons. The lesson that Weibo need to learn is that it should avoid such a big change on core interface design.

All these suggestions about how to improve the Weibo’s interface design is based on the consideration of user experience. There may be better ways to solve these problems. Solutions mentioned in the paper just work as possible ways. Hoping that Weibo can try to become better in interface design and offer better experience to users.

Conclusion

For any mobile application, focusing on its interface design and making it more friendly for users is an important step to success. However,Weibo, as one of the most popular social media application in China, with a strong and solid foundation of users, seems to gradually lose its core competition. The interface design becomes more friendly to their business interests. It is necessary for Weibo to go back to the right way to persist longer in the competitive market. That is, its users’ trust and pleasant. The paper first introduces how Weibo applies interface design principles to build a good application for users to enjoy their modern and smart social life. Then it shows how currently Weibo violated these rules and principles and cause more and more dissatisfaction of users. It needs to take them as an alarm. Now users are bearing these confusing and annoying designs, it doesn’t means they will bear them forever. Thus, it is significant for Weibo to win back users’ heart. They need to revise most of these bad designs. The last part of the paper is about some suggestions of how to solve and better them. These suggestions may not be the best answer, but it provide some thoughts that may bring better experience to users. Designing a perfect interface is impossible, but every application should try best and make progress with the changing trends of the time and generations.

 

References:

Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 4th ed. Boston: Pearson, 2005.

Ben Shneiderman, Catherine Plaisant, et al. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 6th ed. Boston: Pearson, 2016.

William Lidwell, Kritina Holden, and Jill Butler. Universal Principles of Design. Beverly, MA: Rockport Publishers, 2010.