Search results page (SERP): Don't be fooled by F-style browsing

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

In April 2006, Jakob Nielsen, a renowned web designer for long-term usability research in the United States, published a study on eye Jacober Nielsen (sic: f-shaped for Reading Web Content).

In most cases, the report said, viewers can not help to read the "F" shape of the Web page, this basic constant reading habits determines the Web page to show the concern of the f-shaped heat.

The researchers used several different pages of the eye movement test, got 3 of the heat map, using color to indicate the gaze of the viewer's concentration of heat, divided into the hottest (red), Hotter (yellow), not hot (blue) and basic attention (gray) 4 kinds. In Figure 3 The search results page because the title of the site in Serp, the page summary is wider, the second line will be lengthened, but still the F shape.

　　

Figure 1:f Browse

The researchers interpreted F-type browsing like this:

First step: Move horizontally

The viewer first forms a horizontal navigation path at the top of the page.

Step two: Eye down, short range horizontal move

The viewer moves the gaze downward, scanning the area shorter than the previous step.

Step Three: Vertical browsing

After the viewer completes the two steps, the gaze will be scanned vertically along the left side of the page; This step is slower and more systematic and methodical.

The problem behind the F-type browsing

F-Type Browsing mode This theory has been introduced for a long time, and I have seen this kind of sharing on many websites and blogs. I'm thinking about a few questions:

1. What is the reason for the F-type browsing mode? What are the user requirements behind it?

2. F-Type browsing will be affected by the content of the site, the user needs to change it? Will there be other shapes?

3. F-Mode browsing model can give us what enlightenment? How to guide us to SERP design?

With these questions, I did some digging and trying, and then there was more doubt, "the" F "shape of the browser to read the Web page, this sentence, particularly questionable. Because I found that the viewer is not unconscious of the formation of some kind of browsing behavior, but by the Web site design and the dual impact of their own needs caused.

What caused the F-type browsing?

Jakob Nielsen spent the painstaking use of three different Web pages to test, in order to tell us that the F-type browsing is common on different sites, the user's F-style browsing behavior is not subject to the site content and design is too big different.

But he did not further analyze the reasons for the F-type browsing, the result of many people mistakenly think that this is really a "involuntary" behavior.

Because of this, F-type browsing is also easy to see a lot of loopholes. Like what:

Why not E but F? Because we see a lot of eye movement test picture F below not one horizontal navigation line, but more than one.

Why is one of the following horizontal navigation lines shorter than the one above, and in fact many of the eye-movement images we see are the following horizontal navigation lines longer than one above?

Further research has found that F-type browsing can easily be broken when considering the rich content elements of Web pages, such as images. As pictured, can you see a typical F?

　　

Figure 2: Influence of image factors on F-type browsing

So, the researchers added F-style browsing, they said, when the image element effect, the user's browsing behavior has changed, no longer show the F-type browsing, but there is an E word:

　　

I think, then push down, or avoid the loopholes, e out, F out, there will be l,i,c,z ...

Or early through the phenomenon to analyze the nature, let us early contact F-type browsing behind the reasons for better.

I think that f-type or e-type browsing, is not an unconscious "involuntary" behavior, but the site content, design, user needs and user habits of multiple factors under the action of the results.

User's habits: From left to right, from top to bottom, this is also the traditional reading habits in the network extension.

Internet users ' reading habits: Some of the way we read the Yellow pages or catalogues: fast-scanning, capturing key points, reading short sentences, ignoring long speeches--which can be conclusive.

User's needs: How is this habit developed? I think it's because Internet users have a need in mind: looking for something. This may be specific, such as searching for a product. may also be vague, such as browsing news sites, we want to scan to see if there is a "stimulating interest" keyword. When these "keywords" are found, we will read more information to help decide: this is not what I am looking for, when the discovery is, will produce to the details of the page of the click, of course found not, will continue to read down, continue to cycle again.

The user's patience is limited, so with the scanning, the length of the page stretching, if they can not find too many points of interest, the interest will gradually fade, so it may form the so-called F-or Golden triangle hot zone.

When users browse, there are three words in the brain: maybe, yes, No.

When the word is "maybe", the user browses horizontally to get more information, and when the answer is given, the user discards the horizontal browsing and reads the next or next search entry. When the answer is yes, it usually produces a click. As shown in the figure:

　　

Figure 3:f-type browsing is a conscious act

This is the F-type browsing model in my mind:

Longitudinal scan is used to contrast: information is the first dimension of information, users are looking for the most important and differentiated information, users scan very quickly. User comparisons will result in "positioning", resulting in horizontal reading.

Horizontal reading to determine: Information for the second dimension of information, information can not be differentiated, users will reduce the speed of scanning to get more useful information, to help themselves to make judgments, do not click on the Details page.

User comparisons require differentiated information, so when a user makes a filter, originally differentiated information into a ray at the same time, F's vertical bar began to transfer to another group of information, such as Taobao search mp3, when I filtered out a group are Mickey's MP3, the picture of the difference is not, My f vertical transitions directly to the title or other information.

In the following picture-free list, I may even be able to transfer F's vertical browsing directly to the price or region.

　　

Therefore, we can understand the F-type more broadly, so that there is no need to tangle the top of a horizontal or below a horizontal length or the distance between the two horizontal, of course, will not tangle why F has multiple horizontal line.

Non-typical F-type browsing--the influence of user requirements, website design and other factors

There is a search results page with a picture on it (Figure 2), then I think, when more than one picture, what is the effect?

Just, these days I want to buy a computer bag, to Taobao search computer bag, and then do not do any screening, directly look at the results of the search. I consciously observed my behavior (of course, doing research without using my method) and then found:

1. I look at the pictures first--pictures can help me quickly decide whether the color, style and style of the package is what I am looking for (so a long vertical navigation line appears quickly).

2. When the picture meets the requirements, I will read the description of the package horizontally (title). -If the title contains words such as "second-hand", "18" and so on, I will give up horizontal browsing and go straight to the next product image with a slash.

3. When the Quick Scan title does not appear to let me dour no word, I will view the price. Please look at the penultimate red bag, the picture passed, the title passed, but the price exceeded the budget, so I gave up the transition to the following products.

　　

Let's say we have a guy who's also buying a computer bag, suppose he doesn't care about the color, doesn't care about the style, only cares about the price (a lot of the wholesale may be like that)--so he comes to this search results page, will it start with the price of the column vertical browsing, exclusion, selection, horizontal research and decision-making-give up or click? It is entirely possible.

In E-commerce sites, because most of the pictures are the first choice, it has a natural advantage to help make choices, so our view from the top left, the first vertical and horizontal, vertical and horizontal intentions are subtle differences. I'll talk about that later.

Let's take a look at the web of Word-of-mouth, the same design search results Page view:

I, on behalf of an ordinary people to find a rental. What do you care about the average tenant?

His first concern is huxing and lots. Next is the price.

So his view is likely to be like this--

1. Over the picture first look at the title, because the title will generally include the name of the community, huxing and other important factors.

2. When there is a word in the title that he dour No, other information (pictures, prices, more introductions, etc.) will be ignored. Quickly scroll to the following list.

3. When there is a word in the title to meet the demand, the user will sweep sideways to the price word, make a second judgment.

4. When the price exceeds the psychological expectation (or too low), the user abandons this list, the line of sight appears the z type moves down, moves down to the next list title.

5. When prices meet expectations at the same time, usually produces a page to the details of the click (two yellow area).

In the following example, the same picture, but only an auxiliary role, when the user through the title or the price of information is not enough to judge, will be used as a reference factor.

　　

Then look at the web design, how to affect the user browsing behavior.

And, in the album Way to show the Serp page, the user's behavior is what?

For example, in Taobao Mall, switch to gallery form. My need is to look for a laptop bag with a shoulder, the picture is still the first dimension to focus on, so my sight is likely to appear Z-shaped, when I found a suitable style and color of the bag, I will scan the second dimension of information: Price or title.

But I also found that unless I was conscious, I was able to guarantee a Z-scan, in most cases, I am in the gallery form of the list, the line of sight is radial, scattered, irregular, I may be one of the pictures to attract first-this picture may be centered rather than the upper left corner of the picture , and then start with this picture, and browse up or down.

This galley design, although it can highlight the impact of the picture, but in fact, it is not convenient for users to do "contrast and screening", will miss some information, so may appear up and down the repeated browsing-this may also be the mainstream of foreign e-commerce sites do not have this form as the main list design reasons, Of course, this is my personal guess. If there is a chance, we will use gallery to do an eye movement test to verify this conclusion.

One tips is that when presenting a product in a gallery manner, the same line of products should not be too much.

　　

F-type browsing for my inspiration

I think, f-type browsing is not absolute, nor unconscious, but by the site design, user needs, user habits of multiple factors. So, what principles should we follow in our serp design, especially the list items design?

So just write this article, I also due to recently encountered a problem in the project:

How does the list page host multiple exposure requirements?

Given the importance of this page, many business departments want to be able to do some exposure on the list page, only one product list, some departments want to be able to release the company or product certification information, some departments may feel that there is no need for users to click on the Details page, you can release more information, such as the company's contact method, Product operators, perhaps the list can contain more information about suppliers, such as size, main products, equipment and processing capabilities, processes and so on.

But how can a list of tofu chunks contain so much information?

So, we need to convince each business side: The goal of List page design is not to allow users to read, to make decisions, but to quickly find, locate, judge, and the real decision is to need the user to the details page or even contact with the supplier to make. The design goal of the list page needs to be simple, not to lose sight of, ignore the main purpose, accumulate a lot of information, but reduce the user's browsing, contrast, positioning efficiency.

What can we do?

1. Information Priority Division

As far as E-commerce sites are concerned, I think there are three priority levels to be divided.

First step: Contrast and quick filter.

Step two: Get more information to help you judge.

Step three: study and make decisions--the next move or give up.

　　

A serious statement: The above information priority depends on the nature of the site, audience needs and different, can not adapt to any type of SERP. For example, the same E-commerce site, Taobao and Alibaba are very different. Taobao for personal buyers, and alibaba.com for the global wholesalers, small and medium-sized enterprises procurement. The user type difference is big, the purchase type difference is bigger, therefore the demand is different, the attention information dimension is different.

For wholesalers, because a product to buy a large number of, general is also a sample processing, not like the spot Taobao purchase, but also pay more attention to long-term supply relationship, so the attention to the details of a single product slightly weaker, more concerned about the supplier's own credit, supply capacity, main products.

Moreover, the industry is different, the procurement type is not the same, the attention of the information dimension is not the same. The customers who visited Shanghai building materials exhibition last week can clearly help us to confirm a fact: the industry characteristics of the SERP design of the differentiated needs highlighted. -This topic will be followed later.

What Heidi want to say is: Depending on your site's user needs and product features, you need to have a table in your head that needs to be adjusted to the most appropriate priority.

If the designer or Product manager does not convey the concept of information priority, then market researchers are likely to provide a hodgepodge of users care about what information, product pictures, description, certification, credit, price, logistics, supplier qualification ... I know they care about everything, of course, but--at what stage are they concerned about what is to be differentiated.

2. Help users complete tasks faster

When we have this watch in our head, and with the project team to reach a consensus--it is not easy to reach a consensus, but we can rely on user research, interviews, industry research to provide enough proof to come up with a more reasonable information priority, then the remaining task is how to better performance of these content.

The same dumpling stuffing, different package method can obviously give the user different sensory feeling, package is not good, not only hinder the unsightly, also very likely to break, destroyed a pot of soup does not say, also entered the water, resulting in dumplings have no taste.

Now that the user's goal in the SERP page is clear-find it!

The user's SERP task can be predicted by us-he has three steps to complete (see table)

The goal of each task is also relatively clear, so the task we designed is to enable him to achieve the goal of subtask more efficiently at each stage.

Of course you can say: Then why do we have to split into three steps? Now that you want to simplify the workload, is it better to just let him do it in one step?

But in fact, the user's three steps are also a timeline, not at the same time, and when all of the information is presented at the same time, it will greatly reduce his efficiency in completing the first step.

I think that SERP can meet the first two levels of demand, the third step can be placed on the details page to complete.

Google search list:

　　

Think about: If the title words too much, or not and the following description to distinguish between, do not make the keyword bold, will not lead to the user's first step screening efficiency reduction?

Compare list items for two sites:

Where to go-hotel search List page:

　　

Word-of-mouth Network-Restaurant Search List page:

　　

Compared to the two, I personally think that the performance of where to go better than Word-of-mouth network.

Where are we going? The information hierarchy is very clear-the first dimension of lots and hotel brands.

Prices are listed separately--very easy to second-level filtering.

The picture is relatively unimportant, so only the quantity and link are given.

offers a very helpful promotional message.

And the performance of Word-of-mouth network:

The picture is very unimportant, but still occupies the golden position.

Because the title is located in the upper part of the picture, the user in the portrait browsing, often by the image factor interference, not conducive to quick browsing.

The map, the surrounding information, I think is the third priority, but appears here, resulting in a very complex item.

Comments: Word-of-mouth gives the individual user comments, is not objective and impartial, will mislead the customer.

......

Several actions worth trying:

1. Information Block Division-follow user habits and F-type browsing, F-type browsing reflects the user's browsing habits, from top to bottom, from left to right.

　　

2. Keywords or information that can help users improve efficiency by bold and explicit

For example SERP search keyword bold, the main purpose is to let users quickly grasp the word, and then judge: This is not what I am looking for products.

Also, reduce the noise. Above this picture, the individual thinks that the move of the hopping Wang Wang icon to the lower right corner of the position can help users to improve the image and title of the browsing contrast.

Fields like prices, which are generally more important (second priority), are handled in two ways:

Separate columns-users can easily contrast vertically, which is also the practice of many websites.

　　

When we are alone in the column, we can not do too much visual reinforcement of the price.

But if you do not separate columns, you need to focus on bold, to help users vertical rapid jump-type contrast.

Otherwise, it would be:

　　

3. Extension of entry Design

It is likely that your three-part theory will be appreciated by the product team, but they need more information to show it. Therefore, they do not think that only the first two priority information can be placed on the Serp page, the others can only be viewed on the details page.

And their views are sense:

Why should users go one at a point to determine if this is what he's looking for? Isn't that an invalid click?

So, even if there is a priority division, the list items design must also consider a certain degree of scalability-can not be displayed, when the user needs to start.

　　

There are more actions you need to take part in:

To raise more questions, Heidi Personal income must have certain limitations.

Help Heidi Verify that the conclusions are correct: provide examples or counter examples.