Advertisement
User Experience

The World of UX Anti-Patterns

by

As a user of the web, from time to time you may find certain things which are really annoying. Perhaps something about a login form, navigation, or a web application in general, makes it difficult for you to complete a given task. Why has someone designed and built something in this way?

The answer is complicated. The first and foremost problem is that those responsible may have neglected to test their design with real users. Often, when this is the case, they likely thought they knew of a good way to handle that interaction. After all, they’d seen it on other websites, and surely those designers tested it? Why reinvent the wheel?!

The problem here is that sometimes the competition may not be as smart as you give them credit for. So while we’re all busy visiting CSS galleries and copying each other’s work without testing it, we’re inadvertently building up a library of patterns.

Some of those patterns work, but some do not. If the wheel you are copying is actually square (hey, it works if you push really hard!), then yes Virginia, you actually do need to reinvent the wheel.

Consider the following:

  • Your users are not necessarily Amazon’s users, or Google’s users, or even your competitor’s users. To find out whether a design pattern will work, you really need to test it with your unique users. Maybe your users are all sailors from Dubai (a use case that actually occurred in my organization recently). Your users have different needs than the users of other websites.
  • But aren’t there certain known things about the way the human brain interacts with information?

Yes. But again, that is a spectrum. There are very few absolutes. Take, for example, this recent study by Harvard University, which resulted in a game that could guess your age by your mouse clicking speed (I took it, it was spot on!)

Users have different needs by age, physical ability, culture, and more. That’s why canned solutions can so often backfire.


What is an Anti-Pattern?

An anti-pattern is a frequently used design pattern that either outright doesn’t work or is counter-productive. You’ll see them in web applications and websites, anywhere where a user needs to perform an action in some way, whether it’s logging in, providing information, or reading information in order to make decisions.


How to Identify Them

As a web designer, you'll probably have an easy time recognizing when something is blatantly ineffective (for example, a hover-over menu that closes before you can click a menu item). However, anti-patterns are often more subtle. A determined user will get past them, but not without a certain amount of pain.

To identify them, it’s best to turn to your web metrics. If you aren’t using metrics on your site, get started yesterday! Google Analytics is a great choice to start with, since it’s free and easy to set up.

What are you looking for in your metrics? Some things that will indicate the presence of a problem (and possibly an anti-pattern) include:

Users dropping off of pages.
If many users navigate to a certain page but then suddenly disappear, you perhaps need to have a closer look at what’s going on on that page. Do they need to complete an action to proceed? Are they unable to find where to go next? Is the whole page a flashing animation? You won’t know until you investigate. Flag this area for further analysis and real live user research.

Random clicking.
If users are clicking all over, that means they don’t know what they’re actually supposed to click.

Repeatedly scrolling up and down.
If users are scrolling up and down, it means that they can’t find what they’re looking for, or what they’re expected to do.


Some Common Anti-Patterns

A usability problem does not necessarily equate to the presence of an anti-pattern, but it could be a clue. Many anti-patterns have been studied and shown to be inefficient often enough to be generalized as a bad idea. Here are some of them:

Clickable elements which don’t appear clickable

Clickable or not?

Instances of this include:

  • Buttons which are too small.
  • Text links which aren’t visually distinct (blue is best!)
  • Buttons which are too flat to cue users that they are in fact buttons (for more on usability problems with the flat design trend, read this article.)
  • The absence of hover states can also be problematic, including failure to use {cursor: pointer;}.

Hover and cover

Hover and Cover

It’s convenient to declutter interfaces by hiding information behind hoverable objects such as buttons or captions, but be sure that the information doesn’t hide again too quickly. Users can’t read as fast as you think they can. It’s pretty annoying to have to keep mousing to keep information visible.

Hover and Cover

Inconsistent context

For example, the presence of three different kinds of links on a page. One type returns the user to the homepage, one type takes the user outside of the site, and the third opens a popup. This could be confusing and frustrating.

One at a time

One at a time

In a complex list where users perform actions such as adding, deleting, or changing the state of list items in some way, provide a batch option! Being forced to make edits one item at a time is tedious and painful.

Tons of content crammed above the fold

Above the fold

Studies have shown that users do in fact read below the fold. Yet somehow, the myth of keeping content above the all-important fold persists. Space out your content!

Pogo stick navigation

Pogo Sticking

Pogo stick navigation is when the user is required to go down a level or two to perform an action, come back up to the top, then go back down again. The name was coined by Jared Spool and describes the jumping action of having to navigate down, up, and down again.

Erasing information on error

We erased that for you!

An example of this could be any form where a user saves, triggers an error, and is then forced to re-enter all or part of the information they entered previously.

The wrong destination

This is when an action is completed and the user is taken to a different page than they were expecting. A common occurrence of this is on eCommerce sites, where a user is required to sign in to complete a transaction. However, when they sign in, they’re taken back to the front page instead of to the page where they were ready to enter their credit card information.


Homework

Take a look around your current project, with an eye for some of these patterns. Have a friend or uninvolved coworker walk through, and watch what happens. Do they become frustrated anywhere? Places where things don’t seem to go smoothly could be a sign of an anti-pattern.

These are just a few! What anti-patterns have you noticed around the web? Have you fallen into any of these pitfalls on your sites?

Related Posts
  • Business
    Finance
    How to Measure Your Business's Profitability1 measure business profitability
    Part one of our four-part series on key business metrics is a look at profitability metrics. You'll learn four of the most important ways of measuring profit, how you calculate them, what the results can tell you about the health of your business, and most importantly, what action you can take to improve your results in the future.Read More…
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Code
    Tools & Tips
    How to Use New Relic Custom Dashboards & Why You'd Want ToGetting started new relic retina preview2
    Today we're going to look at New Relic custom dashboards. Specifically, I will show you three ways that I tend to use custom dashboards:Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Business
    App Training
    How to Set Up Your Online Business Presence With SquarespacePreview online setup with squarespace
    In today’s technology-driven world, having a website for your business is an absolute necessity and probably the most important part of marketing. Almost a third of the entire world’s population uses the internet so whether you’re a freelance writer, a web developer, a professional speaker, an estate agent, or a micro business owner, it’s crucial to have an online presence that not only looks professional but can provide essential information to your customers. As part of our series Setting Up Your Business Online Without Coding, I’ll show you how to create your own professional, not to mention gorgeous, website with Squarespace that won’t require you to enter a single line of code.Read More…