Sometimes what you don’t know can be costly.
It can lead to mistakes that lead to low conversions—deterring buyers, cutting into your profits and adding extra work.
For conversions to occur, it’s important that you design your website so it’s easy for users to take action. As the face of your business, it needs to tell visitors what you do with absolute clarity.
Let’s look at the top 5 usability mistakes that are killing your conversions.
1. Your website is designed to be pretty rather than useful.
Do you choose loans based on the beauty of the lending site or the interest rates?
No? Then why do you expect people to make purchases based on how your site looks?Often people confuse a pretty website with a useful website. They erroneously assume, if the site is pretty, it’s also user friendly.
Your website’s design should be able to answer the following questions:
- What is the site about?
- Who is it for?
- What’s included?
- What makes it good?
- What makes it different? (the unique value proposition)
Need some examples?
Look at the website below. Simply looking at the headline, you’d never guess it’s for truckers seeking employment. It’s way too generic and doesn’t give any solid, useful detail that would make truckers want to use the site.
To increase usability, you need to avoid this same mistake. How?
Start with wire framing
Each page of your website should have a goal that aligns with your unique value proposition. A wireframe helps with that. It’s a visual guide that represents the framework of your website, and it bears an uncanny resemblance to a building plan.
To form a useful wireframe you should first start with creating your buyer personas.
A buyer persona is a visual guide on
- who your buyer is
- the problem he/she wants solved when visiting your site
- what motivates him/her
It needs a lot of research. You can begin by asking questions to your own customers and salespeople and move on from there. I’ve talked buyer personas in this article.
The next step in wireframing is to develop the message that reflects the needs and desires of your buyer. This messaging should be in tune with the vocabulary your buyer is familiar with.Your goal is to establish clarity as soon as the visitor lands on your site.
Have a look at this example.
Notice how well this page answers the 2 key questions in a value proposition:
- what the site offers: “a place to buy and sell sites”
- how it benefits visitors: “earn passive income”
United Seals is another good examples. Each product page answers the most common questions that a potential buyer may have.
The third step is to fill in the wireframe with details like:
- Information hierarchy: which information is most important
- Calls to action: emphasis on placement, size and CTA message
- Type of images to be used
- Placement of social proof and testimonials
2. Your website loads waaay too slowly.
A slow loading site is a bane.
Research conducted by Bing and Google concludes that if it takes a page too long to load the user gets distracted.
For the test, Bing delayed server response from 50ms to 2000ms for search results. It was found that as the delays get longer the Time To Click increases at a more extreme rate (1000ms increases by 1900ms) indicating that the users were becoming distracted.
Google ran a similar experiment. For some control groups, the delay was set to 400 ms and they were tracked for 12 weeks. These users never came back.
Surveys reveal that nearly half of the web users worldwide expect sites to load in under ten seconds.
The research done by all these companies is quite revealing. Users are impatient, so much so that a minor delay can trigger frustration or impatience. In many cases, the visitor won’t even return to the site.
In terms of potential revenue and lost customers, this rises to the level of critical.
3. You’re using bad typography.
In a study by MIT psychologist Kevin Larson, 20 volunteers, half men and half women, were split into two groups. These two groups were then asked to evaluate a version of The New Yorker.
The users who read the poorly designed page physically frowned when reading the page and were negatively impacted.
The character of the font, its placement and spacing affected the emotions of the reader.
Cyrus Highsmith rightly calls typography “the detail, presentation and voice of an atmosphere.”
Between April and May of 2013, researchers at Smashing Magazine collected extensive data about developments in web typography. It was a follow-up to the study they had conducted four years earlier in 2009. They looked at 50 sites consisting of international newspapers like the Guardian, magazines and blogs.
While serif fonts were doubted for their abilities to guide the reader, it has now been found that web designers overwhelmingly chose serif fonts in body.
The choice of fonts for the headlines remained the same, with an equal preference for sans-serif and serif fonts.
While Georgia and Arial are the two most extensively used typefaces, the web now shows more diversity with fonts. People have shifted to non-standard fonts.
The art of combining typefaces and communicating brand character
We now see more diversity in typefaces and we also have different typefaces for headers and body.
We have already seen the combinations of sans serif with a serif font. Combining them creates an effect of contrast rather than concord and is best used when you want to communicate contrast.
4. You’re ignoring reading patterns.
Researchers have proven that the eye follows a set pattern when reading a web page.
Needless to say, every web page should be designed with this in mind. Here are my tips for doing that.
Primary Optical Area
The higher left portion is where the reader’s attention falls first. Whether it be casual browsing or a search with intent of finding something, eyes automatically focus on this area.
As such you should place your Unique Value Proposition here.
Strong Fallow Area
In the second stage, the eye moves right to the follow-up area in the top right of the page.
This would be a good place for a hero image or other “less important” messaging. It will likely get scanned, but that’s it.
Weak Fallow Area
The lower left portion is the blind portion of the Gutenberg Diagram. Although readable, users will not give much importance to content in this area of the page.
Don’t put any important messaging here.
When users reach the lower right portion of the page, there is a break in their reading or “page scan” process, and they need to take an action.
This is where you can place your call-to-action button.
5. You’re giving your visitors too many options.
A case study by Neil Patel reveals that when he increased the number of social share buttons on his site the number of social shares decreased by 29%.
Additionally when Unbounce reduced the registrations options for the webinar from four to three, landing page conversions went up by 16.93%.
Too much choice can confuse the readers and prevent them from taking any action at all. It’s been proven by researchers and, as you can see above, by real-world marketers.
To limit the number of choices, whether it be the number of social sharing buttons or something else, ask yourself if this button or this option is really useful. If not, leave it off!
As an example, for a recipe site, you may not be able to do without Pinterest and Instagram buttons, but is that LinkedIn button really important?
Leave nothing to chance. Conduct a split-test and see the impact on conversions.
It’s already difficult to get traffic to your site. Why would you let any of it escape?
Fix your website. Get rid of usability issues. Keep visitors on your site so you can show them what you can do for them—and capture the sale.
Do let us know in the comments if you know of any other usability issues.
And take time to read other Crazy Egg articles by George Mathew.