Why Understanding Visual Design Can Improve Content Marketing

Technology and consumer preferences are continuously evolving but we often forget that some core principles of visual perception and human psychology remain always the same. After all, humans are visual creatures: half of the human brain is directly or indirectly devoted to processing visual information and have a remarkable ability to remember pictures.

But, how do users scan a website or a content hub and on which page location do they spend the majority of time while visiting them? Also, how can we secure that our site structure and layout facilitate content consumption? 

This is the third post of my series about psychology and design: so far, I have written about how to use the principles of psychology to improve design and content marketing and how colors psychology can affect human behavior. This time we will focus on core principles of visual perception and how we view and process visual information. Understanding these core principles will represent an unquestionable benefit for content marketers.

Nielsen Norman Group’s F pattern

Regardless of geographies and cultural background, most of the users generally consumes content from the top down, and the majority reads from left to right. Readers will rarely commit to reading every word on a website; they typically scan web content as quickly as they can to determine if they want to dive deeper.

Understanding core principles of visual design will represent an unquestionable benefit for content marketers.

In 2006, a study conducted by Nielsen Norman Group examined eye-tracking visualizations on different types of web pages: an ‘about’ page, product pages on eCommerce websites and Google search results page. They found that the human brain commonly scans content in two distinct patterns; users typically read web pages following two full horizontal stripes followed by a vertical movement. For text-heavy pages such as blog posts, or pages with consistent blocks of images, such as product listings, scanning behavior consistently happens in an F pattern. The implications of this reading behavior have been written about and have extensively influenced website design.

The F-shaped pattern is characterized by many elements concentrated at the top and the left side of the page. Specifically:

1. Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top horizontal bar.
2. Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower horizontal bar.
3. Finally, users scan the content’s left side in a vertical movement. Sometimes this is a slow and systematic scan that appears as a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

The F-shaped pattern describes people’s behavior when they visit a web page and assess its content, not their behavior when they are in a new section of the website and inspect the navigation bars (typically at the top and/or left of the page) to decide where to go next. 

Throughout the years, because of the increased prevalence of mobile apps as well as mobile web browsing, changes in content formats, innovative use of CTAs, and a relevant transformation in the display of search engine results, Neil Patel has argued that the F-shaped pattern “isn’t a commonality anymore”. Patel states that there are a couple of major mistakes in accepting the F-shaped pattern from 2006:

• Our reading habits, search engines and technology have tremendously evolved in the last 12 years. Mobile and social media are now the core means of content consumption
• The “F-shape” wasn’t really pixel-perfect behavior. In the study itself, it was found that users also read in an E or inverted L shape. 

NNGroup's recently conducted a new eye tracking research showing that the F-shaped scanning pattern is alive and well in today’s world - both on desktop and on mobile. In addition to the F-shaped pattern, there are many other possible scanning patterns, including spotted pattern (consisting of skipping big chunks of text and scanning as if looking for something specific, such as a link, digits, a particular word or a set of words with a distinctive shape) or marking pattern (which involves keeping the eyes focused in one place as the mouse scrolls or finger swipes the page, like a dancer fixates on an object to keep balance as she twirls). Marking happens more on mobile than on desktop.

How can you incorporate this concept into your website or product to improve UX and gain conversions?

It’s common practice for web designers to craft their pages explicitly around these psychological behaviors. As both patterns begin the same way, it’s a smart choice to position your most important information in the top left. 

You’ll notice that logos are usually placed at the top-left corner of the page. On the opposite side, there are sign-up/sign-in options. Then, as eyes make their way to the middle, visitors are directed to look at products. The end points typically warrant a CTA for further action. Using these psychologic tendencies and scanning patterns to your advantage will not only help you entice users to explore your platform, but also effectively guide their subconscious decision-making process down the sales funnel toward a conversion.

When writers and designers have not taken any steps to direct the user to the most relevant, interesting, or helpful information, users will then find their own path. In the absence of any signals to guide the eye, they will choose the path of minimum effort and will spend most of their focus close to where they start reading - which again is usually the most top left word on a page of text. It's not that people will always scan the page in the shape of an F. Although years of reading have likely trained people into thinking that more important content comes before less important content, no user really feels that the content has been arranged so the most important things appear in an F shape. The F-pattern becomes the default pattern when there are no strong cues to attract the eyes towards meaningful information.

It’s hard to control people’s motivation or their goals, but you can optimize content and presentation so that users can find what they need quickly. In particular, use good web-formatting techniques to draw attention to the most important information instead of relying on the arbitrary words that people may fixate on when they scan in an F-shape.

Mobile users

Reading web content on the smaller screen is an altogether different experience than reading on desktops. A mobile user also has the chance to physically interact with your web content by touching and tapping the screen - which, for example, is one of the reasons that make social media so engaging on mobile.

The German Research Center for Artificial Intelligence (GRCAI) conducted a study to find out how users read text passages on a mobile touchscreen device. They found the following reading pattern among the participants. It’s clear that the left side of the screen still gets major attention. Also, they classified the readers into three categories (and this categorization was confirmed by other studies, e.g. the iPhone reading eye-tracking investigation that was conducted by SensoMotoric Instruments to find out how users read and navigate mobile news applications and websites):

• Scanners – the majority. Almost 58% of users scanned content
• Navigators – 38% only read the headlines,
• Reader – Only 5% actually read the content

As an implication, if a majority of your audience visits your digital proprieties from mobile, then it is suggested to rethink your web content strategy.

Conclusions

As a data-driven marketer, you should know there are many tools at your disposal to discover your site’s particular viewing patterns.

These include software solutions for eye tracking, recording user behavior, heat maps, click maps, scroll maps, and funnel visualizations. 

Regardless of the screen size, what appears at the top of a web page will always influence user experience. The difference in how users treat information above vs. below the fold is 84%.

I don’t encourage you to place a call-to-action (CTA) above-the-fold if your value proposition is complex. Your CTA placement should depend on your product complexity, among other factors. Instead, use compelling content and visuals to encourage users to scroll. Interesting information, at the top of the page, that builds a story gives users a good reason to navigate to the bottom of your website.

In case the majority of your audience visits your blog from mobile, here are some tips for crafting engaging content for the smaller screen:

• Stick with essential info – It’s 108% harder to understand content when reading on mobile. So don’t overload your posts with irrelevant information. Mobile users have little patience and lesser visible context. 
• Make your writing tighter, well-formatted and entertaining. And, prioritize your information with progressive disclosure, using accordions.
• Above-the-fold (the top section of the screen) is the most precious piece - On the mobile screen, it’s extremely important to keep the user’s attention from the beginning. The immediately visible part of the screen, including your headline and introductory paragraph, should be compelling. Shorter headlines work better, as they would be clearly visible above-the-fold and can be viewed in a snap.

So, a good mobile user experience and nailing user intent are critical for gaining visibility in mobile search results. 

I hope that you can use this information to better design your content marketing strategy.