Skillfully using "core data pixel" to create a brilliant user interface design

Guide: Update a Web interface, redesign and packaging it can have a number of different scenarios. The author Rian van der Merwe that in the process of repackaging, we must first affirm the user needs of the Web page, look to the overall trend of the market, strategic brand positioning. The redesigned programmes and concrete implementation are to serve them. The risk of repackaging is that the updated Web page loses the navigation and experience that the user has adapted, familiar, and approved. In the aesthetic improvement of the same time, lost loyal to the old version of the experience of users. Because of the existence of such a risk, the direction and purpose of design need to be carefully grasped. Is there a low risk solution to ensure aesthetics? With this problem, Rian borrowed Edward Tufte's idea of "visual information" and put forward concrete practical plan.

Edward Tufte and his data-imprinting theory

The author has been interested in Edward Tufte's visual data theory. The visual presentation of the visual display of quantitative information/quantitative information is one of the author's favorite books, from which he found the theory that Web design can be used for reference.

In Edward Tufte's book, his core theory is the concept of data-imprinting:

Data imprinting is essential to the core of the image, and data changes and trends are presented through the arrangement of the indelible imprint.

Tufte's theory is applied to the data icon and quantitative information display, the author is to borrow his theory to help solve the problem of web design. So, Rian proposes a data-imprinting concept: Data-pixel: This Web design data imprinting theory. In web design, we can think of data pixel is the simplest unit to guide the user to browse. These pixels form the ' focus mode ' of the screen, which guides the user's Web navigation.

A simple example: in a payment interface, the core data pixel is

Credit card number input box text label payment Send press Build nothing more. Web pages, of course, need headers, payment content, payment tips, credit agreements, and so on, but the core data is 3.

From ' Core data ' you can add other content. This is the theory of Tufte. To ensure the dominance and prominence of core data pixels, as well as the beauty of the Web, the author believes that the task of redesigning the Web page can be structured to find the right "core data pixel rate".

Guideline 1: First design data pixel

Updating a Web page, the guiding theory is that every page should focus on core data and what you need users to do to guide the core data. Other data pixels are noise and need to be considered only after the core data pixel is well designed. The concept is mentioned in the Craig MoD article, "The image of our future book": he describes the Kindle's design (compared to the ipad) that wakes up from sleep. A sense of security is a "silent Credit guarantee":

This "Silent Credit guarantee" can be applied to data. Specifically, when designing the user experience, the way we present the data should not make the user feel that they are intentionally reading or using the data.

This is not to imply that a tedious design or aestheticism is unimportant. This means that we need to take into account that any design attached to the core pixel is the core function of the service, rather than attracting the attention of the user to these ancillary designs.

Photo: Sarah Blake

Guideline 2: Reasonable reduction of non-core data pixels

On the basis of core pixel, add auxiliary pixel, how to find reasonable core pixel rate?

The first step is to remove the non-core pixel-non-core pixel, which is the design part of the page element that does not serve the main function of the Web page. These pixels do not guide the user to use the main features of the Web page, specifically:

color: Does not support the visual inheritance Color contrast font: Special font design, will distract the user's attention. Segmented images: Avoid the use of transitional images, as far as possible with white space to separate paragraphs and functional intervals naturally. Page layout: Paragraph alignment, font size and color contrast: avoid unnecessary intentional design. (for example, an end indent, a larger icon, or a purposeful color can distract the user's attention)

If you visit the Dohome page, the disadvantage of this distracting design is obvious. The reflective design on the navigation catalogue, without a clear purpose of the image, leads to the result that there is not enough content to make people at a glance what it is doing.

By contrast, MailChimp's core data pixel rate is well grasped. Concise introduction of the function of the Web page; A large block of input boxes and a clear indication of the text label to ensure that users can quickly fill out the registration page; Accurate text prompts to tell you the specific content of the registration; Then register to build against: big, contrasting colors.

Extreme examples like Squarespace's: The registration page removes all possible distractions, ensuring a 0 chance of distraction and a significant increase in registration success. On the login page, once the user clicks "Register", the background pattern disappears completely, as shown in the figure: 0 disperse

Google + is also a typical example of a "non-core pixel minimization" design. As Oliver Reichenstein said:

Designing a concise user interface is very difficult: clean, no extra lines, frames, and decorations. The inheritance of the content is clear, with color accurate, consistent.

Here are a few sites to specifically describe the implementation of this abstract concept: must accurately analyze visual elements. Remove distracting pixels.

Guideline 3: Reasonable reduction of duplicate data pixels

"Duplicate data pixels" refers to visual elements that are repeatedly repeated without reason or destination.

As shown in the picture, the following table is an hourly parking price list. A good design should be a line of words "10 yuan/hour". Web design to be able to summarize the content of the Web pages and make them concise, beautiful presentation.

How do I identify the necessary repetition? Back to our previous Payment page instance, if the page is too long (requires scrolling), there must be two "pay" on the design. One is at the top and the other is at the bottom, which can improve the user's efficiency and avoid unnecessary scrolling. In summary, repetitive information can be used to emphasize brand commitment and improve user efficiency, that's all.

Guideline 4: Reasonable maximization of data pixel rate

Every pixel has a reason to exist, and the reason is that it contains new information

–edward Tufte, the visual display of quantitative information/quantization information

When the design has eliminated noise pixels and repeats pixels, the next thing to analyze is whether to omit the core pixel.

Adding pixels to a design must be justified, usually the information and functionality necessary to improve user efficiency. For example:

Prompts the user for the visual elements of the page: After several times, the user can easily find information. Aesthetic design: color, font and page layout-ensure consistency between brand recognition and Web presentation. Appropriate tips: Guide users to use page features.

A good example is the wrong hint between the lines. Let's take a look at Quora's registration page: The page design is simple, without distracting pixels. When you enter a name, the error message prompts you to "enter the full name." In other words, can be used as prompt text "Please enter full name", now only in the input error display, streamlined page design, and improve the use of efficiency. And this real-time detection of user names, but also improve the efficiency of the background.

Here is a comparison of the front and back design of a page after "Data pixel" identification (let's take a look at kalahari.com)

First find the non-core pixels on the page: the curvature of the lower left, the navigation directory is too bright, distracting, and so on.

The author then uses the "core data pixel" approach described here to put the attraction in the core function: Search. The following figure is the result:

Guideline 5: Edit and revise

Finally, designers need to revise their final design products based on the above 4 steps. User interface design can be said to be a continuous progress of the process, hope that through the accumulation of each revision will eventually be able to launch a perfect product.

Summary

The author concludes that he doesn't deny that there are many different ways to update his web design, but the hardest part is how and where to start. This article can be used as a design outline for web designers to refer to.

The data-pixel approach to improving User experience–smashing UX-by-Rian van der Merwe

Source Address: http://blog.jobbole.com/6454/