7 Seemingly-Innocent, Yet Commonly Made, Design Mistakes that Can Hurt Your Marketing

7 Seemingly-Innocent, Yet Commonly Made, Design Mistakes that Can Hurt Your Marketing

Web designers should be students of marketing, because every web design, no matter how aesthetically pleasing or simple it is, is only a means to an end.

When designing your websites, you might not necessarily have the means or time to go back to marketing school, but you should at least design them with an understanding of marketing and what makes people tick. At the very least, you don’t want to violate some very essential marketing principles.

In this article, we’ll look at seven of the most common design mistakes, and how you can avoid making them, so your marketing and design efforts won’t work against you.

Mistake #1: Not understanding the power of image positioning

“An image is worth a thousand words,” you’ve been told.

You’ve also been told that the brain processes visuals much, much faster than text. That might be true, but it’s sometimes better not to use images than to use the wrong image or to use images improperly.

When it comes to using images, what many designers do is add random images to jazz up their web page and make it appear more “visual.” Well, the verdict is in: images used in such a way are usually ignored.

Use images the right way

To ensure your images have the maximum impact, there are some general guidelines you should follow.

  • Use images of real people instead of stock photos. According to research by Nielsen Norman Group, images only work when they are of real people—readers are likely to ignore your images altogether if you use stock photos. A VWO study involving moving services company Harrison Movers came to similar conclusions: when they replaced the initial stock photo the moving company used with photos of the company’s crew or their truck, conversions increased by more than 45 percent.
web-design-mistakes-stock-images
Replacing stock images with real images of the company themselves increased conversions by more than 45 percent.
  • Images are more effective when they contain information about the product they are promoting.
  • Giving people the option to view a larger version of a product image is going to yield better conversions. The expanded image should be at least twice as big as the original image.
  • Ensure you position your images with user flow in mind. When you use images that include humans, it is important to realize that people are likely to direct their gaze at the focus of the person in your image. If you use an image of a person looking left, readers of your web page are likely to look left and vice versa.
web-design-mistakes-heat-map
This heat map shows that when human faces are used in images, users will direct their focus to the face.

You may also like: Five Useful Usability Testing Tools Proven to Convince Clients.

Mistake #2: Violating the principle of sensory adaptation

In an article on its popular blog, Hubspot once famously declared, “red beats green.” They were testing which color yielded a higher conversion rate, and their study intended to put all button color controversy to rest. But not so fast!

Just spare a moment and take a look at the competing pages from Hubspot’s test:

web-design-mistakes-button-color

Notice anything?

Let me help you: right from the get go, the study was biased against the color green. The page used for the test had multiple green areas already, beyond just the button color. So of course, in a sea of green, the red button stood out more, and was declared the winner. But in reality, the color orange, yellow, or blue would have outperformed the color green, too—there was just to much green on the page already.

"When we are repeatedly exposed to more of the same thing, we tend to get accustomed to it and tune it out."

The reason why the color red outperformed in Hubspot’s study is the reason why some CTAs will always outperform others: sensory adaptation. In essence, this is our natural tendency to tune out stimulus after repeated exposure to it.

When we are repeatedly exposed to more of the same thing, we tend to get accustomed to it and tune it out. Case in point: do you feel your clothes or your shoes right now? Most likely not. Take it off and put it on again, you’ll most likely feel it for awhile, before you become accustomed to it once again.

How to avoid this mistake

To not violate the principle of sensory adaptation, make sure the key elements in your design that you want to draw attention to—such as CTAs, links, etc—stand out in comparison to the general look and feel of your website.

For example, in the screenshot below, you will notice that the most dominant color on the page is the color blue (which is the main color of the website, and the color of the title, headings, and subheadings). However, when it comes to key elements such as the CTA and links, the dominant color is yellow:

web-design-mistakes-color-theory
In a similar way, if your main design color is blue, then make sure you avoid using the color blue for your CTAs. Instead, try using a color that is in the most contrast to the overall look and scheme of your website.

Understand the psychology of color and design

Take our Designing for Conversion course and learn how to design pages that convert your clients' customers. Use psychology to power your marketing, convert more customers for your clients, and create amazing designs.

Not a Shopify Partner yet? Sign up!

View course

Mistake #3: Not tapping in to the bandwagon effect

The bandwagon effect is a psychological phenomenon in which people do things mainly because other people are doing it, regardless of their own beliefs or convictions. In essence, it is when social proof compels people to, “jump on the bandwagon.”

Good design, from a marketing standpoint, naturally incorporates the bandwagon effect, and understanding and leveraging the power of it can mean the difference between a weak design or a conversion powerhouse.

Incorporate the bandwagon effect into your designs

There are a number of tweaks you can make to help leverage the power of the bandwagon effect:

  • Incorporate a constantly-updated tracker showing the number of users you have. Remember McDonald’s “Over 99 billion served” notice placed below their signs? Use something similar, but embedded into your design. This should only be used when you have a lot of users, however.

  • Leverage the power of positive user reviews. If you’re not incorporating user reviews into your design, you are missing out big time! Research from Spiegel shows that 95 percent of shoppers read online reviews before making a purchase, and that displaying online reviews can boost your conversions by up to a massive 270 percent. If people are saying positive things about you, there’s no reason to hide it. Make it clear.

  • Showcase positive testimonials about your product and your services. If people say you are cool, let the world know that people said you are cool.

Mistake #4: Ignoring the principle of just noticeable difference when doing redesigns

Snapchat faces backlash after app redesign.

Facebook faces backlash over design changes.

Twitter gives itself a major redesign - and its users aren't happy.

Twitter reinstates ‘Block’ function after global backlash to redesign.

Snapchat’s big redesign bashed in 83% of user reviews.

The above are actual headlines of articles published in major publications detailing reactions to redesigns done by some of the biggest social media sites. It seems every redesign by a major company is trailed by backlashes.

It’s not that people are averse to redesigns, though. It is that they are averse to sudden and drastic redesigns.

"We are naturally wired to be averse to change, so it is dangerous to just drastically redesign or change anything: people will protest."

If you take a look at the third and fifth headlines above, I intentionally bolded the words “major” and “big.”

If you read the articles accompanying the above headlines, and if you study pretty much every case in which there is a backlash to a redesign, it is almost usually because the redesign is “big,” “major,” “drastic,” and “sudden.”

We are naturally wired to be averse to change, so it is dangerous to just drastically redesign or change anything: people will protest. And in certain cases, like that of Snapchat, there can be serious economic impact.

Make changes to your design without backlash

Make your changes without violating Weber’s law of just noticeable difference. Weber’s law states that there is a minimum amount by which the intensity of a stimulus must be changed in order for changes to be perceptible to the senses.

In other words, if you want to get away with design changes that are significant, make it gradual and iterative. People will barely notice a thing until the design is completely different.

You may also like: Finding a Balance Between SEO and Amazing Website Design.

Mistake #5: Not designing options based on an understanding of the compromise effect

Another seemingly-innocent, yet very common, mistake that many businesses make is that of ignoring the compromise effect when designing their options.

In essence, the compromise effect refers to people’s tendency to choose an intermediate option when there are extremes. For example, when people are presented three options—a very expensive option, a very cheap option, and an option somewhere in the middle—most people will go for the option in the middle. Armed with this knowledge, you can more effectively design your options for conversion.

"A principle that explains how powerful placeholder content and default options can be in web design is the default effect."

Just how powerful is the compromise effect? Let’s take a look at a 1992 study comparing sales of Minolta cameras by Itamar Simonson.

In the study, Simonson presented a group of consumers with a choice between two Minolta cameras, one more elaborate and expensive than the other, and observed which of the cameras consumers decided to purchase. Consumers were evenly split between the two cameras.

Then, Simonson made a small tweak to the experiment, and added a third camera that is even more expensive than the first two. To Simonson’s surprise, after the addition of the more expensive camera, sales for the least expensive camera dwindled and only a few customers purchased the more expensive camera. The majority went for the mid-priced camera.

How to design with the compromise effect

There are some basic ways you can use the compromise effect in your designs for maximum conversion.

  • When designing your options, ensure that there is a middle option that people can choose. If you don’t have such an option, introduce a new more expensive option that positions your preferred option as the middle one.

  • It is important to realize that the number of choices still matters even in the context of the compromise effect. While introducing extreme options on the higher and lower end is likely to drive people to select the middle one, research has shown that including too many options can force people to choose the low or high extreme.

  • When presenting the options, the compromise effect can be used not just conceptually but also in how the options are presented. For example, the middle option can also be strategically designed to be in the middle of options presented on your landing page. The example in the below image courtesy of Hostinger shows this in action. Notice how the middle option is the middle ground both conceptually and design-wise:
web-design-mistakes-compromise-effect
In this example, the center option is the middle ground both design-wise and conceptually.

Mistake #6: Not understanding the default effect

“Lorem ipsum dolor sit amet.”

Many designers are familiar with placeholder content and default options, but very few actually realize that these design elements can serve as powerful tools for enhancing the conversion power of your web design.

A principle that explains how powerful placeholder content and default options can be in web design is the default effect.

The default effect is a cognitive bias in which a default option or offer is more likely to be chosen compared to other options. In other words, when people are presented with a number of choices, including a default choice, they are more likely to choose the default choice than the other options available.

Just how powerful is the default effect? One study on it looked at countries where organ donation was an opt-in policy, versus those where organ donation was an opt-out policy. They found that organ donations were about 80 percent higher in countries with opt-out policies than in countries with opt-in policies. In fact, another study found that auto-enrolling participants to a retirement plan more than doubled participation rate, increasing enrollment to 91 percent from 42 percent.

There’s a key lesson in this: stop ignoring the power of default options. Whether it is in plans you highlight, options you pre-select for people, or information you auto-fill for them, effectively leveraging default options can be a powerful conversions booster.

You may also like: How to Use Smart Defaults to Reduce Cognitive Load.

Mistake #7: Ignoring the risk compensation theory

Do you know that the average cart abandonment rate is 78.65 percent? In other words, roughly three quarters of people who read your sales page and decide to click the checkout link will fail to convert.

Why is cart abandonment so high, and why do a lot of people fail to convert after already deciding that they like a product? Often, this is due to the fact that many businesses ignore the risk compensation theory when designing their websites, landing pages, and checkout pages.

In essence, the risk compensation theory states that people adjust their behavior in accordance to the perceived level of risk: when they feel that they are at greater risk doing business with you, they are going to be very careful and are less likely to go ahead with the decision to transact with you. When they feel that they are highly protected when they transact with you, however, they are highly likely to be less careful and will most likely go ahead and do business with you.

As simple as the risk compensation theory sounds, many marketers ignore it in their design—and this explains the huge cart abandonment rate.

You may also like: Designing Social Proof Into Your Ecommerce Website.

Avoid the risk compensation theory mistake

You can avoid ignoring the risk compensation theory by doing the following:

  • Start using recognizable trust seals on your website. Take a moment and check to see if you’re using recognizable trust seals on your website, such as high quality images and strong load speeds. If not, you’re probably already losing about half of your sales. At least that’s according to research by Econsultancy and Toluna: 48 percent of people won’t trust a website that does not use trust seals.

web-design-mistakes-risk-compensation

  • Communicate that users can reverse their decision at anytime. You can also make users feel safe, and reduce the perceived risk of doing business with your client, by communicating that they can reverse their decision at any time. This could be through a refund or return policy that gives them a recourse should they not like your client’s product. Make this policy easy to find in your design.

  • Leverage positive social proof to boost trust in your client’s brand. Social proof is often an integral part of designs that converts. Positive social proof that highlights the number of users your client has, positive reviews about your client’s products, and key influencers patronizing your client can do wonders for conversions.

Avoid these mistakes to increase conversion

Most of the above tweaks will only take a few minutes of your time, yet they can have significant impact on your client’s bottom line. By designing your client’s website with an understanding of the above mistakes, you can be assured of much better conversions.

How have you avoided making these seven mistakes? Tell us your thoughts in the comments below!

About the Author

John Stevens is the founder and CEO of Hosting Facts. He is a regular contributor to top publications including Business Insider, The Next Web, AdWeek, Entrepreneur, and others.

Grow your business with the Shopify Partner Program

Learn more