What Is Z Pattern Advertising in a Landing Page Layout

Z Pattern Advertising: Landing pages, like web pages, should always follow some sort of organized visual hierarchy. Chances are that a business organization may know this already, but it bears reiterating.

Anything an organization can do to influence their viewers to focus on what the organization wants them to notice is pretty much the name of the game. A good designer understands how users view and process information online.

This knowledge informs their design decisions and leads them to place the most essential elements in a way that they will get noticed. If everything looks right, the design will entice visitors to take the desired action.

One of the primary ways designers influence users and draw attention to a page’s most important elements is to design the page using the Z-Pattern.

The Z pattern advertising 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.

What is Z Pattern Advertising?

The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that the organization wants 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 their "call to action" at the end. All along the path, the business organization can include bits of information that build up to the call-to-action. This is how the design looks:

A Z-Pattern design traces the route the human eye travels when they read — left to right, top to bottom:

• First, people scan from the top left to the top right, forming an imaginary horizontal line

• Next, down and to the left side of the visible page, creating an imaginary diagonal line

• Last, back across to the right again, forming a second horizontal line

It’s important to note that Z-Pattern designs are not required to conform to a traditional Z-Shape and the number of Z-angles along the pattern can vary. 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.

Why Z Pattern Advertising Works?

The Z-Layout certainly doesn't need to be the final concrete solution for all sites, but as mentioned before as well, 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.

One thing the business organizations would 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, it must be kept in mind that while some sites may want to drive their visitors to their portfolio more than they want to their visitors to "Sign Up"; further the content along the path may also look markedly different than some 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 the business organization wants them to do is increased.

How Z Pattern Advertising Works in Landing Pages

Creating a web page with the Z-Layout helps to create a visual hierarchy that people are likely to follow, making it a perfect layout option for landing page designs. But why design a page with the Z-Pattern instead of the F-Pattern?

While the F-Layout tends to be more appropriate for pages dense with content, the Z-Layout is primarily meant for pages with minimal copy. Essentially, the Z-Pattern is better suited for pages where simplicity is a priority and the main takeaway is the CTA.

Moreover, creating their landing page according to a Z-Pattern layout can lead to more conversions because then the business organizations get to control where the viewer’s eyes move.

Some of the leading examples are as follows:

Z Pattern Advertising Example 1: Life Lock

This Life Lock landing page follows the Z-Pattern but doesn’t conclude with a CTA:

a. The visitor will likely start at the headline, since its larger font than the rest of the copy and contrasts well with the dark background.

b. Scanning over to the right, the viewer will then focus on the man’s face, which is the first Z-angle.

c. Next, eye gaze will travel diagonally to the bright red CTA button at the second turning point.

d. Finally, the focus will turn to the smartphone image.

Just like Z-Pattern designs must not form a traditional “Z”, it’s important to recognize that CTAs are not required at Z-Pattern angles. It’s just better if CTAs are located at the turns because this is where viewers’ eyes will end up.

Z Pattern Advertising Example 2: Call Fire

This Call Fire landing page is another example that doesn’t form a traditional Z, but the pattern is still evident:

a. Viewers will start with the page headline since it’s larger than the rest of the copy.

b. From here, visitors will scan down and to the right passing through the image, focusing on the form and CTA button — creating the first Z-angle.

c. Next, viewers travel to the left towards the video — creating the second Z-angle.

Finally, viewers’ eyes will continue across the page to the iconography and three steps.

Z Pattern Advertising Example 3: Oracle

Oracle’s page is another example that doesn’t follow a traditional Z, but the path leads to the CTA at the end:

a. Page visitors will likely start at the headline because it’s the largest font on the page and is easy-to-read with all of the surrounding white space.

b. Next, they’ll move horizontally to the image on the right.

c. From here, the human eye will naturally flow down to the left side of the graphic.

d. Finally, viewers’ eyes will scan the bottom part of the page over to the CTA where the Z-Layout ends.

Z Pattern Advertising Example 4: Fleetmatics

This Fleetmatics landing page includes a CTA at multiple Z-angles:

a. Chances are, the headline and subheadline in the top left will capture viewers’ attention first.

b. From there, visitors will scan over to the right to see the background video.

c. Creating the first diagonal in the Z-shape, visitors are likely to scan down to the left toward the first orange CTA button.

d. Next, the user’s eye gaze will pass through the customer badges, switching back and forth through the bulleted copy to the second orange CTA button.

e. Finally, the Z-Layout continues back to the left toward the image and back again to the third CTA button.

The pattern continues further down the page creating more Z-angles. And, by including a CTA at many turns, viewers will have a hard time ignoring them and be persuaded to click and convert.