Psychology of Design: Structuring Online Success

Every choice a designer makes will impact the way a consumer interacts with t a product, service, or company. This is especially true for the way a website is organized.

In this final installation of our series on the psychology of design, we’ll take a deep dive into some of the principles of psychology that influence a website’s  user journey. From content best practices to tips for effective calls to action, gated content,  menu navigation, and more, we’re looking at some of the psychological effects that will affect whether or not your customers engage with your site(s).

In the following sections, we’ll cover some of the principles of psychology that affect:

• Content prioritization
• Navigation structure
• Gated content and form fields
• Carts and checkout processes
• Calls to action

Prioritizing Your Content Properly

We talked about the importance of your site’s content hierarchy a bit in part four of our series, but we’ll expand more upon that basic analysis here. Content prioritization, or your content hierarchy, means nailing down the exact order in which your audience should digest the information on your site to ensure they have the best, fullest understanding of the benefits of your product or service.

To this point, you may have heard designers talk about the importance of placing important information above the fold. “Above the fold” is an old newspaper term that transitioned to web design terminology in the early days of the internet. It refers to any content that is displayed to the user visiting your site, without scrolling—much like a newspaper would put the most important story above its mid-page fold. 

However, the concept of above-the-fold content, much like most print newspapers, is a bit outdated for a few reasons. For starters, many users now visit websites from smaller screens (like phones and tablets) as mobile traffic continues to outpace desktop. For that reason, many site visitors  expect to scroll, so above-the-fold content holds less weight than it once did. 

That’s not to say above-the-fold content can’t be useful—landing pages offer a great example—but be wary of placing too much importance on it. When you’re designing, think about the Serial Position Effect instead. 

A term coined by German psychologist Hermann Ebbinghaus, the Serial Position Effect refers to the fact that people are most likely to remember the first and last items on a list. This is because our brains show favoritism to items we see first (primacy effect) and items we’ve seen most recently (recency effect).

This tactic works well when you need users to recall only one or two important takeaways from your content (perhaps a product name or a major benefit). For more complex topics with multiple steps or a lot of information to process, however, you’ll want to take a different approach.

A Progressive Disclosure tactic is a better way to help your users understand highly complex topics. It refers to the technique of spreading information across multiple screens and requiring interactions to move from one to the next. This helps lower the chance that your end user will feel overwhelmed by the information presented. Truncated content and accordion displays are just two of the common ways designers use progressive disclosure in web design.

Both of these effects will help you tap into the natural human thought patterns that can solidify your message in the minds of consumers. Before they even start reading your content, though, users might decide to navigate through your site for something specific. The next section will help you make that process seamless for your visitors.

Structuring Your Navigation

Most website navigation buttons are structured in one of two ways: in a bar across the top of the page or in a hamburger menu off to one side. This type of navigation has become almost second nature for users, and as the saying goes, “if it ain’t broke, don’t fix it.”

When you’re designing your navigation, it’s easy to follow the standard, but there are a few instances where you might want to shake up your structure. The first idea you should concern yourself with is Hick’s Law. 

In the early 1950s, two researchers, William Edmund Hick and Ray Hyman, examined the relationship between the amount of stimuli and the amount of time it took an individual to make a decision. Their conclusion? Too many options is paralyzing. An expansive navigation menu with tons of clickables, then, may be too overwhelming to new users.

Instead, your navigation buttons should be clear, well-placed, and few. For larger sites, nest buttons of lower importance under the umbrella of another button in your navigation. For example, Amazon’s top-level navigation is fairly simple, but by hovering, users get an expanded view of their options.

By limiting the number of buttons you initially display to viewers, you help them narrow down their choices and make better navigatory decisions. You can also use the primacy effect to push your users to take the action you’d most like them to take. 

While most websites organize their navigation in the same way (About page, then Services or Products, then Contact), placing your most important content first will help it gain more visibility. So, if your primary objective is getting potential clients to contact you, try placing the Contact page button first in your navigation.

The navigation menu is where many designers struggle to find the right balance between their aesthetic vision and the end user’s experience. The aesthetic-useability effect refers to the correlation between a pleasing design and a user’s tendency to overlook functional issues.

As it happens, users do tend to judge a book by its cover, and they’ll be more forgiving of functional problems if the site they’re on looks nice. So, when you’re completing your UX testing, take extra care to look through feedback from users who focus on the positive effects of your design but have little to say about how it operates. Drill into their results to make sure that they’re not forgiving your functional failures in favor of praising your design.

Creating Gates and Form Fields Your Visitors will Use

Even though users are spending more time online than ever before, they’re becoming less likely to give out personal data. This is probably one of the reasons most people have at least two email addresses. 

Only one is the primary email address that’s checked regularly. The other is, unfortunately, rarely checked. Either it’s an old account the user has lost access to, or it’s being used  when an email address is required for access to something, but the person behind the username doesn’t want a ton of marketing emails flooding their main inbox.

When a user fills out a form field to contact your business or download gated content, whether it’s actively or subconsciously, they go through a quick cost-benefit analysis in their minds. They’re thinking about whether or not filling out the form is worth giving up space in their inbox—and in their mind.

The best way to ensure your value outweighs your users’ hesitation is to make your form fields as easy to use as possible. While it’s tempting to ask a user for lots of demographic information so you can get the most qualified lead possible, doing so runs the risk of losing them entirely. Optimize your forms for auto-fill to help your users input their information even more quickly, saving them from some of the cost of submission. 

Additionally, if you find there are questions you feel you’d like to include but that may require too much of some users—like a field for a short comment—making it optional will allow visitors the opportunity to lower their cost of entry even further.

You can also create psychological incentives for filling out a form field throughout the user journey to help push your visitors to submit. This is called priming, which is the act of intentionally using words or images that are relative to one another to create faster, more memorable associations in the brain. These small triggers can mean the difference between a user inputting their “junk email address” or their primary one.

A simple way some web designers prime their visitors to fill out a gate or contact form is through semantic priming. You can use semantic priming to create linguistic associations that subconsciously push visitors to submit a form. For example, when marketers promise a “quick” or “easy” solution to an issue with the content on the other end of the gate, those trigger words may also color the way in which the visitor sees the action of typing in their personal data. 

Solidifying Conversations Through Carts and Checkouts

When you’re an online seller, your checkout process is one of the most important aspects of your site’s design. It’s the make or break moment for conversion, so if something goes awry or if it takes too long, you may miss out on a sale.

This is when a lot of marketing teams will rely on digital banner campaigns to remind users about their product. However, the effects of “banner blindness” can curb the progress of even the best laid digital campaign.

Banner blindness is a type of selective disregard in which people will naturally ignore things they deem irrelevant to the task at hand. That’s why it’s so easy to tune out digital ads when you’re scrolling for a recipe or billboards when you’re driving. The brain will auto-filter as much irrelevant information as it can, and since ads are everywhere, they’re one of the first things to go. So, how to combat banner blindness? 

If possible, abandoned cart emails or on-page pop-up messages can help turn your potential buyer into an actual buyer. These messages are an attempt to bring the user’s attention back to the checkout process. To further spur the subconscious into action, use the Zeigarnik effect.

This is an observation made by Lithuanian psychologist Bluma Zeigarnik that stipulates tasks which have been interrupted or are unfinished are more easily recalled than tasks that are complete. It’s the reason television shows often include cliffhangers; you’re more likely to remember—and return to—something that feels unfinished.

So, when you display a pop up about a user’s abandoned cart, including an incomplete progress bar or numbered list of steps will help them recall what they were doing when they left their cart, including the “checkout” mindset they were in. That incentivizes the buyer to go back and finish what they were doing. The proposed satisfaction of a completed task may be the final push the user needed to finish their purchase.

Creating the Call to Action

The call to action is arguably the most important piece of your site. No matter what your goals are in creating a website—a sale, gathering data, building a social following—the call to action is where you get to ask for it.

For most sites, you’ll probably have multiple calls to action with varying degrees of importance placed on them. If your primary goal is to sell products, for example, you’d probably still have secondary requests like subscribing to a newsletter or referring a friend. This is great, because not every user wants to follow the exact same journey, so giving them options allows them to choose their own path.

This is another instance in which Hick’s Law comes into play. Also called the paradox of choice, this occurs when an excessive amount of options causes decision paralysis among users. To save your users from the paradox of choice and help them make quick decisions, identify and strictly adhere to using only two-to-three calls to action. This will help speed up your user’s processing time and allow them to narrow down the best choice for their needs more effectively.

As one of the most important aspects of your site, the call to action should also call for a lot of attention. An easy way to make these sections stand out is by using the Von Restorff effect. Also known as the isolation effect, this is the observation that, when multiple stimuli are presented, an item that is noticeably different from the others will be more easily remembered. 

So, when you’re creating your calls to action, identify and differentiate the one choice you’d most like your visitors to take. To continue using the example above in which users are asked to either buy a product, subscribe to a newsletter, or refer a friend, there’s a clear primary goal: making a sale.

By differentiating the sales call to action from the other two using colors, size, shape, typography, placement, or some other physical element, you call greater attention to your most important request. While every page should have at least one call to action, you can promote one over another and incentivize users to take the most important action using the Von Restorff effect.

The Minds Behind Great Design

There is so much more to uncover and understand about the psychological impacts a website’s design can have on its users, and this series only scratches the surface. That’s why we’re continuously dissecting design from all angles and curating content with freelancers and design professionals in mind.

While we’re passionate about sharing great developer and designer resources, we’re even more passionate about creating the best WordPress hosting experience for our customers. Check out our plans to learn more about your options with WP Engine!