Sunday, July 21, 2024

How to Use Viewing Patterns in Your Website Designs

Programming LanguageHow to Use Viewing Patterns in Your Website Designs


While going through a website or an application, people tend to take in the information displayed differently. You may notice that sometimes a person may miss information that others wouldn’t miss. This may have happened to you before, as well.

This is because everyone has a particular way they process information. In design, this is called viewing (or reading) patterns. As a designer, it’s important to understand how your users (including potential ones) consume information, and how best to place the most crucial information so nobody misses it.

In this article, we’ll talk about different viewing patterns, how to choose the best ones for your project, and we’ll also see real-life examples of these patterns.

Here’s what we’ll cover:

  1. What you need to know before reading
  2. The origin of viewing patterns
  3. Common viewing patterns
  4. Why are viewing patterns important?
  5. How should I choose a viewing pattern for my design project?
  6. Conclusion

Prerequisites:

Before we go into the article proper, please note that it’ll be helpful if you have basic knowledge of core design principles and the importance of these principles in guiding users’ attention and organizing information effectively.

But this is not necessary, as I wrote this article for everyone, including absolute beginners.

The Origin of Viewing Patterns

The concept of viewing patterns can be traced to the field of psychology, specifically the study of eye movements and visual perception.

While people have been reading and consuming visual information for a long time, proper observation and analysis of reading behaviors emerged with the development of eye-tracking technology and scientific research methodologies in the late 19th and early 20th centuries.

A lot of pioneers and researchers such as Louis Emile Javal, Edmund Huey, Alfred L. Yarbus, and Charles H. Judd conducted experiments to observe eye movemts and behaviours in the late 19th century and early to mid-20th century.

The formalization of viewing/reading patterns as design principles in the context of graphic design and information architecture began to gain traction in the latter half of the 20th century. Designers and usability experts started applying insights from eye-tracking studies to optimize layouts for print media, signage, and digital interfaces.

Over time, the study of viewing patterns expanded beyond text-based reading to include diverse media formats, such as web pages, multimedia presentations, and interactive interfaces.

Today, viewing patterns continue to evolve with advancements in technology and changes in user behaviors, guiding the way designers approach layout, navigation, and content presentation.

Common Viewing Patterns

Now that we know how viewing patterns came about, let’s talk about some common viewing patterns in existence.

The F-pattern

This is a common viewing pattern observed in online content consumption. According to this pattern, users scan the page in a horizontal movement across the top, then move down the page, scanning shorter horizontal sections. They continue to read less of the content, until they finally start reading vertically, forming the F-shape.

Diagram illustrating how the F-pattern works on a wireframe. Image Credit: Nielsen Norman Group

To capitalize on the F-pattern, you can place important information such as headlines, key points, and CTAs along the top and the left-hand side of the page to ensure maximum visibility.

Some examples of real-life platforms that utilize the F-pattern include:

The Z-Pattern

The Z-pattern is another common viewing pattern. This pattern can be noticed in designs where the user is expected to move their eyes in a zig-zag pattern across the page.

This pattern typically starts with a horizontal movement across the top of the page (forming the first stroke of the “Z”), followed by a diagonal movement from the top-right to the bottom-left (forming the second stroke), and finally, another horizontal movement across the bottom of the page (completing the “Z”).

Z-pattern
Diagram illustrating the Z-pattern. Image Credit: UX Planet

To capitalize on this pattern, you can align information on the predicted path of the Z-pattern to guide users’ attention more effectively, especially in designs like landing pages and presentations.

Some examples of real-life platforms that utilize the Z-pattern include:

The Gutenberg Diagram

The Gutenberg diagram outlines a viewing pattern based on the natural eye movement of Western readers, and is influenced by cultural and linguistic factors.

The Gutenberg Diagram divides the page into four quadrants: the primary optical area (top-left), the strong fallow area (top-right), the weak fallow area (bottom-left), and the terminal area (bottom-right).

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area… – Stephen Bradley (Vanseo Design)

image-1--3-
Image illustrating Gutenberg diagram divided into 4 quadrants. Image Credit: Techwala

You can strategically place content based on the Gutenberg diagram to optimize visual hierarchy and readability, ensuring that important information receives the most attention.

Some examples of real-life platforms that utilize the Gutenberg diagram include:

Layer-Cake Pattern

The layer-cake pattern involves stacking multiple layers of content vertically, with each layer containing distinct information or visual elements.

image-3--1-
Image illustrating the layer-cake pattern on a layout. Image Credit: Chip Cullen

Users typically engage with this pattern by scanning the top layer first, then sequentially exploring deeper layers based on their interest or curiosity. You can use this pattern to present complex information in a more structured format, allowing users to navigate through layers of content at their own pace.

Some examples of real-life platforms that utilize the Layer-Cake pattern include:

Why are Viewing Patterns Important?

Viewing patterns help you guide how users view and consume information on your designs. They help you arrange content in a way that naturally aligns with your users’ reading habits. By placing information where users are most likely to look first, you’re ensuring that key messages are effectively communicated.

Also, understanding viewing patterns help you cater to the needs of a diverse group of users. Different people process information in different ways and understanding these habits ensure that you design with accessibility in mind.

What’s more, designs that align with existing viewing patterns provide a more intuitive and less stressful user experience.

How Should I Choose a Viewing Pattern for my Design Project?

Choosing a viewing pattern for your design depends on a number of factors including, the context of your project, users’ preferences, goals of the project, and so on.

Here’s a step-by-step guide to help you select the best reading pattern for your project:

  1. Know your Users: You have to first understand the demographics of your target or potential users. What do they prefer? What are their goals? In what situations would they use your project? Gather insights into how they interact with content and their technical proficiency.
  2. Define your Project Goals: Make sure to clarify the objectives and desired outcomes of the project you’re working on. Are you trying to inform or facilitate a specific action? Should your design be very serious or a little playful? You need to identify the key messages you want to pass across to your users, and prioritize them based on importance.
  3. Evaluate Context and Platform: Take into account how your users would view your product. Will they view your content on a website, application or a print medium? Consider the device types and screen sizes that your users are likely to use.
  4. Select Viewing Pattern: Considering the available data and the insights you’ve gathered, you can go ahead to choose a viewing pattern that best aligns with your project objectives.

Now that you’ve selected a viewing pattern for your design, make sure to constantly monitor it’s effectiveness through testing and feedback.

Note: You can interchange these steps or even skip some. Just make sure to do whatever works best for your users.

Let’s do a little practical exercise:

Say you’re working on a hero section for a new e-commerce website selling outdoor gear. Some things you need to consider for this project include:

  • The primary goal: to showcase the latest product offerings on the hero section and entice visitors to visit the website further. You’ll want to highlight key features, products, and calls-to-action (CTAs) to encourage conversion such as making a purchase or signing up for a newsletter.
  • Your target users: likely outdoor enthusiasts, including hikers, campers, and adventure seekers. They’ll likely be people with limited time to spend on each webpage.
  • Context and platform: Users will likely access the page on several devices, including desktop computers, laptops, tablets, and smartphones. You’ll want to consider how the design will adapt responsively across different screen sizes and orientations, priortizing mobile optimization for on-the-go users.

Due to the time constraints of your users, and the need to capture attention quickly, the F-pattern may be a suitable choice. Place high-priority content, such as featured products, top deals, and prominent CTAs, along the top and left-hand side of the page, where users are most likely to look first.

You can use visual cues such as arrows, bold typography, and contrasting colors to draw attention to key elements and guide users’ eye movements down the page.

Here’s what I came up with from the practical design:

Frame-19-1
Hero section I designed using the F-pattern.

In the design above, in sequential order, there’s:

  • a top navigation containing the logo, links to other sub-pages, and the log-in and sign up CTAs(call-to-actions).
  • a main heading, description, and call-to-action (Shop Now) on the left-hand side of the page.
  • a section showing latest arrivals on the website.
Frame-20--3--1
Image showing how the F-pattern is depicted on the design.

I would love to see the results of this practical exercise on your end.

Conclusion

Viewing patterns are very important as I mentioned earlier. They are invaluable for designers across different disciplines, and are easy to understand and incorporate into your designs.

You just need to be sure of what works best for your users, and design with that in mind. Also make sure to experiment with different viewing patterns so you can discover your own unique style. Have fun experimenting!

Check out our other content

Check out other tags:

Most Popular Articles