Research on the price position and the problem of sight flow

When we browse the shopping website, we often encounter the situation of browsing the price list. Most of the current site prices are located after the product name.

The purpose of this design is to make the customer notice what the goods are and then pay attention to the price.

But when users scan Web pages at a high speed, is the name of the product the first place they need to be concerned? How do we correctly guide the user's vision to where we want them to be concerned?

We know that regardless of whether the user is poor or rich, the price in the purchase of goods is always the important weight of the user choice. Many sites in the design of the product list will be the idea of trying to highlight the price, user-friendly judgment and choice. Users are often attracted by the price when they are browsing at high speed, and pay attention to the corresponding goods.

And the price and the product list is consistent with the user's line of sight, the list will be successful to seize the user, the user's attention to attract the key.

Generally, graphic design and web design follow the line of sight flow is roughly two kinds,

The Gutenberg chart is a design idea for line balancing from the Gutenberg Chart of John Gutenberg.

He suggested that when people browse the page or layout, the line of sight tends to move from top to bottom, from left to right eye movement. The upper-left corner is the beginning and the lower-right corner is closed. So the headlines of the newspaper, the title of the magazine, the logo of the website and so on are all important information placed in this position in the upper right corner.

Nielsen F Visual model is April 2006, the famous American website designer Jacober Nielsen (Jakobnielsen) in the "eye trajectory research" report that, in the first visit to a strange site, viewers are involuntarily in the "F" shape mode to read the page, This reading habit determines the appearance of the Web page F-shaped attention to the heat.

This model has three psychological cues:

1. In the user's quick browsing situation, the user rarely looks at the text inside the paragraph

2. To use a small title, multiple headings, to arouse user attention

3. The first second paragraph would preferably contain some important information.

If we look at the line of sight of the list of items according to these two major visual patterns, this is theoretically possible:

Gutenberg:

F Visual Model

Under normal circumstances, whether Gutenberg or F-type browsing, users will first see the product name and then pay attention to the price.

But because the length of the product name and price color relationship, it is observed that most users are first attracted by the price, and then focus on the name of the product, especially in the case of a long product name, the user in the rapid search for visual focus is always attracted by the price, looking back to look at the name This line of sight clearly contradicts the above two visual patterns. The following browsing methods may be formed:

What is the consequence of this browsing pattern,

1. Browsing flow is not smooth, the user's vision always need to jump to jump, or still ignore the previous product name information.

2. Because the length of the commodity and the price of the highlight, the upper left corner of the vision is ignored, the golden position is always not good use.

For businesses, what kind of elements on the site can be in the fast browsing situation in order to be the user's attention? In fact, the two: pictures & prices. If there is no picture of the list of product names, whether you want users to pay more attention to price or more attention to the name of the product, the price is undoubtedly the most important factor to attract the user's view. The price should always be at the top of the list, unless there is a picture appearing in the product listing.

So this list is not the right solution for attracting users and getting his attention.

Recently, a number of websites and apps have adopted price-front methods to improve the problem.

If you use the first two visual models to look at the price of this commodity price list line of sight flow is this.

In this case, the most prominent and most user-focused price in the two visual models occupy the 1th visual, in this case, users will be attracted by the price when they browse the Web page quickly, and the user can still sweep the product name after the price while paying attention to the price. The product name is neglected in the view of the situation is relatively small.

The advantages are also coming out:

1. The line of sight flow smoothly, the price and merchandise information will not be ignored.

2. Users are quick to browse because the price in the golden position, easy to attract users ' eyes, and attention to the location of information.

Of course, such prices have a corresponding problem, the first is the user habits, some users are accustomed to the price, the initial may not be accustomed to, but as long as the design process in the list there is a clear separation, can be in a short time to adapt to the design of this information. This design then does not apply to all situations, such as some page content is a list page, and no need to guide users to focus on this list. Therefore, it is not a design principle that needs to be enforced.

Article Source: aimyu.blogbus.com/logs/151270066.html