Common usability errors to avoid at all costs

One of the most important tasks on your plate as a web designer is usability. Usability is defined as a gauge of the quality of the user’s experience when interacting with your website. Any website you design should always be seamless from the standpoint of the user. They should find your site easy to navigate without having to first undergo special training. Usability is normally based on several different factors.

A person looking through your site wants their ease of learning to be top-notch. They’ll want to quickly learn the user interface so that they can jump right in and accomplish fundamental, navigational tasks. Efficiency of use is another factor: after they’ve learned to navigate your site, they’ll want to accomplish tasks speedily. Even if the user has used the site before, they’ll need to easily remember enough of the process to be able to use the site effectively the next time. This is called memorability. When they’re using your site, they may experience some errors, but are these errors frequent or severe? Finally, after they’re done with your site, is the user’s subjective satisfaction high or low? They should have liked using your site.

Of course, you can’t please all site visitors all the time, but some standards are common to ensure good usability. What mediocre web designers take for granted, you should not. Here is a rundown of the top three usability errors that web designers should avoid at all costs.

Clickable areas that are just too small

Your website will be chock full of hyperlinks, which are clearly meant to be clicked. So make sure that they are big enough to be clicked easily. It’s that simple. Otherwise, your hyperlinks won’t be well-received. Any user’s hand movements on the mouse aren’t going to be precise to begin with, so don’t make clickable areas so small that the user has to use a combination of finesse and strategy just to have a shot at clicking your tiny hyperlinks.

On the other hand, a bigger, more easily clickable area makes it so much more convenient to hover the cursor over any links. To make the clickable area bigger, simply make the entire link larger or improve the padding surrounding the link. You can do this by utilizing the CSS padding property.

Take a look at this fine example of a horribly small clickable area. It’s from the “Hacker News” page of a site called Y Combinator, which provides seed funding for startups. Notice how the comments and user links are so aggravatingly tiny. You’ll be lucky to finally succeed at clicking them after practicing several times.

Abuse of pagination

Pagination is great when it’s used for the correct purpose in web design. When used properly, pagination is a welcome feature because it makes a site’s layout more convenient and easier to absorb. It’s mainly used to divide content into various pages, and it’s a feature that’s usually seen on sites that present long lists of items.

However, pagination can also be misused, which makes it a contributing factor to usability inconvenience. Some sites are fond of abusing pagination for the purpose of dividing basic content pages into several pages, and there’s an ulterior motive behind this, too. The sites that do this are most likely attempting to increase their page views, plain and simple. Many online magazines and blogs obtain their revenue by way of advertising, so receiving more page views increases their viewing stats and lets them charge more for ads.

Take a look at this abuse of pagination, which comes to us from Wired Magazine. Note how the article on Google’s colorful logo is divided into eight pages when all eight pages could’ve easily been combined into one webpage. Even then, that longer article wouldn’t have caused the page to become slower in loading and processing. Also note how aggravating it is to click several times just to finish reading the article.

In addition, this abuse of pagination can detrimental with regards to SEO; if you divide content on your site up into several pages you dilute your content. This has the effect of reducing the number of relevant keywords about the topic on each webpage, which means every page makes less sense by itself. As a result, the search engines may fail to properly interpret what each page is about, thereby negatively impacting the article’s search engine result rankings.

Content that’s hard to scan

Content that’s hard for site users to scan is usually content that suffers from bad copy. Copy is the text content with which you’ve populated your site, and is absolutely essential to making your site’s usability excellent. Even before you worry about good copy, though, you’ve got to have a thorough understanding of site users’ viewing behaviors. Site users tend not to read all the information on a webpage from top to bottom, as you might expect them to.

In reality, site users absorb information by simply jumping from one piece of content to the next, essentially guided by what pops out at them on the webpage. You can thank the fact that the internet bombards people with information for this frenetic web-viewing behavior. Users’ eyes basically dart from one interesting section of any given webpage to another, which means you, as the consummate web designer you are, must structure your pages in a way to accommodate this frantic behavior.

First, ensure that your site has just a few, clear points of focus. These will function as the sections of your page that will catch visitors’ attention. You can succeed by including bigger fonts as well as high-contrast colors. For added visual attraction, also include images like icons right beside the text.

Second, every point of focus should ideally feature a descriptive heading. Without proceeding to read the copy further, a user ought to immediately comprehend what this section of content will cover. Never make your headings cryptic or unclear in order to draw readers in. Make the headings short though precise.

Finally, any additional text has to be succinct and easy to absorb. Offer just the fundamentals and exclude anything else. Much of the time, additional text that copywriters include to clarify a point actually subtracts from the readability of said text. There’s a tendency for many people to just read small snippets of text while avoiding longer paragraphs, so trim the fat.

Let’s take a quick look at a webpage that organizes its copy well. This is Cultured Code’s Things app for the Mac. You’ll notice that, at first glance, the points of focus, which are the screenshot and the giant-sized “Things” heading, are very obvious. The copy of the app’s various features, which you can see more of by scrolling down the page, is also very short and to the point, taking up just a short paragraph or two to give a brief description of every respective feature.

There’s so much to remember

Good usability involves so many distinct factors that they can all sometimes be a little hard to keep track of. Usability is all about the end-user and how they feel as they’re navigating and scanning through your site. Put yourself in their shoes as you are designing your site. Can they get around your site with ease? Are they going to easily remember what to do and where to go the next time they visit your site? Will they ultimately enjoy their experience browsing your site? All these questions should be front and center in your mind as you design your site.

Good usability also has practical benefits. The more a user can navigate your site efficiently, the more they’ll be back. They’ll also tell their friends, their mom, their co-workers…you get the picture. They will come and check out your site. As a result, you’ll get more page views, more readers and, hopefully, a loyal following. This means you can monetize your site and charge more for ads on the site. Take care of usability, and you’ll reap the rewards in so many ways.

What usability mistakes would you add? What’s the worst usability error designers commonly make? Let us know your thoughts in the comments.

Featured image/thumbnail, mistake image via Shutterstock.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.