What You Need to Know About Usability

Posted in Tips, Tools, Usability, Web Design • Posted on 19 Comments

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.

Heuristics

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.

Brainstorming

Brainstorming

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.

Spacing

Whitespace

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

Typography

Typography

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.

Contrast

Colors

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

Navigation

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.com

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

Fivesecondtest.com

userfly.com

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.

Userfly

Usabilla

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

Usabilla

Clixpy

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

Clixpy

Usereffect checklist

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

Checklist

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.

18 Written ArticlesWebsite

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

19 Comments Best Comments First
  • shilpi

    Monday, May 16th, 2011 13:16

    1

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

    0
  • rrchaugule

    Thursday, May 19th, 2011 13:43

    7

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

    0
  • Ruben D'Oliveira

    Thursday, May 19th, 2011 14:54

    8

    Thank you, guys. Glad you like it :)

    0
  • TG

    Tuesday, May 24th, 2011 07:06

    9

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

    0
  • Richard

    Tuesday, May 17th, 2011 21:20

    6

    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.

    0
  • arun

    Tuesday, May 17th, 2011 16:53

    5

    Thanks, Nice post

    0
  • Simon Day

    Monday, May 16th, 2011 15:03

    2

    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.

    0
  • Renato Alves

    Monday, May 16th, 2011 20:16

    3

    That’s one of the things I need to improve in my blog and in my future works/sites…

    0
  • Nathan Bandy

    Tuesday, May 17th, 2011 10:35

    4

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

    0
  • Antown

    Thursday, May 26th, 2011 08:11

    10

    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.

    0
  • Liviu Anghelina

    Thursday, May 26th, 2011 13:01

    11

    Tnx a lot for this article! There are few usability articles maybe you can make on base more on UX!

    0
  • Lauren

    Monday, November 28th, 2011 23:00

    17

    Thank you very much for sharing this nice information. I’ll be waiting for the new one.

    0
  • Laura Peragallo

    Wednesday, April 18th, 2012 23:36

    18

    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.

    0
    • Dainis Graveris

      Thursday, April 19th, 2012 05:07

      19

      Laura, exactly – pretty design doesn’t mean it will work :) But that’s the trap we fall sometimes in yes..

      0
  • Danny

    Friday, October 28th, 2011 18:51

    16

    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

    0
  • alexander

    Friday, July 22nd, 2011 22:27

    15

    I like IT!
    Thanks

    0
  • Gavaskee

    Friday, May 27th, 2011 10:38

    12

    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. “

    0
  • Palanivel Raja

    Saturday, May 28th, 2011 05:23

    13

    Nice article. Definitely it will help the users.

    0
  • Fauzi R.

    Monday, June 20th, 2011 03:07

    14

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

    0
  • Laura Peragallo

    Wednesday, April 18th, 2012 23:36

    18

    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.

    0
    • Dainis Graveris

      Thursday, April 19th, 2012 05:07

      19

      Laura, exactly – pretty design doesn’t mean it will work :) But that’s the trap we fall sometimes in yes..

      0
  • Lauren

    Monday, November 28th, 2011 23:00

    17

    Thank you very much for sharing this nice information. I’ll be waiting for the new one.

    0
  • Danny

    Friday, October 28th, 2011 18:51

    16

    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

    0
  • alexander

    Friday, July 22nd, 2011 22:27

    15

    I like IT!
    Thanks

    0
  • Fauzi R.

    Monday, June 20th, 2011 03:07

    14

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

    0
  • Palanivel Raja

    Saturday, May 28th, 2011 05:23

    13

    Nice article. Definitely it will help the users.

    0
  • Gavaskee

    Friday, May 27th, 2011 10:38

    12

    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. “

    0
  • Liviu Anghelina

    Thursday, May 26th, 2011 13:01

    11

    Tnx a lot for this article! There are few usability articles maybe you can make on base more on UX!

    0
  • Antown

    Thursday, May 26th, 2011 08:11

    10

    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.

    0
  • TG

    Tuesday, May 24th, 2011 07:06

    9

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

    0
  • Ruben D'Oliveira

    Thursday, May 19th, 2011 14:54

    8

    Thank you, guys. Glad you like it :)

    0
  • rrchaugule

    Thursday, May 19th, 2011 13:43

    7

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

    0
  • Richard

    Tuesday, May 17th, 2011 21:20

    6

    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.

    0
  • arun

    Tuesday, May 17th, 2011 16:53

    5

    Thanks, Nice post

    0
  • Nathan Bandy

    Tuesday, May 17th, 2011 10:35

    4

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

    0
  • Renato Alves

    Monday, May 16th, 2011 20:16

    3

    That’s one of the things I need to improve in my blog and in my future works/sites…

    0
  • Simon Day

    Monday, May 16th, 2011 15:03

    2

    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.

    0
  • shilpi

    Monday, May 16th, 2011 13:16

    1

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

    0

Comments are closed.

54.234.225.23 - unknown - unknown - US