Related Articles
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.
Stay in the know
Actionable advice on how to create better content & design, delivered to your inbox.
No charge. Unsubscribe anytime.
< BACK TO OVERVIEW
built with Readz
RESOURCES TO BOOST YOUR ONLINE CREATION AND PUBLISHING PROCESS
Create Content Experiences.

Better. Faster.

/ / newsletters
/ / white papers
/ / magazines
/ / content hubs
/ / annual reports
/ / brochures
red-warning-triangle-and-broken-car-at-the-si.jpeg

These Disastrous Web Design Errors Will Kill Your Conversion Rates

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

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:

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.
In this example, the main CTA is entirely too small and thus gets easily lost among the other elements on the page. If they're 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:
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.

Conclusion

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:

1. Unattractive aesthetics

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.

2. Calls to action that aren't readable

Image from Digital Marketer
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.


  • Minimize HTTP requests
  • Limit 301 redirects
  • Utilize server side caching
  • Optimize your images
  • Use a CDN
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.
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:

8. Cluttered design

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

  • UserTesting: Ensure that your users have a great experience.
  • Button Optimizer: Design and customize awesome call-to-action buttons in minutes.
  • Your team: Always get the opinions of your employees or colleagues. They may point out something you are too close to see.
Readz-logo-navy
Start publishing online newsletters like Deloitte, IBM, and Nike.

Get a demo of Readz today - and never look back.
closebuttonblack
Hi, We really should talk!
We'd love to introduce you to Readz, the digital publishing platform used by IBM, Nike, Deloitte, Aon and many more.
Hop on the phone with one of our publishing consultants and get customized advice on how to get started. Readz brings together technology and expertise to help you launch top-performing content.