Nowadays, a website is the most important marketing tool for the majority of businesses, organizations, and professionals. Simply put, a website is the face of the brand and is often times the first interaction with the brand that many potential clients will have. Take, for instance, the findings of a 2014 study by Hinge Marketing. The company found that over 80% of the 1,000 people it surveyed who purchased professional services in the past reviewed the website of the service provider as part of their purchase decision-making process.
The challenge that many web designers face is to build a website that’s both practical and eye-catching. It should inspire viewers to act. To convert page views into action, you’ll need an effective website layout that’s easy to navigate and appealing to look at. One layout that’s up to the challenge is the Z-layout.
What is it?
The Z-layout is a design layout that takes advantage of the way viewers scan or read through a website in order to inspire action. From early childhood, we’re taught to take in content from left to right and up to down. When we learn to read, we’re taught to begin at the top left corner of the page, read towards the right, and then carry on at the left side of the line below. Those rules are so hardcoded into us that when we scan items that do not necessarily need to be consumed in that particular order (unlike a novel), we can’t help but begin at the upper left corner.
How do web designers use it?
With that being the case, there’s power in ordering a webpage so as to take advantage of those scanning and reading habits that are so ingrained in us. By using a Z-layout, savvy web designers can induce us to act, be it subscribe, purchase, like, etc.
In the above diagram, we see that pattern illustrated.
At Point 1, the web designer will place the brand’s name or logo. This introduces the brand to the viewer.
At Point 2, the web designer will lay out relevant links to the most common information that users are interested in. Examples include links to “Order,” “About Us,” “Contact,” “Log In,” and “Services” pages.
At Point 3, the web designer will include additional information about the brand that’s geared towards “selling” viewers on it. Why should I buy this product? What’s the company’s value proposition? How does this product or service benefit me? The answers to these questions will typically be found at Point 3.
Point 4 is the conclusion. It’s where a user ends his or her scanning of the page and so it’s where the web designer will include a call to action. Common call to actions include “Subscribe now,” “Log in,” “Email us today,” “Start now,” and “Find out more.” Now that the site’s visitor has skimmed through the page and gathered basic information about the brand in a matter of seconds, he or she is more inspired to subscribe now.
Now take a look at the home page of Loot Crate, a monthly subscription pack service for geeks and gamers:
We can see the Z-layout is being utilized by the company’s web designers. We’re first introduced to the brand via logo in the upper left corner. Next, we’re given links to various informational pages. Our eyes are then taken to a photo of the gifts subscribers receive in their crates. In this case, the sales pitch — the Why should I subscribe? — is answered in that photo. An eye-catching image of the fun goodies that are shipped out each month speaks for itself. Lastly, we’re presented with the call to action to subscribe.
The Z-layout is the elevator pitch of web design. Its simplistic layout capitalizes on ingrained content consumption habits in order to induce us to act. Within a handful of seconds, the viewer has been introduced to the brand, has learned a little about its product or service, and was presented with a sales pitch about why he or she should consider using it. The pitch is then wrapped up neatly with a call to action.
There are plenty of other layouts that web designers use to market a brand – the Z-layout is just one of them. However, it’s one of the more popular ones out there because it’s effective. And though it may be named after the last letter of the alphabet, the Z-layout should be one of the first tools to come out of any web designer’s toolbox.