The task of redesigning a Web page: Finding the right core data pixel rate

Article Description: clever use of "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 question, Rian borrowed Edward Tufte's concept 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's 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

1. Credit Card number Input box

2. Text marking

3, Payment sent press build

That's all. Web pages, of course, need headers, payment content, payment tips, credit agreements, and so on, but the core data is above 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: Design data pixels first

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. It is a kind of "silent credit guarantee" that makes people feel safe:

This "Silent Credit guarantee" can be applied to the 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, and the user's attention cannot be drawn 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 a 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: Color contrast with no support for visual inheritance

Fonts: A special font design that distracts 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 destination color can distract users)

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.

[1] [2] [3] Next page