Yesterday I had the pleasure of attending Michael Boeke's insightful design talk, "UX Antipatterns." Michael is a product manager at Braintree.

The talk was hosted at Groupon, and when I arrived in the lobby the gentleman at the sign-in table gave me directions.

Take the elevator to the fourth floor, and then go towards the cat in the spaceship.

At first I thought I had misheard him, but lo and behold there was an actual giant cat in a spaceship on the fourth floor:

An antipattern, Michael told us, is a design pattern that appears beneficial at first glance, but creates unintended consequences. Also, it must be markedly inferior to an alternate design pattern used elsewhere.

Michael shared with us 9 antipatterns that he has come across, and illustrated the proper ways to address those problems.

Antipattern #1: "Click Here"

This antipattern is as old as the internet, although thankfully it's becoming pretty rare these days.

Here is an example from the Illinois General Assembly website:

Instead of writing "Click here to register" they could simply write "Register here." That way, the user can clearly see what the link does by reading the anchor text.

Antipattern #2: Double Jump"

You can see an example of the Double Jump on the People's Gas signup page. The page requests a 13-digit account number, which is broken up into four different blocks. If you're filling out the form very quickly, you might out of habit hit tab after you are done with each field. But because the form automatically jumps you to the next field, you will end up doing a "double jump" and end up skipping a field.

Instead, simply show a single number field and then do any necessary parsing on the backend, such as stripping hyphens and parentheses.

Here is an example of the right way to do it from Uber's signup page:

Antipattern #3: Blind Carousel

If you take a look at the NewEgg site, you can see that they have a 6-item carousel, but there is no way to know what is shown on the 5 banners you can't see without clicking on them. As a result, there is very little user engagement with any of the banners except for the first one.

Amazon's solution to the "blind carousel" problem was to show small previews of upcoming carousels:

Antipattern #4: Sharing Warts

If you read an article on Huffington Post, you will find a huge number of social sharing buttons. Right now, I see the following: Facebook Like, Facebook Share, Tweet, Google+ Share, Email, Comment, Reddit, Stumbleupon, Tumblr, and another Google+ button.

While social sharing of content is very important for any content-based website, there are a number of problems with the Huffington Post implementation:

1. The buttons make multiple requests to external websites, which increases page-load times and reduces conversions
2. They take up prime real estate, which is not only unfriendly to the user, but it may impact Google rankings
3. Many of the share counts are zero, which makes the article seem unpopular (having the opposite of its intended effect)

Instead of the "sharing warts," Michael recommends having a single, unobtrusive share button that then opens up a new dialog where the user can choose which networks to share with.

I think this is an interesting idea, but I'd definitely recommend that each site A/B test both setups to see which way has better conversions and social shares. I could see this potentially varying from one site to the next.

Antipattern #5: Robotic Repeat

Don't make the user enter the same information more than once. For example, if you're already asking the user for his birthday, don't ask for his age too—just calculate it on the backend.

Antipattern #6: Mixed Business

Michael warned the audience against "overloading" buttons with both a noun and a verb. For example, let's say you have a list of users, and then you have a button to enable or disable each user's account. You want the button to convey both the user's current status and also what happens if you click the button (it changes the user's status).

For example, do you think a user who has this button next to his name is enabled or disabled currently? In this case, the user is enabled, and the button disables the user. Quite confusing!

Instead, Michael suggested, use an iOS-type slider to clearly communicate both the current status and also what the action is. Everybody is familiar with the slider and knows what it means and how it works.

Antipattern #7: Door Slam

This might be the antipattern that I personally hate the most. The "door slam" is a mobile design flaw, and it occurs when you try to follow a link or otherwise visit a site, but all you get is a huge full-page request to download the site's mobile app.

Instead, the consensus is that best practice is to give the user the content that she requested immediately. It's OK to display a small banner at the top advertising the mobile app. Here is an example of Yahoo doing it right:

Antipattern #8: Tease

The Google Maps team fixed this issue in a subsequent release, but at first clicking on the red target pin didn't pull up the directions. Instead, the Google Maps developers expected users to swipe up from the bottom to get directions—quite a counter-intuitive and unusual action.

I think that, in general, if you need to train users how to use your interface with a bunch of tooltips or bounces, there's probably something wrong with the interface.

Antipattern #9: Thumb Stretcher

When mobile designers put the "hamburger icon" (the 3-line icon that opens the menu navigation) in the top left-hand corner, it's quite difficult for a right-handed phone user to reach.

Here is an example from the Yahoo weather app:

Instead, Michael suggested putting the hamburger icon in the top right-hand corner:

You can see Michael's slides here.