7 Usability Mistakes That Will Kill Your Online Sales

Right now, on your site, 7 deadly usability mistakes could be hacking and slashing away at your sales… And you probably don’t even know they are there.

Fortunately, there is a lot of research in the UX (user experience) and eye-tracking space, and today you’re going to get these insightful studies served up in laymen’s terms, allowing you to incorporate their findings into your site’s design and interface.

You’ll see how seemingly minor aspects of your website can be huge determinants of how well your business performs.

Let’s get into the research by diving in to problem #1 with your website…

1. No Emphasis on Headlines

A lot of designers are guilty of this. I think many of them feel headlines are too “sales-y” and won’t have the intended effect. (As an owner of an ugly blog that converts really well, I disagree! :))

According to the data in the Eyetrack III study, headlines are the most viewed thing on any page, even more so than flashy images!

Here are some interesting stats on the power of headlines:

  • Headlines draw people’s attention almost immediately, and outperform pictures by a large margin.
  • People scan only the first couple of words in a headline before they make their decision to leave or stay.
  • Your headline has approximately ~1 second to capture a reader’s attention before being ignored.

Why this is important: You’re killing your sales if the major pages on your site don’t have great headlines telling customers exactly what the page is about.

This is true across the board, starting first and foremost with your homepage:

shopify homepage

But it doesn’t end there! You need to place clear and concise headlines on other critical pages.

One such example is your “features” page, which is one of the first destinations for interested customers:

bid sketch

Last but not least, important “explainer” pages (outside of your homepage) also need to include a powerful headline to get the message broadcast clearly. This can include pages like your testimonial page (check out how KISSmetrics does things) to your benefits page that gives customers a reason to stick around.

Potential customers should immediately be confronted with the point of the page, as you have very little time before you lose their interest and the sale.

2. A Slow Loading Site

You’ve likely heard this one before — a slow website isn’t good for sales because people are impatient.

But do you know how far this effect really goes?

Much of the discussion out there on site speed is anecdotal, but today you’re going to get some research that shows the shocking truth about how important site speed really is.

According to this analysis conducted by Microsoft’s Bing team, page speed is a HUGE factor in a number of important statistics:

A less than 2-second increased delay in page responsiveness reduced user satisfaction by 3.8%, lost revenue per user of 4.3% and reduced clicks by 4.4%.

Users really are impatient, and your punishment for a slow-loading website won’t be complaints in your inbox, it will be lost sales from people who decided what you were selling wasn’t worth the wait.

slow loading website

If you also take into consideration that Google ranks pages based on their speed, what you are left with is a very clear warning that you need to have a seriously fast website if you wish for your business to grow into the big leagues.

3. Illegible Typography and Spacing

This one might seem nitpicky, but it’s definitely not. Great typography is a huge part of a fluid user experience; and if yours isn’t set correctly, you’re going to be losing customers.

According to this study on readability, typography is one of the biggest influences in reading comprehension when it comes to text on the web.

The study revealed how small margins managed to help people read faster, but that it greatly reduced their comprehension of the text on the page:

effects of margins on reading speed

If they don’t like the way your content reads, they won’t let you know about it, they’re just going to leave.

I’m no master of typography, but my buddy Rafal Tomal, lead designer at Copyblogger Media, certainly is, and he had the following thoughts on improving typography:

improving typography

Improve margins: Directly relating to the first study, Rafal recommends improving margins and line height on every page with text, adding white space both between lines and around them.

improved contrast

Improve contrast: While gray-on-gray might look fancy, it’s a big turnoff for your customers. So is any other color combination that’s hard to read on the page. The easiest colors to read? Good old-fashioned black text on a white background. It may not be original, but it gets results.

All images are from Rafal’s blog.

4. Not Designing Based on Reading Patterns

The way we read dictates much of how we browse a website, because more often than not, a majority of a website is going to consist of written content.

You might have seen the eye-tracking study that revealed our tendency to browse in an F-pattern:

reading patterns

It’s been found to be true across all sorts of content pages, from blog posts to search engine results. We tend to favor browsing in an F-pattern that leans heavily to the left side of the screen.

This is largely due to our reading patterns, and the results don’t end there.

According to a separate study, many web users spend a majority of their attention on the left side of a web page — as much as 69% of the time:

pixels from the left edge

If your site has an interface that customers will be interacting with regularly, this is an important study to keep in the back of your mind when you’re split-testing different elements of your site.

Important note: the study found that the opposite is true for those users who read in a language where the text is consumed from right to left.

This shows that we truly seem to browse pages based on reading patterns, but it also brings up the point that you need to take your audience into account when analyzing any of these studies.

5. Confusing Navigation

Navigation is one of those things you must get right, as it’s likely the next place a user will look after they view your headline.

Some companies, however, just can’t seem to get navigation right. They put them in the wrong place, make them too generic to figure out, or include far too many options:

navigation in non standard location

According to this test involving site design, over 70% of users went for a link to click rather than using search.

That coincides with another study that shows that users use search only when they can’t find what they’re looking for, meaning that you shouldn’t rely on search as a crutch.

Make sure that the navigation on your site is in an area where people expect it, is obvious and clear in communicating where each links goes, and contains enough links to navigate to the important parts of your site but doesn’t go overboard.

6. Relying on the “3-click” Rule

There is an unfortunate misconception out there among some UX designers that if it takes a user more than 3 clicks to do something, they’ll become overly frustrated.

While this makes sense logically, and web users don’t want to have to click around too much to complete a task, sticking to an arbitrary rule with no data to support it is not the way to go.

As it turns out, most users will not give up on something just because they’ve hit the magical “3-click” ceiling, and I’ve got research to prove it.

A study conducted by Joshua Porter published on User Interface Engineering found that users aren’t more likely to resign to failure after 3 clicks versus a higher number such as 12 clicks.

“Hardly anybody gave up after 3 clicks.”

3 clicks to completion myth

The focus shouldn’t be on decreasing clicks to a specific number, but rather on analyzing the ease of utility.

Just because something takes 7 clicks instead of 3 doesn’t mean your users will hate it. It’s the end goal that matters.

7. Bad Spacing on Long Landing Pages

As Neil Patel showed us in a very interesting case study, long landing pages definitely can be a good thing:

  • They actually tend to be more persuasive, as you have more time to make your case.
  • The length of the page brings in more qualified leads, as those people have taken the time to read 1000+ words.

The problem, however, is one that many people instinctively know, and that the data supports. The longer the page, the fewer people stick around.

Take a look at the data from this study:

words on a page

This creates a dilemma: If longer landing pages can be useful and bring in more qualified leads, but people tend to hate reading “wall-of-text” content, what can marketers do?

The answer, according to our friendly design expert, Rafal Tomal, is to focus on content “chunking” by utilizing sub-headings and better spacing on long landing pages.

Take a look at this example below:

more line breaks

More line breaks: Once again, Rafal’s recommendation aligns with the research (on headlines), as he encourages webmasters and designers to include more line breaks and a better use of headings and sub-headings to make the content more approachable.

This way, longer content becomes less intimidating and far more scannable, resulting in long landing pages that actually will get read.

Your Turn

What did you think of these studies?

Let us know in the comments below!

About the Author: Gregory Ciotti is the marketing strategist at Help Scout, the invisible support ticket system for startups and small-businesses. Get more data-driven content from Greg on the Help Scout blog, or check out our free guide on the essential customer service skills that every employee needs.

  1. Congratulations for the post. I know some comapnies which should follow these tips.

  2. Great post. I totally agree with all points you’ve made – especially the 3 click rule.

    I also think that CTA’s should be above the fold and not at the bottom of the page, in addition to your social media icons not only being at the top of your page, but also at the bottom of your page in the footer area.

    • Hey Nancy, the fold is important, but at Help Scout we’ve tested our main CTA below the fold before and actually had an *increase* in conversions, it’s all about testing.

  3. As real marketers, we know these same basic truths were proven a long time ago with print marketing.

    While there are some special particulars with regard to the screen and legibility, for the most part the same truths still hold.

    A-B testing shouldn’t be about whether or not you can read the type or understand the piece itself, it should be testing actual phrases and messages.

    Good article!

  4. Interesting! As far as long copy pages go…I don’t think I’ve ever read even one from beginning to end. I tend to scan for the pertinent info…which supports your idea about making those headlines and paragraph headers count. BTW, what is the reasoning behind using huge full page image files instead of text? Have seen a lot of those lately. Great article Gregory :)

  5. I would add another one and that is writing a (great) post without knowing (or implementing) any call for action to the reader as for what do you want him to do next. He came across your site, he enjoyed the article, but did YOU get what you wanted from him (subscribe, press a link, purchase, anything?). Too many bloggers do not fully use the potential of their posts, simply because they don’t think ahead what is the funnel they want their readers to go through.

  6. Almost everything you write is good, especially this.

    What is really odd is that most of the rules about layout you mention apply to print.

    Why people imagine that their eyes work differently when they look at a screen is a mystery to me

  7. I’ve been looking for information that gives very clear guidelines for marketing professionals designing websites. Great article!

  8. I agree with the immortal Drayton Bird, everything you write is good. I also love showing designers and shallow knowledge marketers that a long page isn’t necessarily verbose nor better if stuffed above the fold.

    Headlines still king.

  9. Great summary – although there are a few more things when it comes to the details of content – apart from the layout – like smart shortcut-navigation-concepts, cta-buttons and quicklinks to allow users to perform their task as soon as possible.

    And above all there always should be this first question: what problem or task is the user of the website trying to solve?
    Looking forward reading more such good articles.

  10. I took my headline off my homepage as I really wasn’t convinced on it. It looked really spammy, so it went the journey.

    Your post is making me consider putting it back now! Maybe it just needs rewriting? Any tips on writing great headlines?

    • I just finished working with a graphic designer to help my SEO. One of the things she did was use most of my keywords in the text, enhance my original About page…And add more space and bolder fonts ….sorta like bullets. I know very little of the intricacies of web design. And this article really reinforces the subtle changes she made . Thanks for this information!

      More work needs to be done..working on my website is like building a great team ! M

    • The best headlines for the web forgo clever and catchy for plain (I explain more about this in my post from a few days ago). Just say what you do as simply as possible so people get it right away.

  11. Great post, Gregory!

    Everything in here is really useful, especially the headlines point. As a copywriter nothing is worse than a great piece of copy, killer product, or creative landing page being ruined by an unimaginative headline. Some really great points here, thanks!

  12. This is an eye opener, the truth in this matter need not to be look at twice.Thanks for care.

  13. Nice post..thank you for sharing! Very useful tips!

  14. Thank you! I am in the process of re-branding & modifying our e-commerce platform & you are seriously the most value added blog/site I’ve found. Kudos. Grateful!!

    Best,
    Ann McDonald
    “Live a custom life. There is only one you.”

  15. Navigation really plays an important part.. One should not use confusing path for sending the visitor. He/She won’t buy the product you are referring and also he/she won’t come back to your blog again. :)

    Writing quality post is another main thing… :)

  16. Especially love the point about the need for effective headlines for every page!

  17. Excellent work. And very helpful visualisation on how to treat text.

  18. Your comment and research on the 3 click rule got me thinking as this is one I am always trying to encourage our clients to apply when helping them with the planning of their site. I don’t think I need to enforce it so much now!

  19. Great article! I agree 110%.

  20. Leo Stephanou Mar 12, 2013 at 9:00 am

    Nice post. Your ’3 clicks’ argument was very interesting. Thanks :)

  21. Love the point on the 3 click rule.
    That old chestnut has been banging around for ages, nice to have some proof to debunk it.

    Thanks
    Kate

  22. Hey Gregory Ciotti !
    It’s true that waiting for loading a website is too much frustrating. It can be the cause of losing your customers. Moreover, navigation should be simple and user friendly, indeed.
    I really like this post and find it useful.
    Thanks for sharing.
    Brian

  23. It’s great that you mentioned the typography aspect. It seems that developers get carried away sometimes and they end up with websites that look beautifully but are not readable at all. Also, your findings about the 3-clicks create a great case against it, good job.

Comments are closed.

← Previous ArticleNext Article →
Buffer