When you first look at a webpage, where do your eyes look first? Where does all your attention go? These are concepts that users usually don’t think about. However, there are several techniques that most webpages incorporate without your knowledge. When most people come to your website, they are not reading all the content; they’re just scanning it. The main goal you should have is to create content that is based on how people process visual input, creating a pattern for visitors to stay. This all resonates with the user’s experience.

What Is User Experience

User experience, or UX, can mean many things to many people. However, to make life easy for ourselves, we will talk about it in relation to web design.

UX refers to any sort of interaction that someone has with your website. We can call this “user experience design” to make things more specific in the vast and complex arena of user experience.

UX design will carefully consider all the individual elements on a webpage that shape the experience a person has on it. What is taken into account is how certain elements will make someone feel and how easy it will be for someone to accomplish the task they are there to complete.

When it comes to your website, it will either be reading an article thoroughly enough and long enough or familiarizing themselves with your product/service enough to, ultimately, make a purchase.

The ultimate goal of UX design is to create a simple, efficient, relevant, and enjoyable experience for people coming to your website. As Don Norman, a cognitive scientist and UX architect, once said, “User experience encompasses all aspects of the end user’s interactions with the company, its services, and its products.”

Types of UX Patterns

There are three different types of UX patterns that you can use when developing the website, blog, and even logo for your small business. You will want to familiarize yourself with these so that you can give your site visitors the most enjoyable experience you can. It will lead to more sales for you, after all!

F pattern

Whatever you can do to get people to focus on what you want them to look at is the purpose of UX patterns. When you use any one of these patterns, you are adjusting your content to match how people process and view information online. When you use tried-and-true UX design patterns, you will persuade people to take the sort of action you would like them to take.

The Z Pattern Layout

Every page you want eyes on should incorporate some kind of visual hierarchy. The Z Pattern trains a user’s eyes to go in a zigzag pattern. This means their eyes will go left to right and top to bottom. Let’s break this pattern down a bit.

  1. The user scans from the top left to the top right of your webpage.
  2. The user then looks downward and towards the left side of the page.
  3. The user finally goes across the screen from left to right.

Now, if you followed closely, you can tell that the first step created a horizontal line, the second a diagonal line, and the third another horizontal line. That’s how we get our Z pattern.

While visitors to your site won’t always adhere to a perfect Z pattern, they will get close enough to it to render this a useful pattern to use in layout out your content.

How to Apply the Z Pattern

Applying the Z Pattern is simple. You want to first get clear on what is the most critical information you want people to see. Then, you need to decide on what action you want them to take.

To apply this UX design pattern, you just have to make a giant “Z” on your page and place the most essential information along the “Z” formation.

The most important information should be placed at the beginning of the lettered pattern, then the second most important information, followed by the third most important content. When you put this information along the path of the pattern, you will ensure that the user gets exposed to the information you want them to see, at the right time.

Where to Use the Z Pattern

This pattern works really when well it’s applied to post-click landing pages. If you have a page that will have a minimal amount of content for someone to read through, the Z pattern will be very effective. These pages will be simple and have a call to action (CTA) at the end of them.

The F Pattern Layout

Next, we move onto the F pattern. People tend to read from top to bottom. We already looked at how people scan content when they are on a post-click landing page, but what about when they are reading something like a blog article? The F pattern is how most people scan content online. Here’s how it goes:

  1. The user scans across the top of the page, reading the titles or headlines.
  2. The user then scans down the left-hand side of the page, focusing on any numbers or bullet points.
  3. The user finally scans across the page, reading any text that is in bold, along with any subheadings.

If you were to look at a heatmap, it would resemble an “F” on the page, hence the name of this pattern. Again, as with the Z pattern, this is a general outline of how people use the F pattern. There will be some variations, but in general, content gets scanned using this pattern.

This pattern works because people tend to get overwhelmed with walls of text and will instead direct their focus to elements that stand out. This could mean a large title or headline, numbered or bullet points, and subheadings. The contrast provides a natural object of focus when people are faced with a large amount of content.

How to Apply the F Pattern

You can use the F pattern most successfully on either longer sales pages or blog articles.

You will want to place the most important elements that you wish for people to see according to where they will be looking.

The eyes of your site’s visitors will start scanning in the top-left corner of your webpage first. This is where you want to place the most important element, such as the title or main attention-grabber like a countdown for a sales offer.

After this, you can design the rest of the page using a clearly-defined visual hierarchy. Make sure the flow leads people to the most important parts. If you are using this page as a lead magnet or post-click landing page, point their attention to ultimately reach the CTA.

Where to Use the F Pattern

You will find the most success with the F pattern UX design on blog articles, post-click landing pages, and sales pages.

Now, it’s your turn to guess which pattern is this?

The Gutenberg Diagram

The Gutenberg diagram is a third UX pattern that will work best when applied to content with a great deal of text. Articles that are several thousand words long, books, and newspapers see the highest use of the Gutenberg diagram.

Here’s how it works:

  • There are four quadrants to the layout: primary optical, strong fallow, weak fallow, and terminal areas.
  • The primary optical area is found in the top left-hand region of a page.
  • The strong fallow area is found in the top right-hand region of a page.
  • The weak fallow area is found on the bottom left-hand side of a page.
  • The terminal area is found on the bottom right-hand side of a page.

According to this pattern, people will look across and down a page using horizontal eye movements. As the reader scans down the text, they begin reading from a point that is slightly to the right of the previous point in the section above. With each scan from left to right, they will start at the new line from a location that is a little more to the right.

The areas outside this diagonal area will receive the least amount of focus, unless some visual cues scream out to the reader. The claim of how it works is that the Gutenberg diagram follows the natural “reading gravity” of a reader. It also helps improve reading comprehension.

How to Apply the Gutenberg Diagram

How to Apply the Gutenberg Diagram

You will want to place the most essential elements you want people to be aware of along the reading gravity trajectory. This could start off with your logo or a headline in the top left-hand region of the page.

Next, you will benefit from placing something like an image or other elements in the middle of the reading gravity path.

Finally, you should place your CTA and/or contact details at the end of the reading gravity path, meaning in the bottom right-hand region.

Where to Use the Gutenberg Diagram

You will find it beneficial to use the Gutenberg diagram when you have a large amount of text you want to place on a page. This usually means either a long-form blog article or a one-page funnel that has all the information about a specific product or service, followed by a CTA at the end.

Design Inspiration on Whiteboard

Final Thoughts

UX is one of the most importance elements to remember and focus on when you are creating a website for your business. When it’s done correctly, you increase your leads and sales, helping grow your business. If you want your business to become more successful, you should incorporate one of these UX patterns into your lead magnets and webpages right away.

Check out the Wisetamp Blog for more informative content with insights that can help your business generate more revenue.