As you develop the skills of an experienced user interface designer you are bound to make mistakes. However, as UI-Patterns.com 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?

Picture
Anders Toxboe Author

42 comments

  • 91958ffd49486ecc65236951c7d44aa1

    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.

  • 18745b1b4aae52b06c4be5be824e4818

    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.

  • 31270cf6736a9bfb08417c95836d5722

    Product Page Redesign on Aug 27, 2009

    Nice, thanks

  • F694aea273fb1490c3198e709e576ad0

    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.

  • 1e35ac0a1ac7f4929e529a3e017f052b

    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.

  • 25f9d73981af662fc84214249f462576

    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.

  • 64007d57ff6692b55ab169d07ac0e098

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

  • Aee047ae98df239fa8e7e2651f70a411

    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.

  • 6aa19e367ca83d20e9d9bd6753af401d

    Dubai Apartments For rent on Oct 18, 2009

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

  • 39ad9c01dcfaed6b287b31b05f39228b

    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.

  • F0f65b17600b101632b7385a7504c76e

    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

  • 0f5074bf37bb44e2e705f8af193f45c3

    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.

  • 8105b5e1939f449b0aeab349c3dfa060

    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

  • 214bc52f7bd407275e6f6ce47c88fcfa

    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.

  • 214bc52f7bd407275e6f6ce47c88fcfa

    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

  • 8c3a90d1ff386b9266ccd07ca04cba15

    Free games on Nov 05, 2009

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

  • B04f34f75dbea3f5e1faabea033f408d

    custom logo design on Nov 05, 2009

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

  • 915219dfdf98f9415d65189bbbc9a1f8

    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
    thanks

  • 45a391cf93910825b1b0351640f97ce9

    gold parties on Nov 13, 2009

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

  • 45a391cf93910825b1b0351640f97ce9

    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.

  • 0f5074bf37bb44e2e705f8af193f45c3

    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

  • 22094952058ac55162902fdbb6a333d7

    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!

  • Dc6eed3d89226b699bcf0663c936b5b8

    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 .

  • B1363b5bb26c1f6d084c7183354e3528

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

  • Fe136055f320f56bde5c1427d39b371b

    Houston intellectual property lawyer on Dec 03, 2009

    All the Anti Patterns are very informative. Thanks for sharing

  • C32378730a8317cd68bc4fe5c9d0bf2e

    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!

  • C32378730a8317cd68bc4fe5c9d0bf2e

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

  • 9f79c0d48cefd759c251c38afabbc9c6

    forex trading on Dec 29, 2009

    hi
    thank for really nice and great helpful information about interface patterns

  • Aee047ae98df239fa8e7e2651f70a411

    Dubai IT on Jan 06, 2010

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

  • 199264caba3094bac1f479ad12d0c24a

    Ecommerce Web Development on Jan 18, 2010

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

  • 23e61106afc954c37606f3973eb5449e

    招聘 on Jan 20, 2010

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

  • C32378730a8317cd68bc4fe5c9d0bf2e

    Blue Mountain Day tour on Feb 10, 2010

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

  • 2f5dadaddb0fd9e4cc4135c84e88257e

    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.

  • Fa301c89377e5a3c35646c6fd39a515b

    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!

  • 6fcf4f8906fb663f95fcec6f93cbcf53

    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.

  • 0e176db8e4bd60fc9cf9c80ec2b54038

    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.

  • D153f1638e12b8ab68a4be241e8e23d1

    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.

  • C6f4cfe1b4d9b31db77d5584762d128c

    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.

    Thanks
    Collin paul

  • Cb5845fbf76667a5efc84ea3524cdc5e

    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.

  • C2a1957f5d48fba27591c815ec4da85c

    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?

  • 503c74a4a8a7f507f9b45ee207fb3975

    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!

  • E14a77d11ed42e021c6df3f54a4d29bb

    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!

Post a comment

To avoid spam, no URLs are allowed.