10 simple guidelines to improve the usability of your website

Back to the homepage

These guidelines are based on often errors I found on many websites, as well as common sense. Following them will help you improve your website and make your visitor's experience a lot better.

  1. Font Size

    Make sure that the font size of your content text is at least 12 px. Smaller font sizes are much harder to read, especially for adult visitors and people with vision problems. 14 pixels will work even better. The more comfortable visitors feel during reading, the more they will understand what you are saying.

  2. Page Title

    Title of every page (that you see at the top of the window of your browser) should be short and descriptive. Include the title of the current page, as well as the name of your website. It will help the visitor to recognize your page among opened tabs/windows as well as easier to find it in bookmarks.

  3. Navigation

    Indicate which item in your navigation is currently active. There are many ways to do this – from simply bolding it's font to using different colors and backgrounds. It will help users understand where on the site they are, even if they came to your website from a search engine. Also consider adding breadcrumbs to your pages to minimize risk of the visitor feeling lost.

  4. Logo – link to the homepage

    Make the logo on your website link to the homepage. Doing this on internal pages will help visitors if they get lost on your website. This link will direct them right to the homepage where they can start their search for information again.

  5. Headers

    Make sure that every content page on your website has clearly distinctive headers. It will help visitors make sure that they are on the right page with information they are looking for. Also it will help to spread semantic web if you will use <H1> .. <H6> tags for headers.

  6. Accessibility

    Try this, turn off images and javascript in your browser and try to navigate through your website. Accessibility is an important aspect of an online experience that you need to always keep in mind. It will also help you get better search engine indexing.

  7. URLs

    If the URLs on your website are mostly query string parameters (information after ? mark) or indicate server technology you are using (PHP, ASP, Cold Fusion etc.) – it's better to change them to more human friendly.

    So instead of "/index.php?name=about&page=contacts" you should use something like "/about/contacts/". And also keep in mind, search engines like these kinds of URLs more.

  8. 3 Clicks Rule

    "3 clicks" is a good rule of thumb. What this means, you (and your visitors) should be able to navigate to any page on your website withing 3 clicks. While there are possible exceptions, try to follow this rule unless you can provide strong arguments against it.

  9. Forms

    Please do not modify how form fields, buttons and controls look just to make them look cool. You should have a really good reasons to do so. Standard controls may be ugly and too casual, but your visitors are used to them. Think of it like this, when a guest comes to your house, would you start moving the furniture around because it's cooler that way?

  10. Links, links, links.

    First of all – links should be easy to identify in text (underlying, different color etc.). Second of all – please dont use javascript in the HREF attribute, it never works when your visitor tries to open a new tab/window. If you absolutely need to use javascript (to open a small new window with additional information, for example), put the javascript code in the onclick attribute of your link.

    So <a href="window.open('http://www.domain.com/')">Sample</a> Should be <a href="http://www.domain.com" onclick="window.open(this.href); return false">Better Sample</a>

    It might look a little bit more complicated, but it works so much better and it's worth learning how it works. And by the way, if you are going to open a new window - let the user know about it (either using an icon or simply putting text next to the link – "will open new window").

Links for further readingks for further reading