Practical & Research-Based Ways To Make Websites & Capture Customers

How To Make Your Website More Usable. 15 Research-Based Guidelines

website usability checklist guidelines

Website Usability Tip #1 : Make your site fast

Speed matters more than you can imagine.

Why?

Search engines are using your website speed as a ranking factor

A study by LightSpeedNow revealed that making a website faster resulted in 15% more traffic from Google, and Bing and Yahoo also sent more traffic.

Users don’t have any patience with a slow site either.

Every millisecond counts. Most people expect a site to load in 2-3 seconds or less and will visit a website less often if it is slower than a close competitor by more than 250 milliseconds.

To increase your website speed:

Website Usability Tip #2 : Know Where People Focus Their Attention and Give Them What They Expect With Your Logo, Menu And Search Box Placement

If people are used to seeing things a certain way on the internet. If your site doesn’t meet those expectations, then they need to think and make an effort to figure things out.

Most people are trained to read from left to right because that’s how their language works. This extends to websites as well and people expect to see important elements of your site on the left. In fact they spend more than twice as much time looking at the left side of the page as they do the right.

Also the top portion of your website is where visitors could spend up to 80% of their time.

Keeping this in mind, conventional website layouts work best:

  • Logo should be placed prominently in the top-left of the page and link to your home page.
  • Site navigation is best placed at the top and ideally it should start all the way to the left.
  • Internal search box should also be towards the top, either on the left or right.

Website Usability Tip #3 : Have A Tagline That Says It All

This one is just common sense. A good  tagline is catchy and clearly describes what your website is about & why users should stick-on. 

Website Usability Tip #4 : Moderation Is The Key When It Comes To Site Navigation

Previously there was an incorrect belief that the number of choices in lists and menus should be limited to 7 +/- 2. The thinking was that people could not keep more items in their short term memory. However, on websites people have the information in front of them visually and don’t really need to memorise anything.

Subsequent research comparing navigation efficiency through sites of varying depths and breadths broadly converges, on the conclusion that users find up to 16 (ungrouped) top-level links leading into 2-3 subsequent menus the most efficient, learnable and least error prone.

Drop-down menus work fine as well, even if they are very large.

In case you have more than one menu, it is important to group them logically and keep them separate, so people understand what each one is for.

In general, the feel I got from studies on navigation menus, is that there are many possibilities which can work – broad/shallow, narrow/deep, drop-downs, multiple menus, etc. The key is to do everything in moderation and not to complicate things too much.

Website Usability Tip #5 : Make It Easy To Find Your About Us and Contact Pages

Another straightforward one but worth mentioning because I read some reports about quite a few websites not following this guideline.

Website Usability Tip #6 : Create A Custom & User Friendly 404 Page

For some reason people might reach a page on your site, that doesn’t exist any more. In such cases instead of showing them the standard “Page Not Found,” which runs the risk of them leaving your site, give them options to find something of interest. Including a list of blog categories and/or an internal search box in the center of the page is a good option. 

Website Usability Tip #7 : Make Web Forms Simple And Logical

Smashing Magazine published a very detailed post on web form usability, based on two books - Web Form Design: Filling in the Blanks and Forms That Work: Designing Web Forms for Usability.

Here are some points which I thought were especially relevant:

  • Do not ask questions beyond the scope of the form. Only ask for what you really need.
  • For registration/login forms, make it easy for registered users to log in and for new users to register. Separate the two areas clearly.
  • Order form labels logically, reflecting the natural flow of a conversation. For example, don’t ask someone their name only after having asked a number of other questions. More involved questions should come towards the end of the form.
  • Placing labels above input fields is best if you want users to fill in a form as fast as possible.
  • Group related information, such as personal details. The flow from one set of questions to the next will better resemble a conversation.
  • Remove clutter such as banners and unnecessary navigation that might distract users from filling out the form.
  • Should it be “Name and Surname” or “Name and surname?” Both are OK. What should be avoided though, is the using all CAPS, which can look unprofessional and hard to scan.
  • Try and have just one column in the form to keep attention and avoid confusion.
  • It is better to avoid generic words such as “Submit” for actions, and to use descriptive words such as “Join Facebook.”
  • Display clear error and success messages.

Website Usability Tip #8 : Minimise The Use Of Pop-Ups

Pop-ups are those extra windows that appear, without your permission, that usually sell you stuff or ask you to join something.

In most studies users said they were annoying/irritating.

However, many websites still use them because pop-ups are very effective with conversions. So you’ll need to strike a balance here.

Website Usability Tip #9 : Pick the right background and text colours

While it might be tempting to use other combinations, a light background with dark text works best. Here are some nice illustrations and suggestions, for different background and text colours.

Website Usability Tip #10 : Follow Good Typographic Design Principles

A Smashing Magazine survey provides some great pointers/guidelines for this area as well:

  1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
  2. Common choices for headlines are Georgia, Arial and Helvetica.
  3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
  4. The most popular font size for headings is a range between 18 and 29 pixels.
  5. The most popular font size for body copy is a range between 12 and 14 pixels.
  6. Header font size ÷ Body copy font size = 1.96.
  7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
  8. Line length (pixels) ÷ line height (pixels) = 27.8.
  9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
  10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular.

Website Usability Tip #11 : Make Your Text Scannable. People do not read.

People only read word-by-word on the web when they are really interested in the content. They usually skim the pages looking for highlighted keywords, meaningful headings, short paragraphs and scannable lists.

Website Usability Tip #12 : Make Links Obvious

Underline or give links a different colour, to make them obvious. In case you’re wondering what the best colour choice is, in terms of user friendliness/familiarity – it’s Blue (Van Schaik, P., & Ling, J., 2003).

Website Usability Tip #13 : Don’t Worry About having a scrollbar on your website

Nowadays people are used to scrolling, so don’t be afraid to have long articles/pages and don’t feel compelled to break them into pages.

A study found that for sites with a scrollbar, 76% of page-views were scrolled, and 22% were scrolled all the way to the bottom of the web page (Unfolding the Fold).  Users are most engaged for the first 540 pixels and for the bottom 500 pixels of a web page.

So users will scroll, but only if they think it will be worth their while. Your layout needs to “encourage scanning” and the initial information should make people “believe that scrolling will be worth their while.”

Still don’t believe that people will scroll enough. You must take a look at this.

Website Usability Tip #14 : White Space Is Not A Waste

Having enough white/empty space on your website has many benefits:

  • Allows for easier readability and scannability.
  • Prioritises user interface elements.
  • Guides users on a page.
  • Can create the feeling of sophistication and elegance.
  • Is essential for a balanced, harmonious layout.

Website Usability Tip #15 : Graphics And Stock Images May Do Nothing More Than Distract

Jakob Nielsen’s eye-tracking study confirms that people almost never look at anything that looks like an ad (Banner Blindness: Old and New Findings). Also an eye-tracking study shows no fixation on decorative images; instead, people look for the content and ignore unrelated visual noise (Eye-tracking points the way to effective news article design).

So use images and graphics sparingly and wisely.

Written By: Amit

Amit is an entrepreneur, online marketer and career advisor. In a previous life, he's worked with Bain, Morgan Stanley and Citigroup. Amit has masters degrees in Business, Finance and Organisational Psychology.