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
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
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.
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
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
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 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
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?
