5 Web Design Usability Nightmares to Avoid

You’ve offered a killer product. You wrote some brilliant copy. You’ve even focused extra creativity on your design. But your website still hasn’t generated the traffic or sales you’ve expected. Maybe it’s not you — it’s your usability. Your website’s usability — in a nutshell, how easy it is to navigate — can make or break your Internet success. Read on to make sure your website isn’t guilty of one of these five web design usability nightmares.

1. The Superfluous Animation

Before you add that Flash video to your website, ask yourself: Does this animation benefit my end users, or is it just here to show off my development skills?

A web animation will inevitably slow down your site’s load time, so if you do decide to use one, make sure it has a purpose. Be parsimonious – if you overuse animation, then you lose its overall impact. Keep your videos short, simple and focused.

Sophie Paxton has some excellent tips on avoiding gratuitous animation.

If the verdict is that your website can benefit from a well-placed Flash animation, make sure that you offer an alternative, HTML-only, mobile-friendly page for users whose browsers don’t support Flash.

It’s true: Many mobile devices don’t support Flash, and you don’t want to turn away valuable iPhone or iPad users who click your Web link and stumble upon an exclusionary message like this one:

Chances are these users won’t bother to return later, even from home.

And speaking of animations…

2. The Dreaded Preloader

If your website loads slowly enough to require preloader animations, you’re doing something wrong.

“Preloaders” are those spinning placeholder images that appear while you’re waiting for content to load, like these:

News flash: Your users don’t want to watch a spinning animation. They want their content, and they want it fast.

That’s right, the Nielsen Norman Group (NNG) — an organization that conducts evidence-based research in Web user experience — found that 10 seconds is the maximum that users are willing to wait for a website to load — before they decide to move on to something else.

Even a delay of a few seconds is enough to make your users give up and exit your website.

So don’t invest in those fancy preloaders — focus instead on optimizing your content to make your website less sluggish.

You can test your website’s load time using Pingdom’s free website speed analysis.

3. The Unsolicited Pop-Up Window

Most modern web browsers block pop-up windows as a default — so if you think your users are reading the content you’ve placed in pop-ups, think again.

Even if they have pop-up windows enabled, users have expressed that pop-ups are both “annoying and distracting” when they’re trying to focus on the main content of your website.

In fact, NNG reported in 2004 that, according to a user experience survey, obtrusive pop-up windows — particularly ads — were the most hated internet experience. That feeling hasn’t changed today.

An inventor of the much-despised pop-up ad, Ron Carlson, even publicly apologized for what The Atlantic called “The Internet’s Original Sin.”

Bottom line: Avoid pop-up windows at all cost. If you want to include advertisements on your website, put them in a sidebar on the main page. Just make sure they don’t take up so much space that they detract from your primary content.

4. The Invisible Search Bar

You want your users to have quick and easy access to all of your content, right?

Then don’t force them to play “Hide & Seek” with the search bar. You do have a search bar… right?

Menu Pages is an example of a website that, while overall a useful resource for finding information about local restaurants, creates a difficult search experience for users.

The website commits three major search bar faux pas:

• Overlap with banner and logo. The background color and font of the search bar blend in with the banner and logo in a way that prevents it from standing out. Instead, at first glance, the search bar looks like it may be a continuation of the banner image — not its own functional text field.
• Atypical placement. The search bar is traditionally positioned at the top right corner of a website, so this is where users usually look first. On this website, the search bar sits under the banner and very close to the logo, making it difficult to spot.
• Confusing button design. The “Go” arrow on this website stands separately from the search field and, with its dark blue border and shape, also blends in with the other images on the site. Instead, the button should be immediately recognizable as a clickable element. Consider using the common magnifying glass icon so that users can find the search bar with a quick scan of the page.

5. The Missing Contact Information

Here’s one more usability essential that web designers too often overlook: the inclusion of easy-to-find contact information.

Many times, users will visit a website with the primary purpose of locating a phone number or e-mail address. This may be to request more information, ask a question, leave a comment or report a bug.

So once again, don’t create this usability nightmare by making your users play “Hide & Seek.” Provide your contact information and make sure it’s placed in a prominent location on your website.

Streamlining the User Experience by Avoiding These Usability Nightmares

These examples represent just a few common usability nightmares you can avoid with some simple tweaks to your website. If you implement the tips presented here, you’ll be on your way to improving your usability and providing a more pleasurable experience for your users.

What are some of your usability pet peeves?