These Disastrous Web Design Errors Will Kill Your Conversion Rates

DELIVER BETTER EXPERIENCES

LEARN MORE

By Marc Schenker

Image from Digital Marketer

Almost every company you’ll come in contact with nowadays has a website, and unfortunately, many of them feature disastrous mistakes that impede their marketing efforts. Take a poorly designed website, for instance. What's your perception of the company? Are you likely to buy something from them? Probably not, I’d bet. Moz founder and marketing guru Rand Fishkin further describes how ugly websites can hurt a brand’s marketing power. On CEOs and bad-looking websites, he says: “Much like parents, it's often the case that a CEO or a CMO or VP of marketing or a business owner . . . they look at their website and they go, ‘Oh, it's so beautiful. It's amazing. It's just what I wanted. It's perfect.’ They can rationalize that even while looking at just a junky, horrifying piece of crap.” Bottom line: Don’t let senseless design mistakes destroy your brand’s reputation and marketing power. Here are 10 of the worst ones to make…and how to fix them:

Disastrous web design errors and how to fix them

1. Unattractive aesthetics

Speaking of bad-looking websites, sites with unattractive aesthetics are troublesome. While it’s a great principle to ‘never judge a book by its cover,’ it’s one that doesn’t apply much to web design. As ConversionXL points out, unattractive sites have poor conversion rates. Take the following site for instance:

Let’s be blunt: This site is ugly. It doesn't make me want to browse, and it definitely doesn't make me want to spend money. The font and color combinations are horrendous, and the site is lacking any distinctive qualities or aspects, whatsoever. Fix a design like this by using tried-and-true approaches like:

Gestalt design
White space
Color contrast
Visual hierarchy

With these changes, site visitors will stay longer, giving you a better chance that they'll convert. In need of inspiration? Check out 2015's best visual design winners - aesthetics.

2. Calls to action that aren't readable

Size does matter when it comes to your call to action (CTA). Make your CTAs as obvious as possible so visitors will click on that offer, subscribe button, or product page. Tiny CTAs get overlooked by most users, so guard against this by making your CTAs the biggest buttons on the page.

In this example, the main CTA is entirely too small and thus gets easily lost among the other elements on the page. If their going for downloads, they’re unlikely to get them with a CTA like this. Marketers must keep in mind that most users are scanning web content, not reading, and therefore, can easily miss a call to action if it's not properly optimized. Which is why it’s important that marketers work closely with web designers to ensure that these elements really pop. Your CTA is the most important element of your web page, so the more people who see it, the more clicks and conversions you'll get. Follow this example:

The big, orange button is impossible to miss. And the drop shadow and rounded corners make it clear that it's clickable.

3. Calls to action that don’t look clickable “Clickability” refers to whether or not a web page element can be clicked, or looks like it can be clicked. This should be obvious to your visitors - they should never have to think twice about it. The user experience comes first and should take precedence over other aspects like personal taste. Sometimes that means designing for those who are novice internet users. Don’t just assume that all web users will recognize your subliminal messages. When CTAs don’t look clickable, obviously fewer people will click on them. So many websites have adopted techniques like drop shadows and gradients to ensure users don’t mistake their CTAs for other static web elements. Txtengine does this for its call to action button:

Mirror this example when creating your call to action buttons, and employ some of these techniques for clearly clickable CTAs.

4. Absence of information architecture Information architecture (IA) refers to the order in which users are meant to absorb site content, and should follow the path to purchase. Sites with disorganized or absent IA run the risk of high bounce rates (when a user abandons a site after viewing only one page). Visitors lose patience easily, so if your site frustrates them in any way, they're likely to click away. Make your content easy to understand and organize it in a way that flows naturally to even the least intuitive web users. Here's what not to do:

This example contains wayyy too much copy and is laid out in a way that's extremely difficult to interpret. Wireframe your site to better establish what the IA should be, so that your visitors understand what to do and in what order. Your design should be simplistic (but not over-similistic), clean, and intuitive. See Microsoft’s homepage for guidance:

5. Obsolete design

Skeuomorphic design is a good example. The approach went out of style around the time Apple - a long-time proponent of skeuomorphic design - abandoned it altogether. It is characterized by incorporating real-life design attributes into digital design. For instance, Apple’s Notes application, which looks like an real-life notebook. For all you Android types, here’s a visual example:

Notice the zipper scrollbar. Back in the day this might have gotten some ‘oohs’ and ‘aahhs,’ but today it’s embarrassingly outdated. This can cause visitors to see your brand as uninformed and not as innovative as the others in your industry. And that can lead to an negative opinion about your brand overall, which translates to a decline in product sales in the long run. Avoid this by staying current with the newest and most popular design trends. There are many resources to help you keep up to date, such as Dribbble, Readz, and Awwwards.

6. Choice overload Choice overload leads to choice paralysis, aka when your site visitors can’t make a decision, so they don’t do anything at all. What this means is they don’t convert, otherwise known as your worst nightmare. Choice overload results from too many links on a page or even too many social share options. The following web page perfectly exemplifies this:

The fix: Simply reduce the number of choices your visitors encounter on your site. Remove irrelevant or unnecessary links, ads, CTAs, and navigation items. It will help to first map out the average user’s journey to purchase and then design your site accordingly.

7. Slow page load times Slow page load time kills conversion rates. According to surveys by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that doesn't load within 3 seconds. And obviously, the fewer people who stay on your site, the fewer people who convert.

Let's look at Salesforce as an example. According to Alexa, the site’s average load time is 1.18 seconds and is faster than 66 percent of all sites. If you look into their bounce rate and average page views per visitor - two great indicators of engagement levels - you'll see pretty impressive numbers there, too.

When pages load fast, visitors spend more time on your site. When they don't, more visitors will bounce. Here are some tips to decrease your page load time:

Minimize HTTP requests
Limit 301 redirects
Utilize server side caching
Optimize your images
Use a CDN

8. Cluttered design

Sites with little to no minimalism are overwhelming to users. Too much clutter or complexity makes it hard for visitors to absorb your marketing messages. Here's what not to do:

Note the excessive use of images, colors, shouting (capitalization), styling, and overall clutter on the page. I’m not sure where to look or what to click because there's so much going on. It’s much more useful to show visitors only the most important or necessary information. Basically, anything vital to making a decision or taking action. Designers should organize websites and web pages into distinct sections, with information logically placed in the appropriate compartment. That way, visitors can make better informed decisions. As a rule of thumb, don’t give your visitors everything all at once. Instead, encourage them to browse around and learn more about you before trying to sell to them right away. Not only will this help them get to know the brand, but they'll be more likely to convert, having spent so much time on your site already.

9. Poor use of color Understanding color is design 101. Web designers are taught to select colors that are legible and make for an aesthetically pleasing web presence. Failure to understand color palettes can lead to an off-putting design that repels visitors and sours conversion rates. Here are some nicely done color schemes:

Both images adhere to the best practices of color theory, making them much more appealing to look at than the 'what not to do' examples earlier in this post. The first image, from the Teye homepage, uses a complementary color scheme of blue and brown (colors at opposite ends of the wheel), creating a vibrant look that contrasts nicely. The second image is from Australia’s Quay Restaurant. It features an analogous color scheme, characterized by red, blue and purple, colors placed close to each other on the color wheel. This creates for an inviting and tranquil look. Spend time researching color schemes before implementation. The time spent up front will pay off in the end.

10. Abysmal font Finding the right typeface is essential to the readability and legibility of your web content (two different things by the way). If your content is hard to read (e.g., is too small, compact, etc.), it will sabotage your content marketing efforts. To adequately absorb your content, visitors must be able to read it first. Which is why font is so important. The following site features poor font choices that, while appropriate for the nature of the site, would undoubtedly frustrate visitors anywhere else.

Use generous font size, appropriate colors, typeface, and tracking (spacing between letters), for better readability and legibility. That way your visitors can read and absorb your content, and might be encouraged to share it, as well. As you already know, the more exposure you get, the more conversions are possible.

Tools to help you design better websites

Feedback Army: Simple, cheap usability testing for your website.
UserTesting: Ensure that your users have a great experience.
Unbounce Checklist: See if your landing page has all that it needs.
Button Optimizer: Design and customize awesome call-to-action buttons in minutes.
Readability-Score: Determine whether your content is easy to read.
PageSpeed Insights: Make your web pages faster on every device.
Check My Colours: Find out how your site’s color contrast measures up.
Google Webmasters: Get control over your site analytics.
Your team: Always get the opinions of your employees or colleagues. They may point out something you are too close to see.

Conclusion

Don’t let these disastrous web design mistakes drag down your conversions. Use this post as a checklist of mistakes to fix now and avoid later. Do your due diligence to ensure that your site’s visitors have the best possible experience with your site and its contents. Remember that even the simplest mistakes can kill conversions right off the bat. The key is recognizing when you’ve made one. What design mistake do you think is the worst of them all? Tell us what you think by clicking one of the social links below.

Websites: How To Nail A Positive First Impression

Marc Schenker Marc Schenker is a writer and expert in business and marketing topics like e-commerce, B2B, digital marketing and design. He is a regular contributor to various, highly ranked publications such as Shopify and Web Designer Depot. To find out what really makes him tick, head on over to his website and don’t forget to make his day by liking his Facebook page.