As Web Designers, we follow a lot of design paradigms and layout principles: grids, vertical consistency, the F-Layout, Z-Layout, rule of thirds, the Golden-Ratio and so on. Paying attention to these principles will produce visually appealing and functional design - let's now look at the simple division of a page into two equal halves.
While this might sound a little silly and obvious in the beginning, this fundamental layout can be very effective. Our eyes tend to follow a zig-zag motion while skimming through a page. If the eye does follow a horizontally straight line - as in the Z-layout, he/she is concentrating (or is trying to). Since 90% of the Web traffic coming to your site does not pay detailed attention to your page, making your design "skim friendly" will definitely pay off.
Eye Movements and the Zig-Zag
From Yahoo!'s Eye tracking studies:
- People scan the main sections of a page to determine what it’s about and whether they want to stay longer.
- They make decisions about the page in as little as three seconds.
- If they decide to stay, they pay the most attention to the content in the top part of the screen.
Web users are always in a hurry. They have other things to do, and staying behind to appreciate the beauty and aesthetics of your website is the last thing you can expect them to do. Even though good design is of great importance, it doesn’t fully inspire a visitor to take action – to click that “Buy now” or “Know more” button.
We can’t blame them. Ever remember when you wanted to look something up? You rush to the first search result in Google and then you quickly “power” through, or rather skim through the overall page. Most of the time, you even scroll all the way to the bottom without paying any considerable attention. After this phase, if you decide that the page is worth your time, you scroll back to the top and then take the actual effort to read and pay attention.
What is the purpose of the initial skimming? To grab the maximum information you can get about the page at an initial glance. If we somehow ‘codify’ this skimming pattern, we should be able to grab the attention of more visitors. From observations at heatmaps of various sites, I've made out a common tendency.
You'll notice that you can look at the red spots effortlessly. Strangely, from our experience, we can say that our eyes should easily follow straight lines rather than angled ones – since we read in straight lines. Note that I’m talking about the initial skimming phase, not the part where you pay attention to every detail of the site.
Whenever you are not paying much attention, this is the natural tendency of your eyes – the zig-zag. Unless there are elements which have greater contrast and weight which shout out at you, you would likely follow the above pattern. You'll also notice that this pattern looks similar to the F-layout and that the Red end points are where users take a momentary pause.
These momentary pause spots are where a snapshot is taken by your brain. In a zig-zag layout with elements containing important pieces of information at the “Pause spots”, the Brain naturally absorbs more details, as it associates each zig-zag end point as separate entities.
Design is not just what it looks like and feels like. Design is how it works. -Steve Jobs
You could (for example) utilize this feature of the Half Split layout to effectively position your Work Portfolio previews, or the important features of your product or service, so that visitors take notice quickly. This ultimately encourages them stay for more time on your site, and thus convinces them to undertake actions. The result? Better conversion rates for you and a better user experience for them.
Applying The Split Layout to a Design
Making your design and layout “zig-zag compatible” is very simple. In fact, it is as easy as dividing your page into two equal halves! The equal halves work well because the Zig-Zag end points are aligned more or less towards the centre of these halves. Used in superposition, they go well together. Place elements of importance at the red end point positions of the Zig-Zag of your page. This is the basic concept behind the Half Split, or 1/2-Layout.
Recently, I was working on a “Coming Soon” landing page. I experimented with various layouts, but nothing worked well. I tried everything – Grids, Golden ratio, F-Layout. The Eureka moment came when I simply divided the page into two equal halves. The solution was as simple as that! It looked elegant and neat and reminded me of the important fact that simple isn’t necessarily bad. Have you seen the new Microsoft logo?
Simplicity is the ultimate sophistication. -Leonardo Da Vinci
You can see how the halves give a nice Visual Hierarchy. First, the “Coming Soon” red ribbon at the top is noticed. Next, the logo is seen. Now, following the Zig-Zag I mentioned earlier, the visitor ends up looking at the Image slider on the right half and finally, the E-mail submission form.
Now let us see how well the split layout works for a Portfolio page of a Web Designer. The aim of a Gallery page in a Portfolio is to quickly show potential clients a body of work. There are loads of options for them, as this industry is pretty much saturated right now. Why should they pay you? Making a great first impression could tip the scales in your direction. Let's see what we can do about that.
The above layout is divided into two halves, but it doesn’t follow the ‘zig-zag’ principle which I mentioned earlier.
While it does seems like a good layout and easy on the eyes, it gets pretty dull after the first two elements. Breaking the flow to increase the visual interest will help. Not only that; but when you try to skim the above layout, your eyes should see the first image, and then jump to the text of the second item. Since your visitors have no intentions of reading at this phase, they jump to some other point, or leave your site entirely!
What if you made a simple change like this?
Much more interesting, right? Simply interchanging the positions of the text and the image of each item increases the Visual interest so that the consistency doesn’t make your Visitor feel bored. You can also place a call to action button following the Zig-Zag pattern.
The “Contact me” button will now have a greater chance of being noticed, and clicked by more of your visitors (why not run an A/B test to double check that?)
Design is a plan for arranging elements in such a way as best to accomplish a particular purpose. -Charles Eames
Examples of the Split Layout in Action
The split layout has entered the limelight with Facebook's new Timeline design. Notice how your eyes easily “flow” from one post to another.
Apple too follows split layout. Here is the iPad mini page, see how easy it is to associate each image as separate features of the iPad mini? It just feels right.
Microsoft have been credited with paving many new ways with their recent rebranding, here following a split layout on their Surface info page.
Stacey is a minimalist portrayal of the 1/2-Layout.
I love Quora's homepage. Can the split layout be demonstrated any simpler?
Consumerbarometer.com takes it to the next level with animations and a triangular variation of the Zig-Zag.
Wrapping It Up
So, what have we learned?
- People make decisions about your page in as little as three seconds.
- To grab the attention of your visitors and to reduce bounce rates, we should try to make our layouts ‘skim friendly’.
- Dividing your layouts right in the centre, and placing important elements aligning to the end points of a ‘zig-zag’ guarantees that your visitors remember more details after they skim.
This article is just a gentle reminder that making use of basic layouts and fundamental designing methods should never be forgotten. In fact, it can boost your conversion rates, if used properly.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post