Recently there has been a groundswell of the benefits to using design patterns, both in the blogosphere and on the bookshelf. Also equally important, though perhaps less publicized, are what user interface engineer Bill Scott calls the “traps of bad design: anti-patterns”.
So what are anti-patterns? Simply put, anti-patterns are “some repeated pattern of action, process or structure that initially appears to be beneficial, but ultimately produces more bad consequences than beneficial results”, and summarized as “commonly re-invented bad solutions to problems” (Wikipedia, Anti-pattern).
Documenting these anti-patterns was recently discussed on UXmatters by Peter Hornsby, a Senior Information Architect at Friends Provident in the United Kingdom. While I take issue with Hornsby’s examples he uses (Shiny Thing Antipattern?) the ability to name an anti-pattern is an early step to identifying it elsewhere.
Anti-patterns shouldn’t be mistaken for poor usability. After all, some anti-patterns are perfectly usable, as people have been exposed to the anti-pattern for so long (i.e. some wizards) they are trained in how to use it effectively. In other cases, the anti-pattern, while usable, is just an adequate answer, not the optimal solution.
Likewise, avoiding anti-patterns does not guarantee good usability either. Every day people find new opportunities to screw up a good design pattern.
- meandering way
- borg idiom
- tiny targets
- hover and cover
- pogo stick navigation
- novel notions
- metaphor mismatch
- double duty
- windows aplenty
- animation gone wild
- misguided misdirections
- missed moments
- one at a time
- non-symmetrical actions
While many of the above anti-patterns cannot be understood by label alone, any reader who downloads the presentation should have an understanding of a “novel notion” or a “linkitus” anti-pattern. That said, let’s take one of Scott’s anti-patterns and apply Hornsby’s formatting (with a few minor changes) to a live example found a year later in 2009.
Novel Notion (Scott, pp. 59-68)
A Novel Notion is creating a new interface for a common idiom that is more confusing than the original. Sometimes mis-using a component for a new unintended purpose.
Most frequently sighted:
Often used in forms or custom controls that can be easily replaced with off-the-shelf functionality.
Desire to be different or to use every available component somewhere in an application.
“Check out this new way to scroll” or “It looks like a radio button, but it’s actually a trigger…”
The bait and switch: users presume they understand how something will work, only to realize it’s different from what they expected
There could be times when a new control, or a collection of controls, is the only available means of executing a process. If your users will be interacting with the new control repeatedly over time, their repetition should result in familiarity with the control.
How to Avoid:
Understand the purpose of each type of component. For example:
- Carousels do not replace scrolled lists
- Drag and drop is not for single attribute setting
Don’t construct an artificial interface to support an idiom (don’t create the house for the nail)
A novel approach will work if it is intuitive (but what is intuitive?) Scott 68
What the designer makes up for in keeping with their intended appearance (regardless of whether or not it looks good), they lose several cues available to the user had they used standard scrolling.
Specifically, if the designers used conventional scrolling controls, I could look at the size of the scroll bar itself and determine how much news content is actually available based on what’s currently displayed.
Furthermore, I could also understand my relative location of what I see versus what’s available. I’m disoriented–am I reading the most recent news story, or the last? Or am I somewhere in the middle?
In addition, moving the mouse over this custom scrolling widget begins moving the content–another departure from standard, conventional scrolling. Since most people would expect a click-action to begin movement, the sliding content likely surprises the reader as it disappears off the page.