erova notebook • a user experience blog by Chris Avore

Shunning Cute Design: Identifying Anti-Patterns

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.

So is there a definitive list of  anti-patterns? The aforementioned Bill Scott published a PDF of a presentation he gave for eBig in 2008 covering these anti-patterns:

  • meandering way
  • borg idiom
  • tiny targets
  • hover and cover
  • pogo stick navigation
  • novel notions
  • metaphor mismatch
  • double duty
  • linkitus
  • 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.

Antipattern name:
Novel Notion (Scott, pp. 59-68)

Background:
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.

Root causes:
Desire to be different or to use every available component somewhere in an application.

Anecdotal evidence:
“Check out this new way to scroll” or “It looks like a radio button, but it’s actually a trigger…”

Consequences:
The bait and switch: users presume they understand how something will work, only to realize it’s different from what they expected

Known exceptions:
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

Example:

Novel Notion: unconventional scrolling

Here’s a news box coded in standard HTML markup that relies on JavaScript to scroll content instead of using a familiar browser scrolling control.

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.

Lastly, I cannot click in between the scroll arrows to jump down from one group of stories to another.  I’m forced to use these arrows that have no over, idle, or inactive state to read the content I want.  Simply using a normal scroll bar would have alleviated all of these issues and would likely have only required a simple CSS modification, rather than complicated JavaScript.

  • Pingback: Monday February 2nd Roundup | Webbyn.com

  • http://chelseadarlingdesign.com Chelsea

    You're right… I have one of those scrolling boxes without a scrollbar on my site because I wanted it to be consistent with the design. I need to delete that.

  • http://www.erova.com Chris

    Hi Chelsea,
    First off thanks for stopping by.

    I think you’re doing the right thing by going back to a normal scroll bar–no one ever got upset using a normal browser convention, but a lot of people can easily get frustrated using something different that doesn’t have to be.

    Go Dawgs!

  • http://chelseadarlingdesign.com Chelsea

    You're right… I have one of those scrolling boxes without a scrollbar on my site because I wanted it to be consistent with the design. I need to delete that.

  • http://www.nikemaxsale.com air max shoes

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum!the-boate

  • http://www.air-jordan-10.com/ air jordan 10

    Here elaborates the matter not only extensively but also detailly .I support the
    write’s unique point.It is useful and benefit to your daily life.You can go those
    sits to know more relate things.They are strongly recommended by friends.Personally!http://you-rselfas.com/

  • http://www.bad-boys-3.com bad boys 3

    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.

  • http://www.russian-women-dating.net/ date russian women

    The interesting information, the tonic on a note! 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.
     

  • http://fr.bride.md/ Rencontre femmes russes

    This theme has interested me! 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.