5 Cardinal Sins of Web Usability

Different users may have different goals when they visit a website, but they have one thing in common: they all want to achieve their goals quickly and easily.

In fact, research shows that the average visitor only spends 1 minute 49 seconds on a website before abandoning it if the site doesn’t readily offer up what he or she needs. And after visitors abandon a bad site, 88% of them won’t return to that site during the same session.

What does that all mean? It means you have less than 2 short minutes to capture your audience’s attention and prove to them that your site has what they need. If you don’t achieve this, you risk losing them forever.

So how can you make sure your website doesn’t become one of those abandoned sites that are relegated to the usability graveyard? The content and design elements will obviously depend on your organization and your team’s preferences, but you can increase the user-friendliness of your website by avoiding some common mistakes. I like to think of these as the Cardinal Sins of Website Usability. Steer clear of these blunders to make sure your website is easy to understand and navigate.

Sin 1: Violating web conventions

People expect websites to look and function a certain way. When a website violates those expectations, that’s when usability problems arise.

Put things where users expect to find them.

Users expect certain page elements to be in certain locations. For example, a company’s logo is usually on the top left of the page, and the primary navigation links are usually along the top of the page. Search bars are typically on the top right of the page. Straying too far from users’ expectations can result in a frustrating and counter-intuitive user experience.

Don’t make things look clickable if they’re not.

Web users interpret blue text and underlined text as being hyperlinks. A word that’s blue or underlined (or worse, blue _and _underlined) sends a strong signal that it should be clickable. If it’s not clickable, that can be confusing to a user – it’s better to stick to another colour of plain text. The same goes for images that look like buttons, such as simple shapes with shading or shadow effects that make them look 3D. If it looks like you can click on it, users will probably click on it!

Here’s a screen capture from a bed and breakfast lodging directory. Because the name of the listings are in blue, users have a strong expectation that they should be able to click on the names to see additional details about the property. However, this text is not clickable – users must instead click the “View Listing” button to see property details. (In order to make this call-to-action more obvious, the site could have made this button look more clickable by adding drop shadowing, or shading the button so that it appeared more 3D.)

 

Make it easy for users to know where they’ve already been, and where they might find information they haven’t seen yet. Changing the colour of links once they’ve been visited eliminates the need for users to mentally keep track of their journey through your website.

Don’t break the “back” button.

Users see the “back” button as their fail-safe; their “get out of jail free” card. If they end up on a page they don’t find helpful or useful, they rely on the “back” button to get back on their path (e.g., return to a website’s home page or search results page). Including page elements that prevent users from hitting “back” to go to a previous page is a no-no.

Don’t confuse novice web users.

Having linked pages appear in a different window can be confusing for inexperienced web users. A new window popping up might hide the other windows and leave the user unsure about how to return to their original page. Worse yet, having links appear in a new window or tab violates users’ expectations about the “back” button: clicking “back” on a new window won’t bring a user back to their original page.

Experienced users already know the shortcuts.

You might argue that it’s often useful or convenient to have multiple windows or tabs open at the same time, so one can zip back and forth between pages. This is certainly true for many users, but these users also tend to be relatively web-savvy. Experienced web users typically know that they can make a link open in a new tab by right-clicking or CTRL+clicking on it. Having links default to opening in the current tab is not much of a hindrance for these experienced folks, but does avoid confusing less-experienced web users.

The exception: documents.

The exception to this guideline is when your link opens a PDF, word document, or other kind of document. In these cases, users interact with the documents as though they were actual files. What do you do when you’re finished with a file? There’s no “back” button to hit, you just close it! If these linked documents had opened in the users’ current window or tab, closing it would close their browsing session. So, it’s preferable for linked content to appear in a new window or tab if the link opens a document of some kind.

Sin 3: Content that Looks Like an advertisement

Web users have come to expect ads on websites to look a certain way and be placed in certain places. Users have also developed “ad blindness”: if content is in a location that’s typically reserved for ads, or formatted such that it looks like an ad, users may ignore it outright.

Avoid putting content in boxes or shapes that look like ads.

When scanning a page, large colourful blocked areas often shout I’m an ad! to users, especially if there are a lot of graphics or animation involvedPeople generally expect useful information to be in plain text, in the center of the page.

While some useful content (e.g., archive or related content links, navigation links, contact information) can be found here, these zones are also where ads are frequently found. If you do place content in these areas, make sure they are visually simple and that they don’t look like ads.

This is one of Ryanair’s old site designs. With their placement down the left edge of the page and their large and colourful format, it’s not clear whether the items “Cheap Car Hires”, “Cheap Hotels”, etc. are actual links for booking within RyanAir, or if they’re advertisements. The area for inputting booking information also looks cluttered and ad-like, and the search bar is located on the left side of the page instead of the expected top right.

Avoid pop-ups.

Do we really need to say more? Users associate pop-ups with spam, viruses, and seedy advertising. Many users have pop-up blockers installed on their browsers, so your pop-up content might not even appear for them.

Sin 4: Dense content

Wall of text = bad!

Website readers skim the page, looking for key words to focus on. This means that web content needs to be concise – don’t give your visitors a wall of text to pick through. Bullet points, meaningful headings, and informative graphics can help break up content into easily-digestible chunks. It’s best to use as little text as is realistically possible. Consider whether some of your content might be better represented as an infographic, a chart, or a table.

Write at a grade 8 level or lower.

For a generalist audience, your content should be written at no higher than a grade 8 level of readability. Top level pages should be written at no higher than a grade 6 level. If you’re targeting a sophisticated audience or dealing with very complex topics, you might get away with content that checks in at a slightly higher grade level. (For comparison, the Wall Street Journal is written at a grade 11 level.)

How to check readability:

You can enable readability statistics in the Spell Check function of MS Word, or you can paste content into a site like Readability-Score.com to find out the reading level of your site.

Sin 5: Empty hype or pure marketing drive!

Of course, a main function of you website is to promote your brand or message, but filling your site with too much marketing-speak is a turn-off.

Just give the people what they want.

Users primarily visit websites to gain information, so it’s crucial to provide them with good, useful, and relevant information, lest they abandon the site.

Avoid too much spin.

Consumers are increasingly savvy, and have come to mistrust copy that is blatantly skewed or biased in praising a company or product. Maintain a neutral tone in your content, and link to relevant external reviews if possible. This will help convince users that your site provides accurate information, and that you have nothing to hide.

Don’t make up words or jargon.

It may seem exciting and novel, but most users don’t have time to figure out what a made-up term means. Use vocabulary they already know, and don’t make them work any harder than necessary to understand and navigate your site.

Building a website that both looks good and creates a great user experience takes a lot of thought and planning, but it’s effort well spent. Your website is often the first point of contact between you and your audience, and it’s crucial to make this first impression a good one. There are many factors to consider in website design, and while avoiding these cardinal sins of usability won’t guarantee you a perfect site, it’s an easy way to remove the biggest usability barriers that drive visitors away.

This post was inspired by the book “Prioritizing Web Usability” by Jakob Nielsen and Hoa Loranger (New Riders, 2006). It’s a great resource that’s written in a friendly and accessible manner, with lots of real-life examples to demonstrate the concepts.

Written by

Cara Tsang

Cara Tsang

Sign up for our newsletter