What You Need to Know About Usability


Having good structure and navigation with poor layout does not provide a bright future for your website or application. However, having good layout design with poor structure and navigation does not provide a future at all.

Aesthetics is an important factor, but keep in mind that usability must be number one on your list. When I started designing websites and interfaces, my main, and probably only, concern was to make something beautiful that would catch the user’s attention – I had no idea about how wrong I was. If the user does not know where to go or how to proceed, he will close the page within 5 to 10 seconds.

What is usability?

Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with.” – Wiki

What is usability

There are more than 150 million websites on the internet, and about 2 billion internet users. When you publish a website, no matter who your target audience is, everyone will have the chance to see it and use it. This means you need to adapt your website to common sense, making your navigation, content structure, image and font size, font-family, colors, etc, as generic and easy to use as possible.

Usability is all about how easy to use things are. In other words, it defines the ease-of-use of a website, application, tool, system, etc.

There are three important aspects you need to think about, in order to define the ease-of-use:

  • Learnability – How long does it take for users to learn necessary tasks?
  • Efficiency – How long does it takes for users to perform necessary tasks?
  • Utility – Does it have a purpose?

Why it is important?

To avoid users from leaving!

Why it is important

You’ve placed an ad to your website and you received 500 new visitors the next day, that’s great isn’t it? It really depends! Why is it so great to receive 500 new visitors when probably only 10% will return?

There is no point in having a beautiful layout where the user simply can’t achieve basic tasks. If a system is difficult to use, users will leave and probably won’t return.

Stop focusing on getting exposure, and start focusing on making your system usable and engaging for your visitors.


There is one thing you should know when you jump into the usability sea, or ten to be more specific – Jakob Nielsen’s Heuristics.

Jakob Nielsen Heuristics

“Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Before starting NNG in 1998 he was a Sun Microsystems Distinguished Engineer.”

Jakob Nielsen is the”king of usability”, and that didn’t happen by chance – his perspective transformed the way we use the Internet today.

The 10 Heuristics are:

  1. Visibility of system status
  2. Match between system and the real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognize, diagnose, and recover from errors
  10. Help and documentation

Best Practices

Walking next to a window shop on the street can take as long as visiting a website. If the window shop catches your attention, you will take a look at it, if not you will barely turn your head. If your website is complicated and hard to navigate, users will leave immediately, so you need to make use of good practices to make them achieve their goals. That way users will be happy, stay longer, and return.

Below is a list with some basic, but very important, usability practices, however, there are plenty more that you can and should implement in your project. The purpose of this article is introductory, therefore, a second part will cover some more important practices.



Although it’s not specific, it is definitely something you should always do. Brainstorming should always be your first step and is actually one of the most important parts of the design process. Throw some ideas out there, do some research, and see how others are doing it. “Do first, think later” is for beginners, not you.



Element spacing or whitespace (refers to the space between elements) are extremely important topics in usability. Leaving enough space between text, images, or any other element can define the success or failure of your website. Stephen wrote a good article about this topic which I recommend reading – How to Actually Use Negative Space As Design Element



Line width, line spacing/height, alignment, font-size, font type and font-family are just some of the important elements which play an important role in your website’s usability. See below how to increase readability.

  • Line width – Using a reasonable length of 150 characters, is ideal for good readability.
  • Line height/spacing – Try to use a minimum line-height of 1.3.
  • Alignment – Left-alignment increases readability.
  • Font-size – A minimum of 12pt or 0.75em is advised.
  • Font-type – According to studies, there is no difference between serif and sans-serif fonts, however, some experts claim that serif fonts are better for readability.
  • Font-family – Try to avoid beautiful fonts that are difficult to read.



Color contrast is directly related to aesthetics and typography. Using 100% black text in 100% white background (or vice-versa) can make your text painful to read.

On the other hand, you should try to avoid choosing colors that are similar in brightness, like having bright gray in white background.



Navigation is probably the most important guideline on your website. It tells the user where he is and where to go. A good and well made navigation menu should immediately tell the user how he should proceed if he wants to change to another URL. See below how to improve navigation’s usability.

  • Consistency – Navigation should appear in the same location on every page.
  • Visibility – Navigation should be easy to find.
  • Colors – Differentiating active links, selected links and hover links is very important.
  • Text – Using only icons/images for navigation demands the user to guess what the image is about. Try to use text instead.

Simple Tools and Checklists

Usability testing evaluates the efficiency of use of your web site.

Don’t fool yourself, every product can be improved and your website is no exception. In order to improve, you need to know what can be improved upon and for that you need to know how users interact with your site or application.

Below is a list of great tools, web applications, and checklists, which can help you with usability testing.


Fivesecondtest helps you fine tune your landing pages and calls to action by analyzing the most prominent elements of your design.



Userfly.com provides instantaneous web user studies by recording user visits and letting you play them back to see every mouse movement, click, and form interaction.



Usabilla offers a fast and simple way to collect visual feedback on webpages, mockups, wireframes, sketches, or any other images.



Clixpy tracks everything your site’s users do: mouse movement, clicks, scrolling, form inputs. You can watch and examine videos showing your users’ actions.


Usereffect checklist

There’s a really complete PDF checklist at Usereffect.com. You can also find 6 language translations there.


End Results

The Internet is evolving incredibly fast, and the attempt to create unique websites can really make life difficult for the end-user.

It is very important to push boundaries, but at the same time don’t forget that users probably just want you to keep things simple.



  1. A well-designed site that is not user-friendly is a trap that some designers fall into. Thank you for making excellent recommendations to avoid this. Usability should not constrain good design. Good design. on the other hand, should create a very usable site.

  2. Danny

    if you have good desing in your fans page you can get a lot fans in you website that is a good idea for have a lot people in your fanspage

  3. Fauzi R.

    thanks you so much for the information it made me easier to made my final project..thanks a lot ^^

  4. Nice one.
    I like it one line for “When you publish a website, no matter who your target audience is, everyone will have the chance to see it and use it. “

  5. I first learned of the existence of Jakob Nielsen’s Heuristics. Used his recommendations. Also fixed line width, line spacing / height, alignment, font-size, font type and font-family. Usability in my understanding is primarily a user to find desired information in three steps from the main page.

  6. TG

    It’s been while I have not seen a post about usability. I like your usability tools update.

  7. rrchaugule

    You have cleared the Concept of Usability in one article !
    thanks a lot.

  8. Richard

    I’m sure it’s a great article but I make it a point to stop reading the moment I read the name “Jacob Nielsen” or else I get angry and break monitors.

    Maybe it’s time to see what he’s saying these days, though, and see if he’s still enemy of creative design.

  9. Nathan Bandy

    Cool and very excellent post about usability. Please share with us more effective info about usability. Thanks a lot :)

  10. Usability is incredibly eye-opening once you really start delving into it. I recommend Steve Krug’s book “Don’t make me think”. This doesn’t just say why it is important but also how to create your own tests.

    Having used this process I have seen client sales increase by hundreds of percent simply by making the site usable and then test/tweak, test/tweak until it is right.

  11. shilpi

    Thanks for the valuable piece of info. Very basic but we often overlook these points . Waiting for part 2 though!