Avoiding Conversion Pitfalls: 7 Website Design Features to Reconsider

Certainly, this scenario may ring a bell.

You come across an enticing new WordPress theme on Themeforest.

It's the perfect amalgamation of features you seek—clean and featuring a contemporary design.

And the best part? It's priced at just $50!

This is a significant saving compared to the thousands you might spend on a basic custom design.

Excited, you make the purchase and promptly start setting it up. However, after a few hours, it doesn't quite look right. There's an inexplicable discrepancy.

Perplexed, you revisit the original version to discern why yours doesn't mirror the pristine copy that convinced you to make the purchase.

Contemporary design trends lean towards minimalism. Consider the design you're currently perusing—it embraces ample whitespace, incorporates a few striking accent colors, and features clean typography.

On the contrary, the only distinguishing factor is the high-quality images.

They seamlessly align, indicating thoughtful consideration in the site's design—a deliberate choice.

The most exceptional websites on the Internet typically feature professional photography and custom images crafted to elevate the overall aesthetic.

When this doesn't occur, attempting to add photos from various sources can be challenging.

So, what's the go-to shortcut?

Many opt to use Pixabay to discover free, high-quality images. While stock images are suitable for blog posts like this one, they can sometimes hinder conversion-driven pages of your site.

Allow me to illustrate.

Visual Website Optimizer conducted a straightforward split test, comparing a genuine photo with a stock one.

They introduced this sole variation to determine which encouraged more CTA clicks, specifically for new registrations.

At the outset, the authentic image surpassed the stock image, leading to a remarkable 161% more CTA clicks. Additionally, it boosted registrations by 38.4%.

Stock photos not only diminish the overall experience and aesthetic appeal but can also undermine a website's credibility.

This is particularly prevalent with smaller websites. Consider the following example:

The visual impact of this example is concerning, potentially posing a threat to their credibility, especially when coupled with the observed decline in conversions.

The potency of images lies in their ability to be processed subconsciously in a mere 13 milliseconds.

Images possess the ability to boost engagement by an impressive 94%, making them one of the most effective means to drive action and conversions.

However, does this mean you should always utilize the best, largest, and highest-resolution photos? Not necessarily. Here's why.

As demonstrated earlier, stock photos on conversion-centric pages can diminish conversions by undermining credibility. However, opting for massive and visually stunning visuals doesn't necessarily equate to the ideal choice.

Consider, for instance, the full-screen video background on a website:

Looks nice, right?!

It stretches across your large desktop monitor and looks pixel perfect.

So what could be bad about it?

This.

Regrettably, the site with the full-screen video background suffers from significant loading issues, taking a whopping 12 seconds to load. This delay could potentially result in a loss of 31% of its traffic, as users tend to avoid waiting extensively regardless of the website's visual appeal.

Adding to the concern, Google's recent mobile page speed benchmark report indicates that the likelihood of a user bouncing from a site increases by 113% if it takes seven seconds to load.

Fortunately, Google has introduced a new and improved tool, Test My Site, allowing website owners to assess their site's performance. Upon testing the mentioned site, it was found to be performing towards the lower end within its industry.

The Test My Site report offers valuable recommendations to address the issues impacting page loading times. It's essential to consider and implement the suggested improvements for optimal website performance.

Optimizing images is crucial not only for speeding up your website but also for improving SEO and conversions. The number of elements on a page, including images, significantly impacts conversion rates. To enhance loading times:

• Crop and resize images to fit your site's dimensions.
• Compress image file sizes using tools like WP Smush.it.
• Utilize a Content Delivery Network (CDN) such as CloudFlare for efficient image hosting and delivery.

Question: Which of the two CTAs below would you click on first?

Your guess is as good as mine!

They’re both lousy.

The only possible saving grace here is that one CTA is located beneath the other one. However, otherwise, they look more or less the same.

Their overall size is the same, and the “Click Here” copy, while a good effort, also features the same exact weight and background.

In other words, there’s no visual cue to the reader of which options are primary vs. secondary.

You’re not exactly sure at first glance which one you should click on.

That’s a problem because “people need to be led,” says MarketingExperiments.com.

In one experiment, researchers took one page with three equally weighted CTAs and merged them into one primary one, like this

The logic behind this decision was simple: “People need to know where they can get the most value. So, point them in a clear and decisive direction to the main call-to-action.”

To illustrate this point, Marketing Experiments ran a similar test, showing the immediate impact you could generate just by changing the design of your CTA buttons.

Take a look at the difference between these two.

This time, the test generated a 64% conversion increase by helping visitors make easier decisions.

Question: Which of the two CTAs below would you click on first?

Here’s another significant issue.

How clear is your website’s message?

Let’s take a look at an example.

See if you can figure out what’s wrong with this landing page.

For starters, nobody is reading through this entire wall of text.

Second, the jargon and sophisticated ‘corporate’ language make it almost illegible.

You should always keep the reading level of your website at less than a 7th or 8th-grade reading level.

Studies have shown that things which are easy to understand (words, names, etc.) are actually seen as more believable!

Management consulting company, McKinsey, refers to complicated writing as “talking past your customers.”

Essentially, you’re saying one thing, but customers care about something else entirely.

You don’t think ‘messaging’ has anything to do with design? Take a look at this next example, and tell me if you still think that.

This is a positive example. The page is simple and to-the-point.

The design emphasizes the white space around the header and calls attention to the blue-shaded CTA section.

It’s picture perfect.

Your guess is as good as mine!

They’re both lousy.

The only possible saving grace here is that one CTA is located beneath the other one. However, otherwise, they look more or less the same.

Their overall size is the same, and the “Click Here” copy, while a good effort, also features the same exact weight and background.

In other words, there’s no visual cue to the reader of which options are primary vs. secondary.

You’re not exactly sure at first glance which one you should click on.

That’s a problem because “people need to be led,” says MarketingExperiments.com.

In one experiment, researchers took one page with three equally weighted CTAs and merged them into one primary one, like this

The logic behind this decision was simple: “People need to know where they can get the most value. So, point them in a clear and decisive direction to the main call-to-action.”

To illustrate this point, Marketing Experiments ran a similar test, showing the immediate impact you could generate just by changing the design of your CTA buttons.

Take a look at the difference between these two.

This time, the test generated a 64% conversion increase by helping visitors make easier decisions.

Don’t Make Me Think is one of the best books on design and usability to drive conversions.

The premise of the book is pretty obvious from the title.

It says that websites should work exactly like people expect them to.

Have you ever seen a child pick up an iPad for the first time?

It usually takes only a few seconds for them to figure out how to start using it.

Ideally, websites should be the same way. Unfortunately, they aren’t always.

For example, sometimes the flat design trend can be taken too far. When done right (like the example below), it can simplify pages so they’re immediately understandable.

Please write in English language.

However, when not done well, they may lack the signals that inform users what to do next.

Here’s an example.

Take a look at this image, which is a heatmap from the software CrazyEgg.

The heatmap shows that nobody is clicking on those images, even though they’re supposed to!

The page itself looks great, but the flat design offers no indication to the user that they should click on those elements.

As a result, nobody is viewing those project case study pages. And therefore, nobody is hiring that company!

Even something simple like a headline, button, or hover effect would let users know they’re supposed to be clicking on those page elements.

For example, check out this example from HubSpot.

You can see that it’s an image CTA (like the previous example).

Instead of assuming you know what it is or why you should click, there are cues that should help you.

Headline: “Free Template”

Subhead: “Free Marketing Goal-Setting Template”

Copy: “Determine your marketing goals and set deadlines for next year with this free Excel template.”

Image: Mac laptop with an example of the goal-setting template.

CTA: Button with the next “Get Your Template” and an arrow.

See the difference?

They leave nothing to chance.

You know exactly what to do when you see it. And the extra details also help you determine why you should click on it.

Page organization matters.

It matters for conversions.

For example, your “About” page should just be called “About” as opposed to “Team” or “Leadership, “Unity,” or “Who We Are.”

While the other page titles might be clever, not everyone will immediately understand what each one is.

That’s why all of the pages in my navigation are really simple and commonly used.

Information Architecture (IA) is similar in that it deals with organizing your website’s information.

Certain pages should be organized similarly so that people would know exactly how to find a new product even if they’ve never visited your site before.

Here’s what I mean.

You go to Zappos.com to look for a new pair of shoes.

Up top, you see that they’re split by gender (Women and Men), then age (Kids), then Departments, Brands, and Sale.

That makes it incredibly easy to get started.

Then after you click on a drop-down (like “Women”), it expands to show you more options organized by the type of “Shoes” first, then “Clothing,” and “Accessories.”

See? You may have never been to this site before. They have thousands of products. Yet it’s easy and logical to find what you’re looking for.

Nordstrom does a similar thing on their website:

It starts with a similar breakdown between Women, Men, Kids, Home, Beauty, and Sale. Then, when you go one level deeper, it splits into ‘use cases’ (New Arrivals, Trends, Vacation, Wedding) and categories (Clothing, Shoes, Handbags, Accessories). In other words, they’ve helped ‘surface’ some of the most common selections people have. They are now much easier (and faster) to find. Plus, it keeps the top-level navigation as simple as possible so the user isn’t overwhelmed.

If these massive ecommerce websites can still organize their pages into a simple, streamlined hierarchy, so can we.

B2B audiences love long, in-depth content pages. However, sometimes the user can get confused as to where they are or what other information is around this content. So they end up leaving.

You can use little visual cues, however, like the sub navigation in the example below, to subtly let the user know exactly where they are. As the user scrolls down far enough or jumps to a new page, the sub navigation hover will update to a new selection. This immediately provides them with clues as to where they just left, where they are now, and where they should be going next.

I’ve saved the best for last. And by “best,” I mean the worst.

Carousel sliders are used on almost all websites imaginable, from B2B to B2C and even ecommerce. We were just praising Zappos.com a second ago, and yet here they are using a carousel slider that automatically scrolls through different options.

I don’t have some bias against them. I’m just not a fan of carousels because they’ve been shown, time and time again, to destroy conversions, not improve them.

For example, Harrison Jones ran a study for Search Engine Land and found that nobody clicks on carousels! Take a look at these carousel clickthrough rates. Not so hot, right?

Sure, I understand why you might want a carousel slider. You want to show off all of the unique aspects of your company, product, or service. The trick, though, is to only do that one at a time.

Otherwise, you risk doing too much, too soon, and barely scratching a 0.16% click-through rate as a result.

Carousels are pretty common for e-commerce companies that want to highlight or show off all of their new brands for a particular season. For example, here’s Forever 21 using a slider:

H & M, to their credit, does something a little bit different. They use two static sections to better focus a user’s attention.

There is a sale call out on the top and a single product on the bottom.

While your web design should be visually appealing, it should also prioritize functionality. Using appropriately sized, real images that quickly resonate with visitors can captivate their attention and create a positive first impression. This allows your messaging and calls-to-action (CTAs) to be more effective before users consider bouncing.

Additionally, ensure that your design features are easy to understand. Implement a straightforward organization, adhere to regular naming conventions, and incorporate subtle visual cues that guide visitors on the page. Avoid the use of carousel sliders, as studies have shown they tend to be ineffective and can negatively impact conversions.

Remember, a successful website design is a harmonious blend of aesthetics and functionality.