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?
42 comments
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
thanks
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
hi
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.
Thanks
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