A detailed introduction to the redesign of the Weibo component on the website (pictures and text)

Things about Weibo component revision 123WORDPRESS.COM

Written in front
Weibo components are component products provided by the Weibo open platform for third-party access users to achieve website access without the need for development. Output Weibo content to third-party websites, where users can interact with Weibo, share content, and synchronize information to Weibo, thereby increasing user activity on third-party websites. The revision involves 14 Weibo components, including the friend selector, publisher, sharing window, etc.
Design process <br />Unlike previous product revision processes, this revision was initiated by UDC and product collaboration. Interaction designers exerted their maximum subjective initiative, controlled the output time of the design center, communicated with brand vision, page construction, products and development efficiency, and took small steps to improve a better user experience.

Design preparation <br />Find the problem (observe users, mobile phone feedback, and organize it in a centralized manner) (user targets: developers and users) - analyze (combine scenarios, see the essence through phenomena, and combine data analysis with products) - solve problems (from the overall to the details, solve problems in combination with user needs) - continue to follow up

Optimized experience design principles followed during the design process
Principle 1: Avoid making users think
Reduce the noise that affects the user's completion of a certain "thinking" or "task", reduce forks, reduce multiple-choice questions, and minimize operations for users as much as possible; provide corresponding prompts for disabled important controls.
As shown in the sharing window, the background directly presets the text and selects by default according to the principle of giving priority to rich text information and high quality on the current page, so as to reduce the number of operations and multiple-choice questions for users as much as possible. When the input is empty or exceeds the word limit, the share button is disabled and a forced click will display the corresponding prompt.

At the same time, in order to avoid too many redundant operations for users, you can provide personalized defaults and set personalized default selections for returning users so that users can complete the form faster. This is because options are often "sticky", meaning they retain the user's previous selection. The bottom line is that if it's worth the user's input, it's worth the program remembering. When users switch between WeChat groups and Weibo, the background will retain and remember the user's previous input.

Principle 2: Make the hierarchy clear and reduce visual noise <br />The hierarchical relationship needs to be based on logic and information structure, and also needs to be reflected visually. But if you use too many wireframes and thick backgrounds, it will be dazzling - which is counterproductive. In fact, simple indentation can show the hierarchical relationship.
The difference of two pixels: We can see that there is a two-pixel indentation between the rich text area and the input box. Since the rich text has many elements, it is a whole after all. Only two pixels can distinguish the hierarchical modules without adding more visual elements and making the page too complicated.

The structure of the comment box <br />The comment box previously had a flat structure, that is, comments and replies were at the same level. At this time, we often saw chat records similar to those of a group of people together, and it was difficult for browsing users to understand who was talking about what issue. After sorting, we divided the comments into two levels. The first level is the comments on the content of the page; the second level is the replies to the comments. As shown in the figure below, the reply to the comment is not displayed by default. After expanding, there is a 50px indent to express a clear hierarchical relationship.

Setting level <br />Third-party components are used on external sites, and the usage scenarios and environments are usually difficult to estimate one by one. But the common point is that space on external sites is very high, so we choose to put help and instruction information on open platforms. When developers want to use our products, they first need to understand what our products are and what they can bring to developers. With such a foundation and interest aroused, you will further want to know how to use it. So we divide the entire page into three parts - description, benefits and settings. However, words always make people uninterested, so why not use some simple and clear pictures to illustrate it vividly?

Principle three: Habits are good helpers <br />Habits make the user experience on the website more streamlined, without spending too much learning costs to become familiar with new interactions. Weibo has such an interaction. When the input is empty or the number of words overflows, the action button is forced to be clicked, and the background of the input box flashes to prompt the user that the input is wrong. Since they are both Weibo products, similar interactions can be completely reused. Because users already have a certain understanding of the website's interaction mode, doing some appropriate transplantation of control interactions is a good way to save effort while ensuring the consistency of interaction. Therefore, we transplanted the flashing error prompt to when the micro group is not selected, so that users can easily understand what to do next.

Principle 4: Instant Verification
Don't use dialog boxes to report normal content. Because the dialog box is another room, you need a good reason to go there. At the same time, errors in the account or password entered need to be displayed immediately to avoid discovering errors after the form is completed, which would add unnecessary operations.
When logging into the mobile version sharing window, the input is empty.

Share to private messages, filter friends and get prompts in time

Bubble prompt for overflow in the sharing window

Principle 5: Provide appropriate input boxes (text boxes, radio buttons, check boxes, drop-down menus, list boxes)
Make sure the length of the input field provides meaningful cues to help people answer the question effectively. If you can't provide a hint, try to keep the input field length consistent while providing enough space for the answer.
The input box height in Weibo components (Weibo publisher, Weibo comment box, sharing window and other components) can be considered consistent in the entire component during design.

The drop-down control for selecting a micro group selects an appropriate size (15 Chinese characters) based on the maximum number of characters in the micro group name. At this time, there is ample space, so the maximum length is selected to reduce hidden tips caused by character truncation.

Principle 6: Provide different options based on different errors <br />First, we must avoid some common wrong choices from the design perspective, and then actively solve possible errors at each level to ensure that a higher proportion of users have a positive experience.
Tips for sharing to private messages

Principle 7: Links are not created equal. Links need to be differentiated according to user needs. Weak links and strong links should be displayed on the front end.

Principle 8: Use color to attract attention and use symbols of a consistent style <br />Color can draw people's attention to specific elements, especially when the color of a certain element contrasts with other colors. We mark important action buttons with more obvious colors.

Users prefer graphical representations rather than text.

Use consistent symbols.
The Principle of Similarity: It means that objects with similar characteristics (such as size, color, shape, orientation, etc.) will be grouped together by the observer from the perspective of perception and cognition.
The Principle of Proximity: Observers who see objects that are close to each other (in space or time) will perceive them as a whole and believe that they have similar meanings.

Principle 9: Be consistent and consider standards, but consistency does not mean rigidity
Standards are emphasized in many projects, especially large projects. It can be used to avoid confusion in experience caused by different interactions and styles due to inconsistent design styles of different designers. At the same time, standards also play a very important role in the handover of versions and the joining of new people. The specifications are instructive, but we do not need to stick to the limitations of the specifications and ignore the user scenarios. We need to keep the site consistent, but that doesn't mean rigid. Before designing, consider the standards and if there are any changes, a better reason is needed. As shown in the figure below, the operation buttons on the component will be grayed out if they do not meet the focus conditions, and a forced click prompt will be displayed, such as sharing. However, when designing the comment box, we took into account that the comment content is completely original to the users and has a certain input cost. We want to stimulate users to comment. At this time, the operation button should be activated to stimulate the user's operation.

Improve brand visual experience
This overall visual revision sorted out opinions and demands from various aspects including products and users. But the proposal was not as smooth as expected. During the project, we also had many aircraft drafts. For example, due to the deviation in the visual positioning of micro-components at the beginning, when facing the off-site components attached to Weibo, we just tried to take a unified route. Failure to break out of the status quo and working hard resulted in many intermediate plans being stillborn. In the mid-term, the brand team @王史撞Strong intervened, learned from experience and lessons, and reorganized the visual positioning and style of the micro-components.
Style words: weibo; young; platform;
Standard colors: red, orange

Brand Specifications:

Auxiliary graphics :
Secondary graphics are an integral part of a brand identity system. The simple triangle is taken from the directional pad on the logo. Random combination maximizes the compatibility and scalability of auxiliary graphics. Give maximum freedom to application design. The so-called recognition is better than recall. The recognition memory of things is stronger than the recall memory of things.
Examples of auxiliary graphics applications:

More elegant code The previous components were divided into iframe and js-sdk according to the form of code. Since the product is constantly iterating and updating, third-party websites cannot obtain product updates by calling js-sdk code, which brings many maintenance problems to product optimization. At the same time, the code field of js-sdk is generally longer in terms of performance. This is because the iframe component encapsulates the code into a package, which can be directly called by the third party; while the code of js-sdk is all at one level; too long code will have a corresponding impact on the website experience. Based on this background, WBML came into being. What is WBML?
WBML (Weibo Markup Language) is a simple markup language created by Sina Weibo JSSDK. It allows users to embed Weibo components (Weibo Widgets) in web pages using WBML. You can also continue to use iframe or js calling methods, which are still supported.
Simply put, it is a line of js code, quoting a line of code (that is, wrapping the iframe in it)
Why use WBML
Convenient and simple code deployment method, one line of code can call the semantic parameter customization method of component tags, which is more convenient to use.
Better than iframe loading speed example Taking the most used share button as an example, the current calling method is:

<script charset="utf-8" type="text/javascript">// <![CDATA[ (function(){
var _w = 72 , _h = 16;
var param = {
url:location.href,
type:'3',
count:'1', /**Whether to display the number of shares, 1 is displayed (optional)*/
appkey:'', /**The appkey of the application you applied for, showing the sharing source (optional)*/
title:'', /**Shared text content (optional, defaults to the title of the page)*/
pic:'', /**Path to share the picture (optional)*/
ralateUid:'', /**Associate the user's UID, share the microblog will @ the user (optional)*/
language:'zh_cn', /**Set language, zh_cn|zh_tw (optional)*/
rnd:new Date().valueOf()
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
// ]]></script>

After using WBML, one line of code can be called:

<wb:share-button></wb:share-button>

Change the parameters and pass them in as tags

<wb:share-button language="zh_tw"></wb:share-button>

Finally, I would like to thank @Eason-Shao for his guidance, @阿bingben @王史撞Strong @刘明 for their masterful designs, @青春的猴小野 @ice木木 for their awesome web pages and the god-level product developers.
Source: Weibo UDC

<<: Implementation of MySQL Shell import_table data import

>>: CSS controls the spacing between words through the letter-spacing property