As you develop the skills of an experienced user interface designer you are bound to make mistakes. However, as is a testament of, I believe that we should rather focus our attention on what can be learned from successes rather than what we can learn from mistakes.

User Interface anti patterns do not deserve their own section or being a part of the design pattern library. Nevertheless they carry some value, which is why I’ll try to list a few. Hopefully that will make you refrain from going over the same smelly waters as myself.

So what are anti patterns? A definition that resembles the definition of a design pattern is: Recurring re-invented bad solutions to solve common problems.

Common UI Anti Patterns

Ambiguous link labeling

Have you ever seen a link simply labeled: Click here? The result of using such ambiguous link label is a confused user. Where will the link take the user upon clicking on the link? This mistake is in the same category as not marking your links to stand out from the rest of your content.

Hide and hover

The hide and hover anti-pattern occurs when links to the actions of an element are not visible until you hover the element. A common example is the use of a hover effect to show and hide edit/delete links in web applications. This forces the user to explore the interface with his or her mouse instead of knowing where to click and what actions are available immediately. Some even go further in this anti pattern by leaving a margin between the hover target and the action links so that the links disappear as the user moves the mouse towards the action links.

Tiny link targets

When building a site’s navigation, a common pitfall is to provide way too small click targets for links. This will frustrate the user as he or she will have to spend more mental energy on clicking on a small link target than a bigger one. Instead provide gracious padding to links to fill up the white space between elements. Fitts’ law states that the time to move your cursor to a target is a function of the distance to the target and its size. Making interaction points too small is a good way to frustrate your users.

Not using labels for radio and checkboxes

Apparently, not everybody are aware that the <label> html tag acts as a link target for radio and checkboxes.

Use of rocket science to solve simple problems

Sometimes a designer constructs a solution that is much more complex and confusing than the prior solution. The anti-pattern is often seen when designers have explored new ways of doing things that are then forced upon simple problems. An example is use of drag-and-drop techniques for simple attribute setting. Does a shopping cart need drag-and-drop functionality and are you sure you need fade and fold effects to make your user interface better and more understandable?

Designing for the perfect use-case

Some say the user is dumb. I would rather say that the user never stands a chance guessing your initial intentions. Design your interface defensively and provide feedback to unintended input. Think about how your user interface can and is interpreted by different users and remember to do user testing!

One at a time

When dealing with lists, it can annoy and frustrate users not being able to perform the same action on multiple items in a list at the same time. Project management applications with todo list functionality such as Basecamp or Backpack suffer from this anti-pattern, as you can only check one item at a time.

Webmail software solve this problem by having a “Select all” button that will check all checkboxes for each mail. But what if you want to perform the same action on more than just the items that are visible on the page you’re viewing? At my workplace, there is a space limit on my mail account of 350MB. Deleting mails in order to get below the limit is a tiresome task as only 20 mails can be deleted at a time in MS Outlook’s webmail.

Bloated user interface

A bloated user interface tries to incorporate as many operations as can possibly fit into it with the end result of confusing more than helping the user to perform his or her task. A bloated user interface often include features that cannot be used on kinds of data the interface handles.

The magic push button

Some will argue that interface design should be separated from coding. Those people tend to follow a development methodology parted into phases, also known as the Waterfall model.

In this worldview, designers tend to draw the interface first then followed by the business logic only to discover that the “magic button” can’t just do what it should do – a number of steps are required by the user in order for that to happen. This is why good designers with an understanding of the coding paradigm are valuable assets.

Unfactorable interfaces

When interfaces emerge they are often simple and well thought out. Over time as several different designers each put their hand on an interface correcting and changing things here and there, the interface often grows into a monster that does a gazillion things more than it was originally intended to do.

At some point it looses its coherence and becomes an unstoppable monster. Agile programming talks much about staying lean by always refactoring your code to being the simplest possible working solution. One should never design ahead and prepare for what might be needed in the future, but only keep to what is needed right now.

If prior features are not needed anymore, they should be removed in order for the system to stay lean and be prepared for change. The same can be said about interfaces. They should always be the simplest possible working solution. If they change direction over time, they should still represent the simplest possible working solution for what it is changed into.

What common pitfalls do you tend to fall in to?

What are your user interface anti-patterns?

Anders Toxboe Author

Based out of Copenhagen, Denmark, Anders Toxboe is a Product Discovery coach and trainer, helping both small and big clients get their product right. He also founded and a series of other projects. Follow Anders at @uipatternscom.


  • Jamis Charles on Feb 06, 2009

    You’ve got some very good points here. Following Fitts law is something that is not observed frequently enough.

    However, I’m not certain some of these principles can be generalized so simply. I enjoy using basecamp and am not bothered by the fact that only one item can be checked at a time.

    I think in cases like this user intent and specific audience needs to be considered. I don’t anticipate many situations where I’d want to check all my todo’s at the same time in basecamp. That may add clutter.

    In any case, this is still a good list. Thanks for sharing.

  • website content on Aug 25, 2009

    Hide and hover is something i am not very fond off. It looks kind a old fashioned style. For me its time wasting and some time user don’t even bother to look at it as they dont have much time.

  • Product Page Redesign on Aug 27, 2009

    Nice, thanks

  • buy Dubai apartments on Aug 31, 2009

    I don’t agree with Website content as I think a good professional keeps an eye on everything related to work be it minute.

  • Dubai rentals on Sep 14, 2009

    Yes I agree with the last post on the point that a good professional keep an eye on every aspect of the work.

  • rompompom on Sep 21, 2009

    How Important is good background when designing good User Interface? If you wish to cooperate with us on UI research feel free to contact us.

  • Buy Dubai Property on Sep 27, 2009

    I give top importance to link labeling and site content but all this tips are good information. Thanks..

  • IT Company Abu Dhabi on Sep 27, 2009

    It has been my principle when creating a website to have a well organized and well structured site. This helps not only the readers of the site as well the SE’s.

  • Dubai Apartments For rent on Oct 18, 2009

    Quite helpful post for me, i will share this on my blog for my users ….

  • brians on Oct 22, 2009

    This is a great post, It lets everyone just starting out learn some good tips on good UI design, without having to make the mistakes a beginner normally would.

  • New Year SMs on Oct 26, 2009

    Really good post about the Patterns in blogs. I will try to follow them for my blog as well. Thanks for sharing the information

  • movers new york on Oct 28, 2009

    These Patterns are really very cool and make your blog more attractive. but I need some details on them.

  • Edmonton Logo Design on Oct 29, 2009

    Hide and Hover Anti User Interface patterns are really very good and I will use them in my website. Thanks

  • muscle pain relief on Oct 29, 2009

    Using Anti Patterns in the blog enhances its functionality but it is wise to use only reliable patterns. Your post contains good collection of AP and I would prefer to use for my blog as well.

  • designer sunglasses on Nov 03, 2009

    Anti Patterns are playing important role in the Inernet security issues. They have provided us with a good working platform. Thanks

  • Free games on Nov 05, 2009

    i have been using this for a while and it works very well.

  • custom logo design on Nov 05, 2009

    Well i never knew the importance of anti pattern just came to about this..

  • Calgary Logo Designing on Nov 08, 2009

    There is a very big issue of Patterns scheming. Its a great need of internet security that you have some kind of good anti Partners so its a very nice link

  • gold parties on Nov 13, 2009

    APIs are now commonly used by every website to perform different actions like tracking the visitors behavior,etc

  • Austin spinal cord injury lawyer on Nov 17, 2009

    All the Anti patterns are really great and extends the functionality of your website. Thanks for sharing.

  • Outsource Link Building on Nov 19, 2009

    Anti Patterns increases the functionality of any website and I am happy to find it very useful for me. Thanks for sharing

  • Air Horn on Nov 26, 2009

    This will definitely help those who are working on user interface anti patterns related work. Thank you so much!

  • compare credit cards on Nov 27, 2009

    I am new to interface anti patterns and this post has solved a lot of queries .Thank you .

  • Uintah Basin Business on Dec 02, 2009

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

  • Houston intellectual property lawyer on Dec 03, 2009

    All the Anti Patterns are very informative. Thanks for sharing

  • Personalized Fleece Blankets on Dec 09, 2009

    I really like the way you have put across your article about user interface anti-patterns. Thank you so much!

  • High Risk Processing on Dec 23, 2009

    I hope you have developed this following on the basic parameters of Waterfall model or SDLC model? Thanks for sharing this vital information with all the users. :)

  • forex trading on Dec 29, 2009

    thank for really nice and great helpful information about interface patterns

  • Dubai IT on Jan 06, 2010

    Helpful post for me, i will give put on my blog for my users.

  • Ecommerce Web Development on Jan 18, 2010

    Well i never knew the importance of anti pattern just came to about this..

  • 招聘 on Jan 20, 2010

    Well i never knew the importance of anti pattern just came to about this..

  • Blue Mountain Day tour on Feb 10, 2010

    I’ve already bookmark this article for all my future references. Thanks for posting!

  • General Contractor on Feb 18, 2010

    I’m really impressed by some of the above given points, there are lots of things which we can learn from this article.

  • ma foreclosures on Mar 28, 2010

    Very interesting post. Couldn’t be written any better. Browsing this post reminds me of my old bud. He always kept talking about this. I will send this post to him. Am sure he will have a good chuckle. Thanks for sharing!

  • Free Online Movies on Jun 26, 2010

    An anti-pattern is a pattern that may be commonly used but is ineffective and/or counterproductive in practice, found this on wiki about anti-patterns.

  • Forex Training on Jul 28, 2010

    The great thing is that if people follow your tips on things like link labelling then they will also be doing good SEO too. This means their sites will not only be better for users but better for the search engines – its a win-win situation.

  • Game Up on Aug 11, 2010

    One of the main problems I come across when designing along side the client is ‘feature creep’ The client is always wanting to add more and more features to the application often making the interface over complicated. You have to set out exactly what the application will do before getting to the coding stage.

  • Isagenix on Aug 25, 2010

    Very nice information. User interface are the important ones for any kind of process say a software or a website. A good user interface can really help in achieving desired results. I have a friend who does forex trading online . His site had a good interface.

    Collin paul

  • Scott Forex Trading on Aug 31, 2010

    Nice Blog. Very good Info.
    Remember the K.I.S.S rule:
    (Keep It Simple Stupid)
    A UI needs to be simple to see, navigate, and understand, if you want people to use and more importantly, come back to your site, or use you software.

  • Train Horn Kits on Sep 28, 2010

    Interesting topic for sure. I’d be interested to read more. Maybe you could talk more about Ambiguous link labeling in a future post?

  • Stoodly - Forex developer on Oct 06, 2010

    although you may implementing these methods on your site for benefit with back linking and SEO they are certainly counterproductive. Crating a well layout, easy to navigate site make your target market happy and returning. As you already know, publish great information and customers will return for more!

  • Julia on Feb 22, 2011

    You’re right, we often do over complicate matters in web design. That’s one of the reasons I love to use wordpress, it does most of the techie stuff for me and if I need any fancy coding I can just look up how to do it.

    One thing I always do if it’s available when creating links is to use keywords as anchor text!

Comments have been closed