Website Design Analysis: Understand the segmentation layout in web Design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

With the rapid development of the Internet, a variety of web sites emerge. In this environment, how users are in the vast ocean of the Internet to quickly select the site? How can web designers make their websites quickly draw attention to their users after a quick glance? The author introduces a simple way of page layout--split layout, This layout attempts to make the user feel a friendly browsing experience when they first browse the page.

Below enter the translation text:

As a web designer, we can refer to a number of design examples and layout principles, such as: raster, vertical consistency, F-type layout, z-type layout, the three-point rule, the Golden section of the method and so on. Focusing on these principles will make your design visually appealing and functional--now let's look at a simple way to divide the pages into two halves.

Although it may sound silly at first, this basic layout can really do a very good job. When we look through a page, our eyes often move along a zigzag. And if the user's view is moving along a horizontal line--as in a Z-shaped layout--then he or she will be very focused (or trying to focus). But since the beginning of your site 90% users will not be very careful to pay attention to your page, so your design "Browse up friendly" will certainly get a good return Oh!

(Figure 1)

Eye movement and "the" zigzag

From Yahoo's eye tracking research can be found:

• People look at the main parts of the page to determine what the site is and whether they want to spend a little more time here.

• Users will make a decision on the page in just three seconds

• If the user decides to stay on the page, they will be most concerned about the content at the top of the screen.

Site users are always in a hurry, they have other things to do, you don't expect them to stop to appreciate the aesthetics of your site. While good aesthetic design is very important, it does not completely motivate the visitor to take action--to click the "Buy Now" or "Learn more" button.

We can't complain about these users. Always remember, when you want to search for something? You will be anxious to open Google's first search results and quickly read, or, more precisely, a rough view of the entire page. Most of the time, you can scroll to the bottom of the page without even noticing it. After this stage, if you think the page is worth your time, you'll be back at the top of the page and really devote yourself to reading and focusing.

So what is the purpose of the user's initial browsing? is to capture as much information as you initially scan the page. If we "develop" this browsing pattern in some way, we should be able to get more visitors ' attention. By looking at the thermal maps of a large number of websites, I have come up with a common trend.

(Figure 2)

In the picture above you will find that you can see the red dots without any difficulty. Oddly, as far as experience is concerned, our sight can be more easily followed by a line than a slash--because we're all reading along the straight lines. But notice that I'm talking about the initial browsing phase, not the stage where you focus on every detail of the site.

Whenever you are not very focused, your visual flow will naturally appear as "the" zigzag. Unless there is a higher or more important element called you, your vision will follow the pattern above. You will also find that this pattern looks very similar to the F-shaped layout and the user will have a short stay at the red endpoint.

Your brain will generate snapshots at these "pause points". In the glyph layout, the user's brain naturally absorbs more detail in these "pause points" with elements that contain important information and joins them as "the" endpoints that exist as independent entities.

(Figure 3)

"Design is not just how it looks or how it feels, but how it works." --Steve Jobs "

For example, you can use this feature of the semi-split layout to effectively decorate your portfolio's preview, the important features of your product or service, so that you can quickly attract the attention of your site visitors. Ultimately motivate users to stay longer on your site and persuade them to take action. In that case, what would be the result? will bring a higher conversion rate to your site, while giving visitors a better user experience.

Apply split layout to design

(Figure 4)

Making your design and layout compatible with the glyph is very simple. In fact, this is as simple as dividing your page into two equal parts! The effect of the two halves is good because the end of the glyph is more or less aligned to the center of the two halves. Superimposed, they can be a good echo of each other. Place important elements in the red end of the glyph in your Web page, which is the basic idea that the split layout or 1/2 layout contains.

Recently, I am dedicated to designing a landing page that is coming. I tried a variety of layouts, but none of the results made me happy. I've tried almost every kind of--raster, gold-split, F-type layout. But only when I divide the pages into two halves, there is a strong "I found it!" at that moment. Feeling. The solution is so simple! It looks neat and tidy and reminds me of an important fact: simplicity is not necessarily a bad thing. Have you seen the new logo of Microsoft?

(Figure 5)

"Simplicity is the ultimate complication.--Vinci"

(Figure 6,http://www.futfolle.com/)

You can see how the two halves represent a good visual hierarchy. First, the "Coming" red ribbon at the top is compelling. Second, the logo is very clear. Now, following the glyphs I mentioned earlier, the visitor sees the picture slider in the right half, and finally arrives at the email submission form.

Now let's take a look at how much the split layout can do in a web designer's portfolio page. The purpose of designing a portfolio page is to quickly present the main part of your work to potential customers. Now that the industry is so saturated, customers have a lot of choices, why do they pay you? So a great first impression will play a decisive role in the direction of your career. Let's see, what can we do?

(Figure 7)

The layout of the above diagram is divided into two halves, but it does not follow the "it" principle I mentioned earlier.

Although it looks like a good layout and is easy to watch, it can be very tedious after reading the first two elements. Breaking the visual flow and adding visual interest will make a difference. Not only that, but when you try to navigate the layout above, your eyes will first see a picture and then jump to the second block of text. However, your visitors do not intend to read at this stage, so they will jump to other points or completely leave your page!

But what if you make such a simple adjustment?

(Figure 8)

It's getting more interesting, isn't it? Simply swapping the positions of text and pictures in each item to increase visual vividness, so that this consistency will not make your users feel bored. You can also place a call to action button after the word model.

(Figure 9)

This "Contact me" button will have a greater chance of being noticed and clicked by more users (why not have a A/b test to verify again?)

(Figure 10)

"Design is a plan that organizes all elements in the best way to accomplish a specific goal." --Charles Ems "

Examples of effective split layouts

As Facebook's new timeline is being designed, the split-style layout has been the subject of a spotlight. Notice how easily your eyes flow from one post to another.

(Figure 11,http://www.facebook.com)

Apple also uses a split layout. Here is the ipad mini page to see how easy it is to connect each picture of the ipad mini with different features. It feels good!

(Figure 12,http://www.apple.com/ipad-mini/overview/)

Many believe that Microsoft has laid out a number of new ways to reshape its recent brand, with the following image of their surface page, which also uses a segmented layout.

(Figure 13,http://www.microsoft.com/surface/en-gb/surface-with-windows-rt/home)

Stacey is a very simple portrayal of prev-type layout

(Figure 14,http://www.staceyapp.com/)

I like Quora's homepage, the split-style layout can be demonstrated simpler?

(Figure 15,https://www.quora.com/)

Consumerbarometer.com uses the animation to elevate the glyph to a new level and makes a triangular mutation.

(Figure 16,http://www.consumerbarometer.com/#?app=home&viewmode=0)

Summary：

So what have we learned?

• Users can make a decision on your page in only three seconds

• In order to attract visitors ' attention and reduce the page bounce rate, we should try to make our page layout "Browse and friendly"

• Divide your layout in a central location and adjust the important elements to the "it" glyph endpoint to ensure that your visitors remember more details after browsing

This article is just a well-meaning reminder that when designing a Web page, we should not forget to use the basic layout and basic design methods. In fact, this will increase your conversion rate if you apply the appropriate words.

Original link:

http://webdesign.tutsplus.com/articles/design-theory/understanding-the-split-layout-in-web-design/

(Weibo UDC original blog, reproduced please indicate the source)