< reprint > F-Layout in web design

Address: Http://www.uisdc.com/understanding-the-f-layout-in-web-design

F- layout in web design

Today we highlight the F-layout in web Design . The traditional layout way, depends on the layout visual clue, "controls" the user's visual path, compared with, the F-type layout is more natural, more friendly. This article describes the rules, principles, and design methods for F-style layouts.

Recommended reading:
"Excellent interactive design: 19 Creative Web pages to enjoy"
"Reject mediocrity: Excellent Web login page design"
"Amazing!" The use of mathematics in web design

Introduction to F-type layout

F-type layout is a very scientific layout method, the basic principle is based on a large number of eye movement research. In general, the visual trajectory of the user browsing the Web page is this-first look at the top, then look at the upper left corner, and then go straight down the left edge .... and users tend not to pay attention to the information on the right, which is not a bit like the letter F? Accordingly, we habitually put important elements (such as brand logo, navigation, The call to action Control) is placed on the left, while the right side generally places some advertising information that is irrelevant to the user.

Let's take a look at webdesigntuts+ 's Eye movement heat map:

This eye-moving heat map shows the visual trajectory of the user viewing the site and presents an F-type. The Hot zone (red, yellow, orange on the way) represents where the user is most focused.
Summarize the general mode in which users browse the Web:

Take a look at the top left corner of the page to find out what this site is (so it's a good place to put your logo)-"Know what it is"
Then scan the top of the page (navigation bar, search bar)--"Understanding usage"
Next, the user's gaze moves down and begins reading the next line of content.
The user enters "scan mode" and opens when the content of interest is found.

This type of browsing mode is presented as a wireframe, as in the form of a.

There is a law that cannot be neglected: 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 be too much effort on the right side. You should place the content bar 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, pictures are easier to get attention to
When the user finishes browsing the picture, the next focus is the title.
The user browses the text roughly, but often does not read through it.

Applying an F-type layout to the design

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

Can see, I put the theme 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 the benefit of the column layout is the clear level of information, allowing users to quickly scan the content ... Main content bar + secondary Sidebar

Very rough, but the key points are in, browse this page only a few seconds, you can get the purpose/theme of the site ...

The purpose of the navigation bar is to guide the user and let the user know how to go to different pages.

Under 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 bar do not insist.

Should you look at the visual path of this page?

The effect can also be put? Once the F-type layout is complete, we can add some detail elements to this foundation.

It is also worth noting that the F-type layout controls the distance between rows and rows. (The red line part of the picture)

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

If the page is infinitely long, so browse down the old, users will be very bored, feel boring, right? Here you can make a slight adjustment, adding a little bit of "uncoordinated" elements to the F-style layout rule, which brings some variables to the reading rhythm.

You see, in that picture bar is the "uncoordinated" element, it appeared some unexpected, broke the user's expectations, this design is suitable for the kind of long vertical scrolling page, so users will not feel boring.

F-type layout principle

F-type layout can be effective because the F-type layout is consistent with the user's browsing habits, more natural. Reads from top to bottom, left to right.

But there are pros and cons to this reading pattern:

This way, the most valuable content can only be placed at the top of the page. Some cliché.
Text content can not be effectively caused by the user's attention, the user even the summary is too lazy to read, see the title "Over"
The Web page too much attention to the "title" and "image" packaging, no doubt the principle of content-oriented

In the use of F-style layout for designers, many designers feel that they are not like designers, but to create a gimmick "advertisers." Web design is too utilitarian, only the pursuit of a moment of browsing, do not follow the "content for the King" principle, many users may feel good for the first time, but after watching the content of the big call, maybe the 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 fiction, the content is similar to internal forces, layout as moves. Huaquanxiutui again beautiful, deep internal force of the person a trick can be "to force break Qiao"

So how do you design the sidebar on the right? Here are two points to suggest:

1. Submit the relevant content. such as links, advertisements, related reading recommendations, social media widgets, and so on, related to website themes. Don't place vulgar, irrelevant ads for profit.
2. You can prevent some content retrieval tools, such as tags, article search, the hottest articles and so on.

F-type layout case

So what should be the actual operation? Here are some of the standard F-layout sites to take a look at.

Designsnack.com

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

Kickstarter

Phototuts (I also have no words for this ad's mess!) ）

Squarespace's Product Tour sidebar placed the article search, very good ideas, very user-friendly.

Summarize

No matter how the design trend changes, F-style layout hidden principles will not be outdated, because this is the user's long-term habits.

Or, the F-type layout is only a pretence, the purpose of this article is to strengthen the user's long-term reading habits of understanding-"from top to bottom, from left to right", although this a bit laosheng long talk, but after the analysis of the visualization of this article, you also have some sentiment? What new ideas do you have for the segmentation of the rhythm?

Attractive images, the title with gimmicks are just tricks, content is kingly, how to combine, how both, designers need to go farther.

Let the layout be more than just a method, we can look farther and incorporate some user experience design elements. Try it and let your design continue to "upgrade".

< reprint > F-Layout in web design