Web Interaction Design Method: The common way of page expression

The common way of page expression is part of the entire Web interaction design method:

Designers in the design of the page, should be on the page to establish a number of visual levels, to guide the user's visual focus. Draw the attention of the user to the most important elements, and then steer the line of sight to other, less important, information. This makes it easy for users to quickly and easily find their own needs, better completion of reading, browsing tasks. Here are some common ways to express several pages.

First, the page's browsing order

The user scans the page when the line of sight tracking, which is called "visual flow." Good design allows people to flow along it in a smooth order. People's general habit is from left to right, from top to bottom.

From left to right, top to bottom: For a long time, users have been accustomed to reading from left to right, from top to bottom, so when the page design we need to let viewers look at the text from a direction, the user's eyes from left to right, from top to bottom, this will be faster and more effective. Don't let the text flow like this:

This arrangement is also possible, still from left to right, top to bottom:

button to the right:

Upper left corner first: in the following figure, the higher the brightness, the more concentrated place, indicating the more attention:

From top to bottom, left to right is the default visual flow direction. The intense focus will attract the eyeball first, then the secondary information.

Therefore, in the browsing order by the front, the position, that is, the first seen position, is easy to focus on and memory of the place, that is, "upper left corner first". Because people often don't have enough time to browse the Web, or stop browsing or connect to other pages quickly after they get the information they need, the upper left corner is often the visual focus.

Snap To

In the design of content typesetting, aligning the content to the right creates a good double boundary that extends down the middle of the group of objects (using the Gestalt principle-the continuity principle), and the benefit is to strengthen the boundary to guide the reader's vision to a smooth downward extension that helps to form a good visual flow. The following figure:

In the form design, this is also true. The ability to align the operation area will greatly enhance the user's efficiency in accomplishing the task. However, it is also noteworthy that alignment is left-aligned or right-aligned. According to research, the blank area between the label and the input box aggravates the user's cognitive burden (cognitive loading), and the user must spend a considerable amount of time moving the line of sight between the label and the input box:

During the operation, the user is more concerned about the input box itself than the label. User eye focus transfer speed is very fast, and even if you do not read the label from scratch can understand its meaning. But people are used to writing from left to right, so this right-aligned layout creates subtle reading barriers for users:

The advantage of this form of placement is that the user can see the label and its corresponding input box at a glance without worrying about the additional burden of the user reading the tag:

Second, the big characters more prominent

The main function of the text is to convey the author's intention and all kinds of information to the public in the visual communication, in order to achieve this goal, we must consider the whole appeal of the text and give the person a clear visual impression. Therefore, the design of the text should avoid miscellaneous messy, make people easy to recognize, easy to understand, should not be designed to design, forget the basic purpose of writing design is to better and more effectively convey the intention of the author, the expression of design themes and ideas.

In the processing of page text, hierarchical relationship is very important. Our eyes are often drawn to thick, contrasting images, while large, bold fonts show its importance and thematic thinking. In font contrast, the larger the font, the more important it means. For headings, it's common to distinguish between a prominent font and other content-bold, widening, enlarged font size, strong color, and so on (black and white pages are the strongest contrast, and vice versa). The second is the plain font, which is a further description of the topic. The small print of the instruction and annotation section is more important, telling us: You may want to read it, but it doesn't matter if you don't see it. Also note that all the text in the picture should be legible and readable.

Third, the graphic more attractive

The interface requires a certain graphic support, which will make the product more attractive. Graphics can convey the personality of a variety of products, such as: safe and reliable, exciting, fun, vibrant, comfortable and pleasant, calm, strong, nervous, etc., this is the emotional appeal. Donald Norman (Tang Norman) believes that one of the most important factors in product design is the "pleasure" (enjoyment) ingredient that makes people feel happy and interesting. "Positive emotions enhance creativity and breadth-first thinking, while negative emotions focus on cognition, enhancing depth prioritization and minimizing interference," he said. "Positive emotions can make people more tolerant of difficulties and become more flexible and creative in finding solutions." "A certain level, does not affect people in the interface to complete the task efficiency under the premise, moderate decoration, beautiful details will affect people's mood to use products, guide people to stay and explore more time, and even recommend to others."

Graphics need to reduce the cognitive burden. In fact, the original text from graphics, based on natural form, so by contrast, simplified, smooth, schematic accurate graphics can reduce the cognitive burden, so that users do not need to read a text, so more user-friendly than the text to identify, understand and memory. But graphic design must follow the simple rules: you want your users to notice the products, services, and information you provide on your site, rather than the exquisite design of your site. Too much decoration will interfere with user actions.

Four, the animation will be mistaken for advertising

The dynamic flash on the page is a great draw for people's attention. Adobe's animation technology makes the Internet more powerful, from the Nike company's very exaggerated homepage animation to the Web pages used by many advertisers banner. But the animation technology has now been abused, allowing users to see the animation by default is an advertisement, a person who is interested in the content of the page, or often browsing the web, may quickly and easily skip the animation section. So in the page design, should use Fiash animation as little as possible, too much animation not only not practical but also slow down the user's Web browser. Especially a page full of ads that will make it impossible for your target audience to read and abandon you.

V. Content logic: coordinate relations, subordinate relations

People tend to like organized visual information, logic clear, structured, rigorous content can help fast and easy to read. Here we mainly introduce the "tie-side relationship" and "subordinate relationship".

Coordinate relations: The juxtaposition of the same important information is listed in sequence, there is no level relationship. The logically related part is also related to the visual expression. For example, divide the similar content into groups, place them in the same heading, display the information in a similar way, and place them all within a well-defined area.

In the form of expression, often used methods are: content indentation, position or white, wireframe or grouping (lines, boxes, color bars).

Content indent:

Position or stay white:

Wireframe or grouping: (lines, boxes, color bars, and so on):

Dependencies: A dependency relationship means that a information is all contained within B information, or that a information is attached to B information. It's like the relationship between the title and the body, so a information is a subset of B information. In the figure below, "space hotspots" contain "log picks," and they are subordinate relationships. and "Log Select" contains 6 article names, they are also a subordinate relationship, which is what we call the relationship between the body and the title.

Here, b information can also be a few of the content of a parallel relationship group composition. Such as:

Six, a number of parallel information

Multi-coordinate information, because of the continuity of vision, mixed together easily create confusion. We can use some tips to differentiate them. For example, add a small icon to the contents of a side-by-side message, or distinguish between the sorts:

Vii. different sorting methods vs. filtering

Here we need to explain the meaning of the two nouns first. "Sort by"-refers to rearranging each information in a file into a new record sequence by numeric values (such as number of participants, clicks, etc.), or in ascending or degradation order of an attribute (such as heat). "Filtering" refers to a process of selecting a particular character by a predetermined target in multiple messages. They all have a "further" relationship, but the sort does not change in number, and "screening", because it is a further refinement of specific conditions, is likely to result in a reduction in quantity. Such as:

Sort:

Screening: