How Visual Design Can Improve Content Marketing

Visual Design

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 better understand your audience and improve design & 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.

‘F’ Pattern

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 trackingrecording user behaviorheat 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.

Featured Image by Harpal Singh

The psychology behind content: how to trigger your users’ behaviour

Note: I’ve updated the original post with new studies; I’ve refreshed Fogg’s Behaviour Model with the latest researches and I’ve added a couple of missing Cialdini’s principles of persuasion. Also, I have included a new paragraph to clarify when (in which phase of the buyer journey) we should be using these principles. Finally, I’ve added a reference list at the end. This is the most complete article so far summarising my researches on Content/Digital Marketing and Psychology.

This may sound counterintuitive but success in marketing strategy does not start with strategy. Rather, it should start with the context, being the context a deep understanding of your business objectives and your audience. There is no tactics without strategy; and there is no strategy without a clear understanding of your audience. Here is where psychology – better, a comprehension of basic psychology principles – can help.

Psychology and Persuasion

Psychology is the study of mental processes that lead to human behavior. It affects everything we do. As a content marketer or designer, it’s helpful to understand psychological principles, whether you’re working to make an existing website more intuitive or building a digital experience aligned with how users make decisions.

Psychology
Psychology

Psychology can help us answer questions like: Why do users behave the way they do? Which elements of design will facilitate the behaviors I want users to engage in? Yet, psychological principles mostly reside in the realm of academic research and literature, which are often inaccessible for marketers.

Before we start, a note on persuasion. This post covers a few principles focused on persuading users. Although persuasion has a bad reputation – and I understand why – it isn’t an inherently negative action. It is just a way to influence, for better or worse. Victor S. Yocco, author of “Design for the Mind: Seven Psychological Principles of Persuasive Design,” put it well:

Utilising dark patterns or tricking a user into doing something they wouldn’t otherwise do is not persuasion. It’s being an asshole.”

That’s exactly the point. This post is not about that kind of persuasion. What I’ll present here is a collection of principles, examples, and best practices that will make your content and design more persuasive, in order to trigger behaviors users were already considering. In other words, you’ll learn how to increase conversions by understanding psychology, engaging readers in specific behaviors, and creating calls to action at the right time.

Utilising dark patterns or tricking a user into doing something they wouldn’t otherwise do is not persuasion. It’s being an asshole.

Victor S. Yocco

Applying the Elaboration Likelihood Model 

Persuasion is part of every aspect of our lives. Businesses want us to buy their products. Politicians desire our votes. And people want us to like them. The same ideas hold true for websites, apps, content destinations, and other digital properties. Good design persuades users to engage with your product or content in the way you intend, leading to your desired outcome. 

Persuasion involves more than words. Aesthetics and user experience can make a website or application more persuasive. They can reinforce your audience’s attitudes. A digital experience can also dissuade users. If someone encounters nine pop-ups, a long loading time, or three pages of disclaimers to get to your core message, there is a high probability they will leave your site before you get your point across. Distractions, whether physical, visual, or intangible, can temporarily halt the whole persuasion process.

Academics have attempted to explain how persuasion works on individuals for decades. The Elaboration Likelihood Model (ELM), one of the most frequently cited models of persuasion, explains how shaping attitudes also shapes behaviors. Incorporating the principles of the ELM into your message and design will maximize your influence on user attitudes and, therefore, behaviors.

Central and peripheral routes

When someone is presented with information, some level of “elaboration” occurs. To elaborate on something means to take the time to really think about it. If you have to buy a car, for instance, you will spend a lot of time thinking about which car is best for you. You will search on Google, talk to friends, and visit car dealers. This is what the ELM is about: How likely are we to elaborate, and on what level? The level of elaboration determines which processing route the message takes: central or peripheral.

Central route processing (high level of attention) means your audience cares more about the message. They’ll pay more attention and scrutinize the quality and strength of the argument. Any attitudes formed or reinforced this way are thought to be more resistant to counter-arguments. Attitudes formed through central route tend to be hard to change – either they are positive or negative attitudes.

Peripheral route processing  (low level of attention) happens on a more superficial level. Your audience will pay less attention to the message itself while being influenced by secondary factors, such as source credibility, visual appeal, presentation, and enticements like food, sex, and humor. Attitudes formed or reinforced this way are thought to be less enduring, subject to change through counter-arguments, and in need of continual reinforcement.

A view of the two routes

To illustrate the difference between central and peripheral route processing – and how messaging and design can address each – let’s look at an example.

Imagine two potential customers, both in need of a new compact car. Abby is a car expert who often reads car magazines. Joe barely knows about cars; he’s interested in finding a quality car, with good design (he loves design products) at a good price. While both users will have some level of central route processing (i.e. pricing), it is more likely that Abby, with her interest in cars and mechanics, will be attentive to the messages. Abby searches for car details, specs, and comparison information. Her process will likely follow the central route.

Central route
Central route

Joe, instead, looks at different sites before deciding on a new Mini Cooper model. He’s not really interested in technical details. He likes the way the website presents the car. He loves the design, and he’s attracted by large images and customizable color combinations. Joe goes the peripheral route.

Peripheral route
Peripheral route

Promoting the Central Route

This example leads to our next area of exploration: what promotes central route processing and high elaboration? How can we push visitors to the central route? Researchers have found two main factors influencing a shift to the central route: motivation and ability.

Motivation (relevancy) is often influenced by relevance. A user who feels directly impacted by a topic is more likely to process a message through the central route.

Ability (capability) is a straightforward concept. For central route processing to occur, your message must align with your audience’s thinking capabilities. If people lack the mental ability to process your message, they will not be able to critically evaluate it, and are guaranteed to process it through the peripheral route.

In other words: If you want people to pay attention to your content, make it relevant and easy to understand. The Fogg’s Behavior Model can help you connect motivation and ability.

Fogg Behavior Model: motivation, ability, and prompts

Dr. BJ Fogg founded the Persuasive Technology Lab (now renamed Behavior Design Lab) at Stanford University, and has done some amazing research on behavior design. Behavior design is where psychology, design, and technology meet – a systematic way to influence a desired behavior. Fogg defines behaviour design as a way to “computerise behaviour change” and “computerise persuasion“.

Behavior design is where psychology, design, and technology meet – a systematic way to influence a desired behavior.

BJ Fogg

Fogg’s model explains that three elements must come together at the same time for a behavior to occur: motivation, ability, and prompts. If one of those elements is missing, then the action won’t happen. In short:

B = MAP

Fogg-Behavior-Model-updated
Fogg’s Behavior Model: Ability, Motivation, Prompts

Ability and motivation have a trade-off relationship when it comes to performing behaviors. That’s what the curved line on the Behavior Model represents. You can see the point when we should ask users to engage in a behavior (check our site, click this button) because they’ll be most likely to say “Yes!”. We must design our content to increase motivation and ability to the point where a prompt will be successful. If a design presents the prompt (trigger or call to action) before motivation and ability reach sufficiently high levels, the behavior won’t occur.

Here’s how you can account for each in your content and design.

Motivation

The most effective way to increase motivation is through strong messages that show why your product and content are relevant to your audience. Several factors can also boost motivation, like:

  • status
  • early access (remember Gmail?)
  • pleasure or pain
  • hope and fear
  • social acceptance and social rejection
  • power
  • and rewards

Take this example from Vitality insurance. Most people who visit the site already have strong motivation, and an Apple watch reward may further increase it.

Ability

Convey your message in a way that your audience understands. There are two paths to increasing ability. The hard way is to train people to understand your message. The easier (and best) path is simplicity. Make it easy for your audience to understand what you offer and how to receive it; make your design accessible.

This leads to an important rule: If you must choose what to optimize for, always choose ability over motivation. Simplicity changes behavior. Become a master of simplification, not motivation.

Become a master of simplification, not motivation.

Victor S. Yocco, Design for the Mind

Simplicity is the minimally satisfying solution at the lowest cost. Simplicity has a direct connection to persuasive technology. Technologies that make something easier to do are more likely to get people to do that thing. An obvious example is Amazon’s Buy now with 1 click.

Simplicity is the minimally satisfying solution at the lowest cost.

BJ Fogg, Persuasive Technology

Oscar’s website is a perfect example of simplicity. The health insurance company makes a complex topic accessible. The Oscar website enables ability and facilitates a central route.

The Prompt

Without a prompt, a target behavior will not happen. Prompts tell people to do it now. Sometimes a prompt can be external, like a message alert. Other times, the prompt can come from our daily routine: walking through the kitchen may trigger us to open the fridge. The concept of a prompt has different names, but content marketers generally refer to it as a call to action or CTA (Fogg once called this element the “Trigger”; he changed this term in late 2018. Now he uses “Prompt”).

The way to encourage desired user behavior is to “place hot prompts in the path of motivated users,” as BJ Fogg would say. The closer the timing of an external prompt with an internal prompt, the sooner an association forms. In general, an internal prompt is created when a user has a consistently great experience with content or an application. After continuously getting rewarded by the application, an association is made between the application and the need that prompted the opening of it. Since internal prompts take the form of internal drives and thoughts, they’re pretty much impossible to measure or rely on. That’s why external prompts are a product designer’s best friend. Examples of external prompts are:

  • Emails
  • Push notifications (eg. email subscriptions pop-ups)
  • Text messages

These prompts are most effective when actionable, personalized, and timely. If a user is presented with a CTA when they’re able and somewhat motivated to perform a behavior, it’s likely that they will.

Cialdini’s Principles of Persuasion

We have seen how elaboration occurs and how it is facilitated by motivation, ability/simplicity, and prompts. Persuasion expert, Dr. Robert B. Cialdini, adds one more element. Since we live in an age of information overload, we don’t always have the time to process all of the information and make informed decisions. This incapacity makes us look for signals that help us decide if we want to do something. Cialdini calls these signals “shortcuts.” Enabling these shortcuts through design and content will facilitate users to adopt the central processing route:

Status Quo: People generally prefer status quo, even if they say (or their actions suggest) they’re open to new ideas or ways of doing things. If your company’s products or services require customers to venture out of their comfort zone, explore risk-free mechanisms that allow customers to experience them. Meal box companies like Blue ApronPlated, and HelloFresh do this by offering free meals to new customers. This tactic is appealing to everyone, but especially those who are reluctant to try a new dinner routine.

Reciprocity: People generally feel indebted to those who do something for them without asking for anything in return. Simply put, the more you give to your customers, the more they’ll be willing to give back to you. Whether it’s bestowing customers with an unexpected discount or free gift, the idea is to go above and beyond without requesting anything in return. Some B2B software companies do this by automatically extending free trials or giving customers exclusive access to new product features. For example, Freshbooks has been known to send automated free trial extension emails to users who haven’t purchased after initial trials. This is also the concept behind the big rock content marketing model.

Social Proof and Acceptance: We generally value opinions and ideas from people like us, and we feel greater compulsion to act when we see others like us taking action. Social proof comes in a lot of forms: customer case studies, testimonials, reviews, and social engagement, to name a few. For example, MarketingProfs applies this principle on its new membership page by pointing out that more than 600,000 marketers have signed up, motivating the reader to become part of that group, as well.

Scarcity and Fear Of Missing Out (FOMO): When we fear that something is scarce, we feel compelled to act – buying, stockpiling, or experiencing that thing before it’s gone. This is an incredibly powerful psychological principle that marketers have used for years to drive action. By using limited time offers or showing consumers what their friends are purchasing, you can create a sense of urgency to buy. Amazon’s Deal of the Day is a perfect example. It hits on both scarcity (only so many deals are available) and FOMO (you only have so much time). Same with airline companies that show how many seats are left at specific price points.

Authority: influencer marketing’s principles are based on the authority shortcut – people will consume your content (and will buy your services/products) because you have some degree of knowledge and authority, enough credibility for people to want to read what you have to say. It works well in B2B and B2C, even if the kind of authority can be of very different nature. Kaya Skin Clinic, a beauty clinic that focuses on improving the looks of a person by delivering services that enhance beauty and skin, found that including the word “expert” in the opt-in form as a call to action was a powerful application of the law of authority. In fact, lead generation increased 137%, and as a consequence revenue increased 22%, when Kaya’s agency decided to change CTA, including now the expert term.

Kaya’s website
A new CTA, making advantage of the authority principle

Liking: finally, liking (or likeness), based on the straightforward principle that we are easily persuaded by people who are like us, or people we like. Similarity boosts liking. If we are members of the same group or have commonalities, it’s even easier to like you. Cialdini suggests using the About Us page to become more likable, by including individual information and personal interests. PetsRelocation.com represents a good example of well designed About Page, and a good application of Cialdini’s liking principle.

How (and when) we should use the principles

Let’s now translate what we’ve learned into a message clearly understandable by content marketers. The question we should ask ourselves is: when should we use the psychology principles? If we consider the simplified buyer journey we can summarise saying that:

  • Central Route Processing should drive the entire journey. In fact, we have seen how any attitudes formed or reinforced this way will be more resistant to counter-arguments; attitudes formed through central route will tend in fact to be hard to change. Which means we need to work to increase motivation and ability/simplicity through the full journey;
  • Fogg Behaviour Model: similar consideration here. Prompts (CTAs) will trigger behaviours in different phases of the journey;
  • Cialdini’s principles of influence: some principles could be more appropriate for a specific phase vs others. For example, the principle of scarcity can trigger consumer’s action in the purchase phase. Authority can be extremely useful in the very first phase of the journey, where enterprises (especially B2B) should be considered authoritative and gain trust because of their understanding of specific domains. Social Proof is extremely helpful in several phases of the journey and with specific audiences.

Visually:

Psychology principles and the simplified phases of a typical buyer journey

Conclusions

You should all pay close attention to these principles, learn what they’re all about, and apply them to your own content hubs, apps, and digital properties. If you incorporate them properly, you’ll notice an unmistakable boost in your conversions over time. Understanding your audience’s behaviour will be instrumental for the success of the overall content marketing strategy.

References

How to apply psychology to design and content marketing (and attract audience’s attention)

Introduction

As a content marketer, I have always considered design as the best friend of content. Can better design bring more conversions and content consumption? The simple answer is yes.

In the past, when working on the creation of hubs, blogs, newsletters and content destinations of known international firms, I discovered though that design principles were not as simple and straightforward as I imagined; I realized I was going beyond the boundaries of content marketing, touching a new ‘undiscovered’ domain.

Why do web visitors and content consumers behave the way they do? What can drive readers’ behavior and facilitate content consumption? I realized soon enough that the domain I was investigating was no longer content strategy: it was psychology. Even better, it was psychology applied to content and design with the objective to facilitate and attract visitors’ attention.

Other questions came soon to my mind. How can I apply psychology to content and design? Isn’t persuasion a bad word, or even a dark art? And what does it look like to design without considering users’ psychology? Continue reading “How to apply psychology to design and content marketing (and attract audience’s attention)”

Coming soon on CMAB

Coming Soon

Coming soon on Content Marketing Across Borders (title to be finalised):

  • How to Measure Content Marketing Performances
  • The Rise of the Data Scientist and Hybrid Marketer (original post to be published on NewsCred Insight’s blog)
  • How to win visitors applying the psychology of design to content marketing and social media