Establish a clear visual hierarchy and clear identification of areas that can be clicked

Web page Production WEBJX article introduction: designed for scanning.

When we design a page or a banner, often try to think of ideas, or the effect of doing very cool, but overlooked some user habits. What I'm talking about here is something that everyone knows, but it's often easy to overlook-- designed for scanning .

Users are good at scanning, and diligent scanning. WHY?

1. Busy- Most users spend very little time reading a very large number of pages, in order to improve efficiency, they will be scanned for most of the pages of the way, hastily skimmed. They cannot and have no time to read all the information that the Internet brings to them.

2. The goal is clear-- most users have a goal to browse the page at a certain time, they either want to look up information, or want to buy a product online, or want to read current affairs, or want to find something they are interested in, or ... So scanning is the way to find what they want.

3. Habits- and precisely because users are always busy, users are always targeted, in newspapers, in magazines, in books, on the Internet, users are always used to scanning, accustomed to looking for what they want and interested in.

Therefore, in order to design a more efficient page, we need to design for the scan, next, we need to understand the scanning based design requirements of some elements.

I'm mainly talking about the front 2.

1. Establish a clear visual hierarchy

Users every day to the visual level of decomposition, filter out what is needed, so that users constantly to think. A good visual hierarchy reduces the user's work by proactively organizing and prioritizing pages in a way that users can quickly understand. If a page does not have a clear visual level, all content looks as important as it is bound to reduce user scan speed.

So, how do you establish a clear visual hierarchy?

A. The more important part is more prominent

For example

The most important banner, navigation, landing box, header, and button designers of this page will deliberately highlight them. General use of the size of contrast, color contrast, texture, line or shape-assisted methods such as, so that important content to highlight , the general use of various forms, according to the importance of the content of the classification.

The same is true for the following pages.

B. Logically related parts, visually related

Similar content forms a group, under the same heading, using a unified visual style, or uniformly placed in a well-defined area. For example:

C. Logically included sections, visually also include

For example, the following sections of the "Picture Center" appear to belong to it because visually it is the relationship that contains, the main column and the small title bar below, there is a clear primary and secondary relationship.

2. Clearly identifies the area that can be clicked

Obviously the purpose of the logo is also for the user to scan, imagine the user browsing the page, missed the meal we prepared for him, that is how regrettable things. The site's click-through rate is not high, and a clearly visible hit area is important. On the web, we know that buttons, underlined text, blue words, and text with icons are clickable. General Gray descriptive text, text is not clickable. But sometimes designers pay too much attention to the beauty of the page and ignore these places.

For example: When we see the 1th and 2 situations, we think, are these letters clickable? You may try to click, and you may be ignoring these actions. When we see the 3rd, 4 kinds of situations, we will not hesitate to click to use. These seemingly obscure little details that designers overlook may affect the user's operation and may even lead to a reduction in the return rate of the site.

In short, the role of the designer is not only to make the page look beautiful, attract the attention of the user, but also need to note the page's reading, operability, etc., to be designed for scanning.