2013_07_31_featured Design

5 Design Mistakes That Interfere With Your Online Usability

Good usability – what does that even mean? The term has been around for quite a while now; long enough anyways to have gained some serious popularity. In a previous article we even argued that “usability has become a commodity and is no longer a distinctive feature”. That is because people have long gotten used to certain design standards.

Usability is “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.”

In other words, good usability implies that users can easily use a product and by doing so, reach their goals quickly and without falling into despair. Design is the tool that you need to build websites with good usability.

Here are 5 critical design mistakes that affect the usability and therefore get in the way of your user experience.

1. Impersonal look & feel

When designing a website – for any purpose you can think of, really – there are a couple of things you need to keep in mind. You need to structure and present your content in a clear and logical way. Then, there might be a corporate style guides that already defines a lot of your work. Etc.

But no matter how many structures and guidelines you have to deal with, keep in mind that the look & feel of a website makes up an important part of its usability. When visiting a website, usually we want something from that site. For example, we might be looking for some general, or even specific information, or we want to get entertained, or connect with other people.

No matter what it is that brings us to a website, our first impression is crucial. It affects our trust, our curiosity, our appreciation for the site, and much more. And all of this is important when it comes to good usability. For example, a site that we don’t trust is basically useless. It might offer all the information I need and still I would look somewhere else – because I don’t trust the source.


An outdated design with no personality looks boring and not at all trustworthy.

There are lots of things you can do to make your site more
trustworthy
. For example, by adding personality to your design, you can increase your credibility.

Occidental Petroleum Corporation is one of the largest oil and gas companies in the US, based on equity market capitalization. Yet, their website looks outdated and anything but visually appealing. The contact page looks sterile and very impersonal. So does the page “Message from the CEO”. There is no image, no personal information to tell us more about this ominous CEO. To be honest, the text could say anything – as long as I don’t know who is talking, I don’t really care.

2. Being unreachable

Besides a more personal look & feel of your site, you should also make sure you are available for your visitors. While the web remains a technical medium, new technologies allow for more and more interactivity and engagement. And that’s exactly what people want when they go online. They want to interact with your site. They want to meet the people behind your company – even if this is limited to mediated communication.

Your team and contact page, your company blog, or different social media can be a good place to start. Be open about yourself and talk to your visitors. This way, you can start a conversation and encourage your visitors to talk back.

For many people, the internet is still a vague medium. At times it feels like we have little control – be it over our data, or the companies that we communicate with and that can be anywhere in the world. Being available as company is an important aspect of good usability. You might have just what I need. However, if all I can find is a website without contact details, without phone number that I could call, without any proof that you really exist and that you are a trustworthy company – I won’t do business with you. Your site becomes useless for me.


Make sure your visitors can easily contact you for whatever reason.

For example, Burgerking is a very big company and surely there are a lot of people, who want to get in touch with them – for all different kind of reasons. Yet, when you go to their .com website and click on “contact”, all you get is a ridiculously long “restaurant experience” survey. No phone number, no email address, no physical address, no contact form, and certainly no name, or picture.

3. Difficult to read content

Another important design aspect that has direct effect on the usability of your site is the readability of your content. If you offer content on your site in a written way, make sure your visitors can easily access that information. Meaning, they can read the text without hassle and if they want to, they can scan the text and still get the main idea.

It’s not a secret that people don’t read as concentrated on the web as they do on paper. You should cater for this online reading behaviour and structure your text accordingly. If people visit your site, but can’t read your content – or if they think it’s too much hassle to do so – your site looses a lot of its value.

For example, short paragraphs, lots of images with descriptive captions, and relevant sub-headings increase online readability. Here are some more tips how to make your content is usable:

  • You color scheme can make or break a site. Shop around to see how others use color on their site. Make sure you choose colors that improve, not decrease readability. High contrasts are important.
  • Use sans serif typefaces for all body copy.
  • Don’t allow for too much variety when it comes to font size. Limit yourself to three sizes – one for the main header, one for sub-headers, and one for the body.
  • Don’t allow for too much variety when it comes to typefaces. Try not to use more than 3 different typefaces throughout a single page.
  • Adjust your line height. Standard settings are rarely ideal for readability.
  • Use text emphasis, such as bold, italics, underline sparingly.
  • Put some thought into your alignment. Left-aligned copy is easier to read than right-aligned. * Full-justification is great for long lines of text but appears choppy and distracting in narrow columns.


Make sure your content is easy to read. Pay attention to font, size, color, etc.

While readability is such an important aspect of good usability, there are still a lot of sites that don’t care about their text design. For example, ACM interactions
magazine is a mirror on the human-computer interaction and interaction design communities. You would think they are experts when it comes to good design. Yet, their articles are extremely hard to read due to very long paragraphs and the small line height.

4. Inconsistency

Consistency is one of the basic aspects of good usability. Once we have learned how one concept works, we try to apply this concept to as many other situations as possible. This makes us more efficient when working with new interfaces, such as a new website.

Such concepts can be the functionality of a top navigation, the fact that links within a website bring us to a different page within the same site, or that the logo brings us back to the homepage. If these concepts don’t work and our actions are followed by a different effect than we expect, it can lead to confusion and even frustration. Basically, if you don’t meet your users’ expectations on multiple occasions, your site is far from being usable.


Don’t confuse your visitors, but try to meet their expectations and existing mental models.

Microsoft got a new homepage some time last year. While the design is very modern and appealing, the usability leaves a lot to be desired. No matter where you click on the site, you end up on a totally different site. This site doesn’t open in a new tab and there is no indication that you have left microsoft.com. Sure, the design is different, which is confusing, but doesn’t explain anything. Also, when clicking the logo in the top corner, there is no going back to the site you originally came from.

5. Ignoring the importance of whitespace

Last but not least, white space is an important part of your design. Even if it’s blank and doesn’t carry any information, doesn’t mean it’s useless. To the contrary, white space is a very powerful design tool that helps you sooth your design and guide your visitors attention.

If you pack your design to the extent that every pixel is filled with visuals, content, and links, chances are that you overwhelm your visitors. The result: They are confused and unable to make a decision of where to focus – let alone where to click.

White space helps you to keep your design clean. By doing so, you can highlight certain elements and help your visitors to both navigate through your site and consume your content. A website that is too busy to find anything becomes useless.


Keep your design clean and use whitespace to separate content and highlight what’s most important.

When we look at the Toyota website, this is exactly what happens. There is so much going on that it becomes challenging to concentrate on any one element on the site. Besides, relevant content, such as the top navigation has a transparent background, making the design even more busy.

9 comments

  1. Caryn Humphreys

    Great piece, Sabina! Thank you for your well-thought points on usability, and the visual examples to illustrate the tips. It’ll be very cool to see where usability goes on the web as the focus shifts back to the heart of websites and web applications – content!

  2. Manya.pe

    Many times it isn’t the fault of the creators of the website, but of the customers who in most times involved in the design process and want to drop items that harm or hinder the usability of the website. Therefore, it is important that the team in charge of creating the website, explain at customer that with a better the usability for the user, the company will have a better chance of selling your products or generate leads. Because a website with good usability is the one who manages the company and the user achieve their goals with ease.

  3. gabriel

    Hi, nice advices, I am very bad at design myself. So every tip is valuable for me. still your own page has the same problems. It looks crappy on a mobile (a must today). And I’d welcome some positive examples too (how to do it right). Have fun :-) G.

  4. Sabina Idler

    Hi Gabriel,

    You are absolutely right. A good mobile site is important and we are are working on it. :)

  5. Sabina Idler

    Hi Caryn,

    Thanks for taking the time to read the Usabilla blog and for your kind comment. :)

  6. Mark van Iterson

    Great piece! Loved reading it. I am in the middle of redesigning our website and will absolutely take your advice into account! Keep those advices coming! ;)

  7. Aaldert

    Nice article, but I was confused: I read the text and assumed it was about the example image beneath it. But that turns out to be the “bad example”

    Would be better if the example was a “best practice”

    Interesting article nonetheless!

  8. Sabina Idler

    Hi Aaldert,

    Thanks for the suggestion. I totally see your point and I’ll keep in in mind for future articles.

  9. CMS Web Design Gallery

    I often find these UX mistakes on newer website launches. Great suggestions I can really appreciate this post. I am guilty of making these same mistakes from time-to-time!

Leave a Reply

Your email address will not be published. Required fields are marked *