User Experience Analysis: Micro-blogging component revisions

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

It's written in front.

Micro-blogging module is a micro-Bo open platform for Third-party users to provide access to the site does not need to develop the component products. The content of the microblog will be exported to the third party website, the users can interact with each other on the third party website, share the content, synchronize the information to the microblog, and improve the user activity of the third party website. The revision involves the number of micro-blogging components 14, mainly including friends selector, Publisher, sharing window.

Design process

With the previous product revision process is not the same, the revision is by UDC and product collaboration to launch demand, interactive designers to play the most subjective initiative, control Design Center output time, and brand vision, page construction, product and development efficiency communication, small step run to enhance a better user experience.

　　

Design Preparation

Find the problem (observe the user, mobile feedback, centralized grooming) (User objects: Developers and users)--analyze (combine scenarios, see nature through phenomena, combine data analysis with products)--solve problems (from whole to detail, solve problems with user needs)--continue to follow up

　　

Design principles of optimal experience following design process

Principle one avoids letting users think

Reduce the impact of the user to complete a "think" or "task" of the noise, reduce the fork, reduce multiple-choice, for the user as much as possible to reduce the operation; provide appropriate hints for disabled important controls.

As shown in the Picture Sharing window, the background directly preset text, and in accordance with the current page rich text information priority, high-quality priority of the principle of default choice for users as much as possible to reduce operations, reduce multiple-choice. When you enter an empty or super word, the share button is disabled, forcing the click to appear accordingly.

　　

At the same time, in order to avoid excessive user redundancy, you can provide personalized defaults, set personalized default selections for return visits, so that users can complete the form more quickly. This is because the options are often "sticky", that is, to retain the user's previous selection. The conclusion is that if the user input, it is worth the program to remember. The user switches between the micro-group and the microblog, and the background retains and remembers the user's previous input.

　　

Principle two level clear, reduce visual noise

Hierarchical relationship needs to be based on logic and information structure, and it needs to be reflected visually. But if you use too many wireframe, thick backgrounds, it can be confusing-and counterproductive. In fact, a simple indentation can be a hierarchical relationship.

The difference between two pixels

We can see the rich text area between the input box has two pixel indentation, because rich text element is more, but after all, is a whole, only two pixel can differentiate the level module, and do not need to add more visual elements, so that the page is too complex.

　　

The structure of the comment box

Before the comment box for flat structure, that is, comments and replies are all at the same level, at this time we often see a group of people like a chat record, browsing users it is difficult to understand who and who is talking about what kind of problem. After combing, we divide the comment into two levels, the first level is the comment on the content of the page, and the second level is the reply to the comment. As shown in the following figure, the reply to the comment is not displayed by default, and the 50px indentation after expansion to express a clear hierarchical relationship.

　　

Set hierarchy

Third-party components are used outside the station, often using scenes and environments that are difficult to measure one by one. But the common point is that the outside station is the gold, so for help class description class information we choose to put on the open platform. When developers want to use our products, they first need to understand what our products are and what they can bring to the developer. With such a foundation, after arousing interest, will further want to know how to use. So we split the whole page into three parts--description, benefits, and setup. However, the text will always make the extra do not interest, so why not help some simple and clear image of the description of the picture?

　　

Principle three habits is a good helper

Accustomed to the experience of the user in the site more process, without spending too much learning costs to familiarize yourself with the new interaction. Microblogging has such an interaction, when the input is empty or Word overflow, Force Click action Button, the background of the input box flashing to prompt the user input error. The same is true for microblogging products, and similar interactions are completely reusable. Because the user of the site's interactive mode has a certain understanding, at this time for the control interaction, do some appropriate porting, it may not be a good way to labor, but also to ensure the consistency of the interaction. So when we migrate the flashing error hints to the not-selected micro-group, the user is very good at understanding what to do next.

　　

Principle Four Instant verification

Do not use dialog boxes to report normal content. Because the dialog box is another room, there must be a good reason to go there. At the same time for the input of the account or password, need to display the error immediately, so as not to fill out the form to find errors, increase unnecessary operations. #p # subtitle #e#

When you log on to the Mobile Version Sharing window, enter a blank prompt

　　

Share to letters, filter friends prompt

　　

Share window input overflow bubble hint

　　

Principle five provides an appropriate input box (text box, radio button, check box, drop-down menu, list box)

Make sure that the length of the input box provides meaningful hints to help people answer questions effectively. If you can't provide a hint, try to keep the length of the input box as consistent as possible and provide enough space for the answer.

The input frame in the Micro-blog component (micro Bo Publisher, microblogging comment box, sharing window and other components), design-time input box height in the entire assembly can be considered consistent.

　　

Select the Drop-down control of the Micro group to select the appropriate size (15 Chinese characters) based on the maximum number of characters for the group name. There is plenty of space, so choose the length of the maximum number of characters to reduce the hidden tips that the character truncation brings.

　　

Principle VI offers different options according to different errors

The first step is to avoid some common error choices from the design, and then take the initiative to resolve each level of errors that may occur to ensure a higher percentage of users have a positive experience.

Tips for sharing to letters

　　

Principles of the seven-link birth to unequal

Need to differentiate links according to user needs, weak links and strong links in front of the show

　　

Principle eight use color to attract attention, use style uniform symbols

Color can draw attention to specific elements, especially when the color of an element contrasts with the other. We identified the important action buttons with more obvious colors.

　　

Users prefer graphical things rather than simple text.

　　

Use a uniform style symbol.

The law of similarity (the principle of similarity) refers to objects that have similar characteristics (such as size, color, shape, direction, etc.) that are grouped together by the observer from a perceptual and cognitive perspective.

The law of proximity (the principle of proximity): Observers see objects close to each other (space or time) as a whole and consider them to be of similar meaning.

　　

Principle IX is consistent and considers standards, but consistency does not imply rigidity

The specification is very much emphasized in many projects, especially the big projects. It can be used to circumvent the differences between different designers ' design styles and other reasons, resulting in the confusion of experience. At the same time, in the version of the handover and new entrants, the norms also have a very important role. Specifications are instructive, but we do not need to adhere to the limitations of the specification and ignore user scenarios. We need to keep the site consistent, but that doesn't mean it's rigid. Before designing, consider the criteria, and if there is a change, the premise is to need a better reason. As shown in the following figure, the action button on the component is grayed out before it meets the set fire conditions, forcing a click prompt, such as sharing. However, in the design of the comment box, we consider that the comments content is entirely user-original, with a certain cost of input. We want to stimulate users to have comments on the behavior. At this point, the action button should be activated to stimulate the user's action. #p # subtitle #e#

　　

　　

Brand Visual experience Promotion

The overall visual revision, carding from the product, users and other aspects of the views and needs. But the proposal was not as smooth as it had imagined. In the course of the project, we also have a lot of aircraft drafts. For example, as a result of the first micro-component visual positioning bias, in the face of the external components attached to the microblog, we just started blindly try to go the unified route. Do not jump out of the set, hard work, resulting in many of the middle of the program are stillborn. In the Medium brand group @ Wang Shi hit fervent's intervention, absorbing experience and lessons, and combing the micro component's visual positioning and style.

Style words: Weibo;

Standard color: red, orange

　　

Brand Specification:

　　

Auxiliary Graphics:

Auxiliary graphics is an integral part of the brand recognition system. The concise triangle is taken from the identified arrow keys. Random combination, maximizing the compatibility and extensibility of auxiliary graphics. To the application design with maximum freedom. The so-called recognition is better than recall the memory of things better than the recollection of things.

Examples of secondary graphics applications:

　　

　　

　　

More Elegant Code

Before the component division is in the form of code, divided into IFrame and JS-SDK. Because the product is an iterative update, and Third-party Web site call number js-sdk form of code is not able to obtain the product update, which brings a lot of maintenance problems for product optimization. At the same time, JS-SDK code fields generally in the performance level is relatively long, because the IFRAME component is to encapsulate the code into a package, the third party directly call it, and the JS-SDK code is all a level; The long code will have a corresponding impact on the experience of the website.

Based on this background, Wbml was born.

What is WBML?

WBML (Weibo Markup Language) is a simple markup language created by Sina Weibo JSSDK, which allows users to use WBML to embed components in a Web page (Weibo Widgets), and you can continue to use an IFRAME or JS call mode, Support is still available.

Simple is a line of JS code, quoting a line of code (that is, the IFRAME wrapped in the inside)

Why use WBML

Easy way to deploy code, one line of code can call the component

Label semantics of the parameter customization method, more convenient to use.

Better than IFRAME loading speed

Example

Take the most shared button for example, the current invocation mode:

</pre>     <script charset= "Utf-8"  type= "Text/javascript" >//<! [Cdata[(function () {  Var _w = _h = +   Var param = {  Url:location.href,   type: ' 3 ',   Count: ' 1 ',  /** Show share number, 1 display (optional)/  Appkey: ',  /** your application Appkey, show sharing source (optional) */  title: ',  /** share the text content (optional, default is the title of the page) * * *   Pic: ',  /** share the path of the picture (optional)/  Ralateuid: ',  /** the UID of the associated user, Share Weibo @ This 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>  <pre>

With WBML, one line of code can be invoked:

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

Change the parameters and pass in the tag mode

</pre> <wb:share-button language= "ZH_TW" ></wb:share-button> <pre>

Finally, thanks to @eason-shao for my guidance, @ a Bingben @ Wang Shi fervent @ Liu Ming Master design, @ Young monkey wild @ice wood-Tree page and God-level product development.

(Weibo UDC original blog, welcome to reprint and note the source, welcome to subscribe)