The F-style layout in web design

Today we are going to focus on the F-style layout in web design. The traditional layout way, depending on the layout of visual clues, "control" the user's visual path, compared to the F-style layout more natural and more friendly. This article will describe some F-style layout rules, principles and design methods.

　　Introduction to F-style layout

F-type layout is a very scientific layout method, based on a large number of eye movement research. Generally speaking, the visual track of the user browsing the web is this-first look at the top, then look at the upper left corner, and then along the left edge of the homeopathy straight down ... and users tend to be less aware of the right information, this is not a bit like the letter F? Accordingly, we habitually put important elements (such as brand logos, navigation, behavior call control) On the left, and on the right, there are some ad messages that don't matter to the user.

Let's take a look at webdesigntuts+ 's eye-movement hotspots:

This eye-moving hotspot map shows the visual trajectory of the user browsing the site, showing an F-type. The Hot zone (red, yellow, orange) represents the place where the user's attention is most concentrated.

　Summarize the general mode of user browsing the Web:

Take a look at the top left corner of the page and find out what this site is (so it's a good place to put the logo)--"Know what"

Then scan the top of the page (navigation bar, search bar)--"Understanding usage"

Next, the user moves out of sight and begins to read the next line of content.

The user goes to "scan mode" and opens when they find something interesting.

This browsing mode is presented as a wireframe, with the shape shown below.

There is a rule that cannot be ignored: Reading is generally from top to bottom, from left to right. Users tend to ignore the right side of the content, roughly a glance, so do not on the right side of too much effort. The content bar should be placed on the left side of the user's attention-level focus.

　　To sum up, according to logic, we draw the following conclusions:

Brand logos and navigation should be placed at the top of the page, which is the user's first impression of the site.

In the content structure, the picture is easier to get attention

After the user browses through the picture, the next concern is the title.

Users will generally browse the text, but often do not read through it.

Apply the F-style layout to the design

Here I did a little exercise, using the Wireframe method to lay out the main elements.

As you can see in the following figure, I put the theme/purpose of the site (Mission Statement) in the navigation bar below, so that users browse through the logo and navigation, you can quickly understand the purpose of the site. Two column layout benefits are clear information level, users can quickly scan the content ... Main content bar + auxiliary Sidebar

It's pretty rough, but the key point is that it takes only a few seconds to get to the website's Purpose/theme ...

The function of the navigation bar is to guide the user and let the user know how to go to a different page.

At the top of the content bar, the title is set very eye-catching, users browse through the picture, you can quickly detect the existence of the title ... As for the text content, do not be forced.

Is this the way you view the visual path of this page?

The effect can also be to finish the F-style layout, we can be based on this, add some details of the elements.

It is also noteworthy that the F-style layout controls the distance between rows and rows. (The red Line part of the figure)

According to the different design requirements, designers can adjust moderately. If you want to create a leisurely reading atmosphere, the spacing can be a little bit larger, if the amount of information, you can narrow down a little, create a compact sense of reading. As for the rhythm of reading and consistency of the maintenance, please read the excellent network before the article, here do not repeat.

If the page infinitely long, the old so browsing down, users will be very annoying, feel boring, right? Here can be a little bit of adjustment, add a bit with the F-style layout rules "uncoordinated" elements, to the reading rhythm to bring some variables.

You see, the picture bar above is the "uncoordinated" element, which is somewhat unexpected and breaks the user's expectations, and is designed for a Web page that is very long and vertical scrolling so that users don't get bored.

　　F-type layout principle

F-style layout can be effective because the F-style layout in line with the user's browsing habits, more natural. Conforms to "from top to bottom, left to right" reading mode.

But the reading model has advantages and disadvantages:

As a result, the most valuable content can only be placed at the top of the page. Some cliché.

Text content is not effective to cause users to notice, users even do not bother to read the summary, look at the title of "Past"

Web pages too much attention to the "title" and "image" packaging, no doubt the principle of content supremacy

In the use of F-style layout designers, many designers feel that they do not like designers, but want to be the "advertisers" to create gimmicks. Web design is too utilitarian, only the pursuit of a moment of browsing, do not follow the "content is king" principle, many users may feel good for the first time, but read the content after the big cry, maybe next time they will not visit the page again.

Therefore, the designer should coordinate the relationship between content and layout. This is a bit like a martial arts novel, content is like internal force, layout is like the moves. Huaquanxiutui again beautiful, deep internal force of a recruit can be "to force broken clever"

So how do you want to design the sidebar on the right side? Here are two tips:

1. Presentation of relevant content. For example, links to website topics, ads, related readings, social media micro-items, and so on. Don't put vulgar, irrelevant ads for profit.

2. Can prevent some content retrieval tools, such as tags, article search, the hottest article and so on.

　F-style layout case

So what should be the actual operation? Here are some standard F-style layouts for the site, let's take a look.

Designsnack.com

The latimes.com is doing a good job of tempo control.

Kickstarter

Phototuts (for this advertisement in the chaos I also very have no language!)

Squarespace ' s Product Tour Sidebar is placed in the article search, very good idea, very user-friendly.

Shows that you don ' t need to have the sidebar on the right side ... in fact, can leverage the fact this users would gravit Ate towards the stem of the F by placing a sub-navigation there.

Summarize

No matter how the design trends change, the F-style layout hidden principle is not outdated, because this is the user's long-term habits.

Or, F-style layout is just a cover, the purpose of this article is to strengthen the user's long-term reading habits-"from top to bottom, from left to right", although this is a bit of a long talk, but after the visualization of the analysis, do you have a sense of it? What new ideas do you have for the segmentation of the rhythm?

Attractive images, gimmick titles are just tricks, content is kingly, how to combine, how both, designers need to go farther.

Let layout is not only a method, we can look farther, incorporating some user experience design elements. Try and keep your design "upgraded".