Web site user Experience Design: efficient design visualization

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Every day, people drown in the ocean of information. In the process of active acquisition and passive acceptance, users always avoid the demand of "efficiency". In this information ocean, what kind of dilemma are users facing?

Some design details of the "hidden", "folding", "progressive" design consumes the user's rapid cognitive appeal;

The complexity and the huge function, to the interface presents a burden, aggravating the user Operation mapping confusion, so that users understand also ambiguous;

Design too many operation clicks, the user hand muscle keeps moving, switch different page to view;

...

As a designer of information transmission, how to make the information more intuitive and clear, eliminate uncertainty understanding, is the most important work. and "Visualization" is a variety of efficient transmission of information in a way, for information visualization, visual, graphic, but also become a design circle hot hold of the point of view and research direction.

For the visual design of the product, the main purpose is to express and communicate the information clearly and effectively, and to form efficient function, use mapping and accomplish the target of the user's task. Select the right interface element for the task that the user wants to accomplish, and display it on the page through a quick understanding and easy to use expression, reducing the user's cognitive burden and physical burden. It is divided into four levels: function visualization, structure visualization, Operation visualization, control visualization.

Function visualization: That is, to determine the priority of the requirements of the premise, to ensure that the high priority of the function to show the user, so that users easy to identify and find, so that the design has the right level of structure. The user's understanding of the level of information requires two processes, first, fast capture, followed by a more detailed understanding of the specific content. In the fast capture stage, the time span is short, and the main function points of the product are highlighted through the application of color, contrast and positioning. For example, Figure 1 South Korea's famous portal/Search engine website Naver's Naver Shopping, its product positioning is to provide product search services, by searching for product names, can be listed in accordance with the category of goods almost all of Korea's large E-commerce site to provide the link to the product. So in the interface, use strong contrast tones to highlight the search function and navigation area. Through visual guidance, so that users focus on the core content, focus on the focus of the user's attention, in the white-dominated page, the line of sight will see the strong tonal part, so you can also use strong tones to highlight the core content, so that the user's visual focus there.

Structure Visualization: The user is easy to understand the structure, so that users of the interface elements of a clear relationship. such as Baidu Statistics 3.0 Search Promotion effect view, the structure uses the funnel the graph way, achieves the true chart to the meaning, expresses the conversion rate the concept, the image is intuitive.

Process visualization: Let the user do not lose direction in the operation, help the user to locate, avoid the high cost of ambiguous operation. American Puzzle game website Lumosity, in the establishment of the process of customized brain training program, the top of the step axis of the graphical way, not only with the icon "red circle" to indicate the location of the user, but also with the icon "check" to indicate what steps the user completed, so that users of the entire process familiar.

Control visualization: Because the control is the product of the minimum interface elements, is the basis of product quality, so the focus of this article with you to share some of the basic control visualization cases.

A control is the primary building block for creating an interface, the most direct object that a user can interact with to enter or manipulate data. Control requires the user to consume a lot of attention and mouse operations, from a visual perspective, the design differences for the following four elements are:

Control element One: Radio box

The Radio box (Radio button), also called an option button or radio button, allows the user to select from a set of options and only one of the controls to be used, and the options are mutually exclusive.

Figure 4 A product interface, control the use of the single box error, while the user must imagine the space in the brain, and then converted to the corresponding text, click two times, enter two times to complete.

Figure 5 After the revised graphical expression, intuitive, and reduce the number of clicks (once), when the user input margin, the corresponding margin in the graph will appear dynamic triangle, give the user guidance, to prevent users to lose the wrong.

Control element Two: Drop-down list control

The Drop-down list (drop-down list) is relative to the radio box and is used to select an option from a list of mutually exclusive values, and the number of buttons in the Drop-down list is usually higher.

Figure 6 for the new Drug query system Drop-down List filter control, through the drug shape, color, type, etc. to screen, for users, the cognitive cost is high, not enough visualization.

Figure 7Naver Medical drug search and filter control, the brand, drug shape, color, drug materials, medicine, texture, etc. through the graphical expression, so that information more intuitive, more interesting form, enhance the user's cognitive ability, improve operational efficiency, a collection of interesting and practical. A picture wins thousand words, but at the same time want to balance space occupy and page load cost and so on factor.

Control element Three: Tree control

A tree control is one in which the user browses content arranged hierarchically and interacts with the content to make a single or multiple selection of controls.

Figure 8 Taobao Mall _ Kitchen Utensils Level Two page tree filter control, such as the user to find the pressure cooker, for the general novice users, will be clicked back and forth kitchen/catering equipment subcategories, expand subcategories, and then scan each line of words whether there is a pressure cooker, until the confirmation found. The more information that is hosted by a tree control, the heavier the burden of cognition, and the more difficult it is to browse and find. Novice users may not be able to fully understand the layout of the tree, and only if they have been working on the tree for a period of time may form a mental model of their relationship, with a higher cost.

Fig. 9 Naver shopping_ Kitchen Appliances category Two page classification screening, using the form of the icon plus text, the same is to find the pressure cooker, although it is Korean, but the appropriate use of the icon to make the user basically understand, can shorten the user operation time, so that users more quickly find the target link. For senior users, more familiar with the site, the icon is more convenient.

The design of the software is mainly aimed at the difference between the intermediate level users, and the Web interface design needs to be aimed at novice and primary users. Users on the site willing to pay for the learning costs are lower, more impatient, the Web interface needs to be more direct, so that the user's cognitive process is shorter. And the text itself does not have visual communication function, the appropriate use of icons, to describe the function of visualization presented to the user, you can shorten the user's operating time, often better results. But also according to user efficiency, otherwise it will become chicken ribs.

Control element four: List view

List view is an extended list box control that displays a collection of items that you can use to view and manipulate a collection of data objects, either in a single or multiple selection manner.

Fig. SNS commonly used friends grouping and management, using the list of the way, list directory clear, but the user of their choice of management costs slightly larger, especially for batch management complex.

Figure Google + "circle", see more intuitive, bulk management operation is also simpler, by dragging and dropping the user group, emphasizing on the less hierarchical management of friends, to ensure that the page concise, so that the experience become interesting and cute, more in line with the user's psychological model.

In short, around the "fast, clear, efficient" information transfer positioning, revealing its fundamental from the functional modules, task flow, interface control elements, information load and other aspects to enhance the effectiveness and rationality of the experience, in the design according to the target audience's needs, behavior, reasonable use of visual methods to make the product easier to use, improve the user experience.

Source: Ueo

Original: http://ueo.baidu.com/?p=1126