Common usability errors to avoid at all costs

Default avatar.
May 09, 2013
Common usability errors to avoid at all costs.

ThumbnailOne 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 marcschenker​copywriter​.com.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…