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

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!

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, 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

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

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

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

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

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.

Usabilla

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

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.

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.