Top Usability Mistakes in Web Design

High-quality usability has been the center of discussions in the industry in the past ten years, as it becomes more and more important for users. Good usability can also help build brand awareness and can generally improve a user’s opinion of a website and even a company. There is so much focus on usability today because big and small companies showed how important a good usability strategy can turn out to be.

Good usability has been in the past couple of years at the heart of successful start-ups. Simple ideas are most of the time the most innovative and this is mainly what usability is about: making a feature or a product easy to use, while still keeping the product quality at a high level.

Today’s article comes a lot down to common sense. It seems that after years and years of discussing this issue, web designers still have a hard time understanding it. Usability is not a joke anymore and the advices below should be printed out and pinned on the wall in front of your desk.

Color for links

Often I find myself navigating on pages where links are not highlighted in a way or another. It is one of the dumbest mistakes I have ever seen. I would rather visit a page with the default blue link color than a page where the link color is the same as for the content. Users need to know how to navigate and where they can click. You can’t expect them to search for links by hovering with the mouse on all the words until the cursor changes to a pointer.

linkcolor

I totally understand that sometimes, because of design considerations, links can’t be highlighted with a color that stands out too much. It is totally understandable. But then add some text decoration or a dashed border on bottom of the anchor; you simply need to emphasize links in a way or another.

Visited links is also something that needs to be emphasized in a different way than with the default color. This is because it helps users know where they have been before, so they can decide where they want to head to. Some sites confuse their visitors, but clearly stating where they have been before will definitely help them have a better overview of your website.

Poor typography

When talking about typography, it is not always only about big headings and beautiful blocks of text. When thinking of usability, it is not that important the typography is beautiful, it is more important typography makes content easy to read.

Non-scannable text gives headaches to many visitors, but it shouldn’t give any headaches to designers. Only simple things like increasing line height, breaking text into smaller chunks, increasing the font size and choosing a better font can make it easier for users to read the content.

In web design it is not that important how fonts combine and what feelings the font color awakes into visitors. Sure, it is a bonus if you can do this, but I feel that in the past couple of years the focus was much more on aesthetics than functionality, and this is wrong! Unlike the narrower field of graphic design, the most important feature of a website is readability. It doesn’t necessarily need to attract you visually. It just needs to work!

Let me explain further. Two of the latest trends on the internet, minimalism and flat design, are both extremely simple and focus much more on content than on how beautiful the background image is. There is a reason behind minimalism and flat being very, very popular, and the reason is that they are so simple and work – it sometimes hurts to see such a simple website achieve huge success. You come in, read the content and go away. Nothing distracts you, no Flash, no JavaScript that makes the website heavy to load, no flowers and drawings; it’s only about content.

linkcolor

You should, by now, understand how important it is to make the content scannable. Don’t worry too much about making it beautiful in the first place – regardless of how beautiful the typeface is, it won’t help if people can’t read it.

Not following conventions

Following design conventions and usability considerations is very important because regardless of who you are, users will spend most of their time on other websites. This means that yours will need to be in line with all the other.

To understand better what am I thinking about, it would be like having a normal website where clicking on one of the links in the navigation quits the page. It is against what we are used to and against what our experience tells us that button in the navigation should do.

Luckily in the past years designers got better, but I still can find carrousels where the navigators don’t work and links that bring a pop-out when hovering on them with the mouse. That is simply not supposed to happen, so stay in line with design conventions.

Avoiding answering questions

Users browse webpages with a purpose. It can be for entertainment, seeking information, staying connected with friends and family and for other purposes. In all they do, they always have an aim.

Now what is important for you to remember is that, most of the time, they come on websites to seek a piece of information. They go on Google to search for something. They go on Wikipedia to learn about something. They go on company websites to learn more about the products. They always have an aim.

sudocream

It happens often to me that I go on webpages where I am specifically looking for an answer that simply can’t be found. I understand why design agencies don’t always feature their prices, as there are many variables to each project. But I simply can’t understand why a hair saloon doesn’t show me how much does it cost for me to cut my hair. I don’t get car washing companies that have a website not featuring the price for which I can get my car cleaned. Why on Earth would you have a website then? I simply feel it’s useless both for you and for the visitors. None of you gets anything out of it.

It is a good idea to know the purpose of your audience when they visit your website. If people visit to download blog themes, guide them to the download section. If they come in to play games, let there be games everywhere. If they come in to see prices for products or services you offer, feature them.

The reason why you have to think of your audience’s needs is because you don’t make a website for yourself. If you make it for yourself, you can as well keep it offline and browse it on your own computer. A website is for an audience and audiences have needs. Fulfill them!

Small clickable areas

Since I bought a Mac I never used a mouse. I actually bought a Magic Mouse when they were released and sold it three days after, because there was simply no need for me anymore. I am more than decent at moving around my computer with the trackpad. But I remember five years ago, when I was still on PC, I used to have all kinds of crap mice. They were not always accurate and hovering on small areas was always much more difficult than it should have been.

I don’t have this problem today anymore. But the web is not only about me. It’s about billions of users and you should be aware that not all of them are so sharp at using these amazing tools.

Small clickable areas are uncomfortable sometimes. You might want to keep the font size low, because you believe it looks nice, but you might want to think of how much of an impact your decision has on usability (and let’s not move to readability once again).

It is important to make sure not only links are visible, but that they are clickable. The smaller the areas are, the more difficult will be for people to click on them. There is a reason behind websites becoming mobile – and that is because the layouts need to adapt to a smaller screen. One of the things that need to adapt are buttons, which are recommended to be much bigger on a portable device, so they can easily be clicked on.

The same strategy should be applied on desktop. The new flat user interface trend is a preacher of this concept. You won’t have issues with clicking on big, visible links. Make sure you make navigating easy for your users. Again, focus on functionality and leave beautifulness as the cherry on top of an amazing cake.

Missing contact information

Few things annoy me more than bad customer service. One of them is not even being able to get to customer service or to a contact in a company for that matter.

As we discussed earlier, people visit websites with a purpose. If their purpose is to get in touch with you, then from his point of view your webpage is totally useless if he can’t find a way to contact you.

contact

There is no excuse for not featuring contact information. If you don’t want to make your personal number public, write the e-mail. Heck, you can even get one of those cheap phones and cheap phone subscription and share that number, or you can create a secondary e-mail. You want to avoid spam? Use a contact form that bots can’t scan. Share the Twitter or Facebook address, whatever. It simply doesn’t matter, as long as you give visitors an opportunity to get to you in a way or another.

Search function

Many users are task-oriented, which means they come on a webpage to get specific information and are not interested in anything else. In this case, you can see how important a good search function can become.

This doesn’t mean you have to feature a search bar on all websites. If you run a design agency with a single-page website featuring projects and contact information, then there is no need for a search function.

search

However, in case you run a blog or any other type of content-heavy website, the search function is the feature many users will first go to. Studies show that the percentage of users scanning first for a search bar can be up to half of all visitors, which is extremely much more than we would believe.

In case you run a website on a platform like WordPress, you can make use of their built-in search functionality. Otherwise you can always use Google’s, as the giant search engine probably already indexed all (or most of) your pages. You don’t need to code such a search function on your own, so it’s no excuse for not having one on your website.

Registration required all the way

Allowing people to get a glimpse of a feature or software before they have to register or pay (also called demo version) is much, much better than asking them to register right away. It bugs me a lot to see excellent concepts on the internet, but they all require you to sign up.

No, I don’t want you give you my phone number, house address and shoe size before being able to use your application. I want to be able to use it right away and decide if it’s something for me.

This concept is one UX/UI mobile guru Luke Wroblewski (reference at the bottom) supports as well. He believes that users should always get a sneak peak into a product before they have to commit to it. It is so much easier and it makes total sense.

demo

Whatever you do, sell or produce, don’t ask users on the internet to commit to it before they are sure they want to use it. Otherwise they will feel tricked and you’ve lost them forever. A good example is Fruit Ninja, the popular iOS game, which also comes in a free demo version. After a period in which you get entertainment from the demo version, you kind of feel you want a bigger challenge. And you buy the full version of the game. That’s what I did and it made total sense. Would I have bought the game from the beginning without being able to try it before? Nope.

This is not only a lesson for web designers, but generally for many companies and manufacturers. If your product is good, don’t require registration from your users right away. Instead, offer them the opportunity of trying your product for free as quickly as you can, and you can be sure they will buy it if the product is as good as you think it is.

Registration forms

Another issue Luke Wroblewski likes to talk about in his keynotes is registration forms. We’ve all been there. You want so much to have an account right away (because in a way or another it fulfills one of your needs) and the registration form is just so long. And you lose the potential business customer.

Make the registration forms as short as possible. Only ask for the most important information, e-mail, password and username. After the user registers, you can give him the option of filling in more details about himself. Again, it comes down to the same principle as before. In order to commit, users need to test-drive your product. I am not even sure I like your product, why should you have my home address, real name and job title? In the best case you will get some fake information, but unless I am sure I want to use your product, you will never get my real information.

basecamp

Today it is possible to create accounts on many website using Twitter or Facebook API login. This is only good and makes the sign-up process so much easier and quicker. Now you won’t have to remember an account and a password more. You just need to stay logged in on Facebook and you will also be kept logged in all the places where you used the API for registration. Not all people will take it, but offer users the possibility of registering in this way.

Inconsistent design

When the webpage has a white background and the navigation on top, don’t make the about page black and move the navigation to the bottom. It will only make me question if I still am on the same webpage and that’s not what I want to spend my time on.

Keep the same layout throughout all your website. Use a grid system of whatever column number it seems fit and make sure you stick with it throughout the whole website. The same principle applies to background colors, link colors, typography and design principles. Make it clear to me I am still on the same website as I have been before clicking on the “about me” page.

Wrong usage of images

A basic rule of design is not using elements that you don’t really need. It’s the same with images: don’t use them just for the sake of filling in the page. Studies show users tend to ignore images placed on websites just as fillers. So if you don’t have anything to show, I most definitely don’t want to see a random stock image.

If you decide to use images, at least make sure you place them right. I simply hate websites where content is written on a two-column grid and broken by images as wide as the container. It always makes me think: now should I move and read on the second column and then on the first column again under the image, or should I just move and read on the same column under the image? It is simply so annoying and what is even more annoying is how different websites use different approaches to this issue. If you use images, make sure you don’t make me think too much about reading the text, which is the most important. I don’t want to think. I just want to read.

Oh, by the way, if you want to know why I don’t want to think (or why no user wants to, for that matter), I highly recommend Steve Krug’s book. You can find the link in references at the bottom.

Conclusion

If you want to be a good web designer, you simply need to follow the rules above. You don’t need to be a user experience guru, what I wrote above is really only common sense, but it makes most of the time the difference between a decent web site and a top-class one.

It also comes down a lot to your interest in your users. If you only make websites to earn a living, you don’t need these rules. You will also most likely only be a below-par designer who will fail in a few years. If you think much more of your visitors and wish to offer them a good experience on your site, then you know which are the basic elements you need to start working on. As mentioned earlier, sites don’t need to be beautiful. Keep in mind that there is nothing more beautiful than a simple website working as good as possible.

References

  1. Luke Wroblewski, former Yahoo! Design Architect
  2. Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

33 Comments
  1. Nele Ellerich Jun 7, 12:40 pm

    THANX!!! Very true and very helpfull …

    Reply
    +5
  2. Alberto Jun 7, 2:38 pm

    Thank you Christian, very useful article, great job :-)

    Reply
    +1
  3. thibaud Jun 7, 3:56 pm

    can’t disagree more with the “following convention” advice
    imagine what the web would be today if we had stick to the 90′s era conventions

    Reply
    +6
    • Christian Jun 7, 9:17 pm

      Hi Thibaud

      I am quite sure everything that is new (like trends for example, not only products) come from either big trendsetters or several companies/blogs/users/designers who try those things and make them public.

      If you have a small website and put the navigation at the bottom and the footer where the header should be, I am sure you would annoy the hell out of me and any other person visiting the site – and you will most likely not create a trend by yourself.

      Reply
      +2
    • Wenzel Massag Jun 8, 7:45 pm

      Some conventions change, sone stay, I see what is meant by the conventions section a bit less restrictive. Of course the navigation must be visible without scrolling but other conventions have changed, like the intro-page that you had to click through to get to the website in the 90s and 0s.
      At the same time other conventions like the symbol with three horizontal lines in it has become a convention for the button to show and hide the menu on small screen sizes.

      Reply
      +1
      • Christian Jun 9, 2:48 am

        I agree. But Thibaud meant we shouldn’t follow conventions because this way we will lack innovation. I can’t agree more.

        But this article is not about innovating at all. It is about usability. Usability and making the user comfortable on your page has nothing to do with innovation and coming up with new stuff on the internet.

        Reply
        -1
  4. Kia Kamgar Jun 7, 4:11 pm

    Great article coming just at the right time for me!

    I have been using some of these techniques but there are a lot that I haven’t. Great to know I’m on the right track, let me know what you think… http://www.macjunky.nl

    Reply
    0
    • Christian Jun 7, 9:20 pm

      Hi Kia

      Simple, easy to use, flat, big headlines, information architecture is in place, important information stands out in a way or another – I like it, good work.

      Reply
      +2
      • Kia Kamgar Jun 7, 9:21 pm

        Great! Seems like all the boxes are ticked ;-)

        Reply
        0
      • Kia Kamgar Jun 7, 9:21 pm

        P.S. Thanks!

        Reply
        0
        • Teagan Jun 11, 12:04 am

          I would suggest making your drop-down navigation trigger on click rather than on hover. This is much friendlier to mobile users!

          Reply
          0
          • Kia Jun 11, 12:07 am

            Hey Teagan, thanks for the feedback.

            I’m working on that right now, trying to get the script to work differently for mobile users.

            What do you think of the site as a whole, too flat?

            0
          • Teagan Jun 11, 12:16 am

            I like it! One suggestion would be for your Business page (I went there first, but I assume in the interest of usability your style is continuous throughout your site) I think your article headers should have less distance between themselves and the paragraph, and more distance above them. This will help visually connect article headings with their content and help separate them from other articles.

            0
          • Kia Kamgar Jun 11, 12:21 am

            I had issues with that, as the spacing makes the site what it is, and did test different spacing, but it made it look less continuous, as you mentioned, so I had to take the style/design element into it, and this was the best option.

            But I totally agree with you, it is a little weird, but trust me, the other way was WAY more annoying.

            The headings (spaces) are site wide, so changing would make the whole site ‘wonky’

            0
          • Teagan Jun 11, 1:15 am

            Also I find myself clicking “I like cookies!” on every page just to get your box to go away. I appreciate the gesture, so maybe a small notice in the footer would suffice?

            0
          • Teagan Jun 11, 2:39 am

            I also designed a click dropdown using just css (no script) and I’d love to share what I created with the internet! You’re welcome to use it as you please, though I’d appreciate it if for some reason someone asks where you got it if you’d direct them to my site: http://www.teaganatwater.com/experiments.html

            0
  5. Alexandre Jun 7, 7:46 pm

    Awesome! Since some time I don’t have contact with someone that proposes to analyse that! I gotta thank you for the article, and congratulate you for the website.

    Reply
    0
  6. Glu Jun 7, 7:52 pm

    This is your opion? You may be wrong regarding some things.

    Reply
    -4
    • Christian Jun 7, 9:18 pm

      Hi Glu

      Well, the article is under my name, isn’t it? This means that, indeed, the opinions are mine.

      Would you like to detail where you believe I am mistaken?

      Reply
      +5
  7. Owen Garrett Jun 7, 9:45 pm

    One more rule to add… don’t put a floating navbar at the top of the page that obscures part of the main canvas.

    If you do, then if you page through the content (e.g spacebar), it appears to scroll more than a page view at a time so you miss part of the content each time!

    Reply
    0
  8. Carolyn Jun 8, 3:50 am

    Another rule or two to follow – if you’re going to use graphic elements on your menu buttons then use ones that are universally recognized and don’t mix graphic buttons with text buttons. You’ve violated both of these here on your site.

    Reply
    +2
    • Wenzel Massag Jun 8, 11:30 pm

      One could argue it’s the use of the logo as home button, but yes, I wondered about that too.

      Reply
      0
  9. Alexander Goncharov Jun 8, 2:14 pm

    oh my god, another person, who considers trends as just trends!

    thanks a lot for the article Christian! I’m definitely reading the book.

    one more obvious rule to follow: balance. I mean seriously, if you put a logo on the left, put something on the goddamn right =) search bar or whatever. so simple, but often underestimated.

    Reply
    +1
  10. poplar Jun 8, 11:15 pm

    “You can find the link in references at the bottom.”

    why do i have to scroll to the bottom to find the link? that’s definitely a usability mistake

    Reply
    0
    • Wenzel Massag Jun 8, 11:28 pm

      It encourages the reader to finish this article before moving on and forgetting where he/she was.

      Reply
      +2
    • Christian Jun 9, 2:50 am

      Thanks for the comment Poplar

      I always put the references at the bottom in order to make sure my aim is achieved: which is for visitors to read my article. If you think the source I am referring to is interesting enough, you have the option of going there AFTER you read my article, not during it. This way I have a high change of losing you as a reader.

      Reply
      +2
  11. Jeremy Jun 10, 2:45 am

    Thanks for this awesome article. i want to add one more advise about the form : keep users data on form error. After an error, the page is refreshing and my previous data are cleared. This is really really annoying.

    Reply
    0
  12. Markus Jun 15, 8:37 pm

    I’ve checked your portfolio after reading your article. Well, Christian, now you need to follow the rules you’ve write here as well as improve your design-skills. Honestly, your design-skills are very low and looks a little bit outdated. Good luck.

    Reply
    0
  13. lionleaf llc Jun 18, 2:27 pm

    A highly legible typeface can be made unreadable by poor typographic design.

    Reply
    0
  14. Sean Halpin Jun 18, 9:14 pm

    Nice Article, Christian. I was looking for another design blog when I happened to click your article – and see my dribbble shot, haha. The serendipitous nature of the web I guess!

    Reply
    0
  15. Dmitri Jun 19, 11:02 am

    “No, I don’t want you give you my phone number, house address and shoe size before being able to use your application. I want to be able to use it right away and decide if it’s something for me.”

    This must be nailed high on most app developer’s boards!

    Reply
    0
  16. Michael Jul 1, 10:39 pm

    I notice these all the time. not colored links get on my nerve. How are we suppose to find their links if they don’t change the style of the text or color.

    Reply
    0
  17. Gabriel Aug 7, 11:05 pm

    Although the post is interesting, I guess one needs more than this to be a good web designer: “If you want to be a good web designer, you simply need to follow the rules above.” This kind of made the post lose its credibility for me…

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters