Understanding the Z-Layout in Web Design

The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic “Z-Layout” isn’t going to be the perfect solution for each and every website out there, it’s certainly a layout that’s effective enough to warrant inclusion in any web designer’s arsenal of layout ideas.

Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.

This post marks the first in a series where we’ll be examining the wide variety of layout paradigms that exist in the world of web design. The goal: to better understand why you might choose one layout concept over another. In this series, we’ll also be looking at the “F” shaped pattern, the open layout, and some out of the box layouts that are sure to give you some great ideas. Attaining a better grasp of how different layouts can change user behavior is one of the central principles of the creating an effective user experience.

Introducing the Z-Layout

The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your “call to action” at the end. All along the path you can include bits of information that build up to the call-to-action. Let’s take a look at the diagram:

Notice that we’ve numbered the key points along the path – these represent the order in which a reader is likely to view the page content. Let’s see how this translates to an actual layout:

Now let’s overlay the Z-Diagram on top of the layout:

Simple, right? There’s certainly nothing complicated about this layout – but it quickly and effectively moves the eye from Point 1 to Point 4 in a logical order – concluding with a powerful call to action. There’s still a few things that we can do to spice this layout up though… so let’s add a few things to the design:

• Background separation to focus the eye movement inside the framework of our design.
• A styled logo to grab the user’s attention at point #1.
• A colorful “sign up” button at point #2: this will reinforce the desired eye movement.
• A Featured Image Slider in the center of the page: this will separate the top section of the design from the bottom, and facilitate eye movement downward.
• Icons at point #3 and along the bottom axis: this will encourage “title scanning” as the eye moves to the call to action.
• A big “call to action” at point #4 – thanks to the new background separation, this feature should stand out more.

Here you can see that the new “sign up” button in the navigation stands out more; The “slider” that we’ve added to the leaderboard area helps keep the user’s attention within the center of the frame; The 2 icons next to the blocks of content in Point 3 also help to make them a bit more visually interesting. Again – this stuff is simple as it can be, but simple can be good when it comes to website design! You can layers in complexity as you please, but don’t overlook the power of a simple, effective layout.

Why it Works

The Z-Layout certainly doesn’t need to be the final concrete solution for all sites, but as I mentioned before, it’s often a great jumping off point for any design project because it tackles the 4 of the big principles of an effective design:

• Branding
• Hierarchy
• Structure
• A Call to Action

It works because most Western readers will scan a site the same way that they would scan a book – top to bottom, left to right. From this simple foundation you can pretty much go anywhere: Add multiple calls to action, shrink the height of the Z, extend it, do whatever you’d like that makes sense to the goal of the site.

Let’s take a look at a few great site designs that use the Z-Layout as the basic structure. One thing you’ll want to note in these examples is how the z-layout is able to adapt. The Call to Action may not always be the same (some sites may want to drive you to their portfolio more than they want to you “Sign Up”); the content along the path may look markedly different than our example. The thing to notice is how the storytelling aspect is carried across: 1, 2, 3, Action! By moving the eye along the Z-Path, the chances that a viewer will end up doing what you want them to do is increased.

While you view these examples, try to find the Z-path that the designer wants you to follow.

Examples of the Z-Layout in Action

Evernote looks complex at first glance, but a closer inspection reveals a z-path ending with the “download” button.

Much simpler, the Daina Reed site delivers a couple quick bits of information, then prompts a “Get in Touch” action.

The path on CodeMonkey starts at the logo and ends on “Get Started”.

It’s a bit harder to see here because of the duo-chrome palette, but the z-layout creates the general framework.

This example ends with a bright, bold price tag.

Probably one of the clearest uses of the Z-Layout, the Blue Acorn design hits each point along the path.

Campaign Monitor’s design mixes up the layout, but the 1, 2, 3, 4 steps are all intact.

Caveats Worth Mentioning

It’s important to note that the Z-Layout isn’t the only layout paradigm that’s out there. Heck, there are about as many layouts as there are letters in the alphabet. The Z-Layout is one of the principle layouts because it’s so simple to use as a foundation, but you’ll always want to trust your instincts when it’s time to make a final layout decision.

…Regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page.

There have been a bunch of interesting studies done on eye-tracking that suggest trying to predict eye-movement across a website is about as erratic as sending 1,000 kids into a candy store. Several studies have also shown that the “F” shaped layout (which we’ll be reviewing next in this series) is more effective at controlling a viewer’s eye movement across a page. The simple truth is that, regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page. Keep this in mind; if your goal is to guide a viewer through the Z-Layout, don’t give them any more opportunity to be distracted along the way than they already have.

Where the Z-Layout truly shines is in design projects where simplicity and a call-to-action are the most important principles. Trying to force a Z-Layout on a complicated content structure probably won’t work well, but allowing the Z-pattern to form a framework for a very basic site can bring a sense of order that can help increase your conversion rate.

Check out the “F” shaped pattern post!

Oh! Check out a list of stock-templates that use the Z-Layout here.