Have you ever wondered why there are many clearly defined Design Patterns for good design, and Anti-Patterns for mistakes, but in the field of UX we have no recognised terminology for evil design? And why has the SEO industry always recognised the difference between black-hat and white-hat practices?

The answer is simple really. Google has a clearly defined set of guidelines, they do a great job of monitoring for black-hat SEO practices and they heavily penalise offenders. Black-hat SEO is kept in check because it’s highly risky.

Black-hat UX is different: it’s subtle, it’s not easily monitored by software algorithms, but worst of all, as a community we’ve never tried to tackle it head on. This needs to change.

About a month ago I wrote a short post on Dark Patterns (“Dirty tricks designers use to make you do stuff”), asking for input on a talk I’m preparing for the UX Brighton conference in September. The response was pretty impressive, with almost 100 comments and loads of conversation over on Hacker News.

So, I’ve taken everyone’s suggestions and put together darkpatterns.org: a black-hat design pattern library. It’s currently in beta (i.e. unfinished), and I’d love further input. I really want this to be a community project – please free to email in suggestions, add comments, or get in touch if you want to co-curate the site with me.

Let’s stop turning a blind eye to black-hat UX. Let’s name the offenders and shame them into giving it up. As a community, it’s well within our power to do this.

Normally we think of bad design as consisting of laziness, mistakes, or school-boy errors. We refer to these sorts of design patterns as Antipatterns. However, there’s another kind of bad design pattern, one that’s been crafted with great attention to detail, and a solid understanding of human psychology, to trick users into do things they wouldn’t otherwise have done. This is the dark side of design, and since these kind of design patterns don’t have a name, I’m proposing we start calling them Dark Patterns.

I’m preparing a short talk on this for the UX Brighton Conference in September, and I need a bit of help coming up with some examples. Here’s a taste of what I’m talking about:

• Low cost airlines that put insurance in your basket without you asking.
• Social networking sites purposefully make it hard for you to shrink your social graph or move your content into private realms. I’m looking at you, facebook.
• Email sending systems that require you to log-in (using a long forgotten password) in order to unsubscribe. (This is actually forbidden by the revised CAN-SPAM 2008 rules, but it’s widely ignored)
• Systems that ask for your email / twitter credentials on the grounds of finding you friends, but then send messages as if they are directly from you, without your express consent.
• Supermarkets (in the real world) that prevent you from comparing products on price, by putting items in different sized bundles.

Can you think of any good, contemporary examples to go with this list? Add your suggestions in the comments below. I will, of course, credit you in my slides.

To be clear, I’m not looking for outright scams (which are clumsy and easy to identify), I’m looking for techniques used by above-board products and services that trick users into doing things.

eBay has always been very careful about presenting the eBay platform and its resellers as different entities. Amazon, on the other hand, really doesn’t seem to have nailed it. If I have a bad purchasing experience on eBay, I blame the seller. When it happens on Amazon, I can’t help but loose trust in Amazon itself.

The video below sums it up for me. When you hit play, you’ll see me mousing-over the different product options for a perfume. You’ll see jargony acronyms (EDT / EDP), inexplicable price differences, different measurements (fl oz vs ml), unclear photos, and missing product descriptions. Bleugh.

It is, of course, down to the seller, but the seller’s name is only mentioned only in two places as body text – effectively hidden away. It feels like Amazon itself as at fault.

Can’t make out the video? View the page on Amazon.co.uk

So – what would you do if you were Amazon? Would you carefully design your UI to clearly differentiate your brand from the third party merchant brands? Would you simply bite the bullet and start policing them harder? Or would you try to crowd-source it, and give means for the community to report poor content?

File upload isn’t possible from Mobile Safari. My beef today isn’t with this fact – it’s with the UI design. To show the ‘choose file’ button greyed out like this is inherently confusing. To grey something out is to say that “in some circumstances, this control will be active”. On today’s iPhones, this button will never be active. Tapping the button does nothing to clarify this. Nowhere is an explanation given that “Actually, you can’t upload files from Mobile Safari. ”

I’ve got an idea of a solution in my head – but I’d love to know what you think. Suggestions in the comments please…

I’ll hit “buy album” to find out…

“Sign in to purchase music”. Well that sounds ominous – I don’t know what’s going to happen if I enter my password. I still don’t know how much the album will cost, and since I’ve entered my credit card details before, they probably have them on file. Will my card get instantly billed an undisclosed amount?

You can bet that the vast majority of users are going to err on the side of caution and click “cancel” at this point. I’d love to find out what kind of revenue uplift they’ll get when they fix this issue. It could be Spotify’s very own equivalent of the $300 million button.

Thanks to @delarge for pointing this out.

Image credit: Hold all my calls by Furryscaly

Back in the 1980s, if you didn’t get to the phone in time, you’d hear the caller starting to leave a message. No big deal, you could just pick up the phone and cut in. It was so straightforward and obvious, you didn’t even think of it as a feature.

Fast forward to present day, 30 years later. Somebody calls your mobile but you don’t manage to pick up in time. You try calling them back, but it goes straight to voicemail. Damn, that means they’re leaving you a message. No point in leaving them one. You hang up, leave it a couple of minutes and call them back. Provided they’re not still rambling on, you get through. So, they repeat everything they just said in the message. At some point later on, you notice you’ve got a voicemail alert. Huh, what’s this? Oh, it’s just the voicemail that my friend left earlier. Better delete that.

It’s about time the present day caught up with the 1980s!

If you run a site that uses email verification in its registration process, here’s a challenge for you: go and find out how many users successfully fill in the registration form but never complete the verification step. If it’s higher than a few percent, you should probably be worried. In fact, whatever the percentage is, you should be thinking hard about how you can bring it down – after all, any leakage is bad leakage.

This isn’t a ‘normal’ conversion rate calculation we’re talking about here. Conversion rates, as they are normally defined, involve comparing the number of users who perform an action against the number of unique visitors (i.e. people who happen to hit the first page). Amongst these unique visitors, a large proportion of them are likely to never actually have been likely to convert (they were lost, having a look, or doing something else), which means you naturally get a large number of drop-outs.

The difference in this scenario is that we can be sure that all of the users were dedicated to completing the task – after all, why else would they have bothered to complete the registration form? They’ve done the hard bit – surely all of them should have completed?

Failure to complete the email verification step is sometimes caused by deliverability issues. However, it’s also entirely possible that the problem lies in your call-to-action design. Here’s an example from KpiLibrary.com (a nice site that happens to have a slightly flawed registration process):

What the user needs at this point is a large, unmissable call-to-action such as “Check your email now“, with no other irrelevant content around it. However, on this page there’s a mixed message – it starts with a green tick icon and and the statement “Sign up successful!…” – but it then goes on to explain that they need to check their email. Users are very likely to skip past the text and start filling in the log-in form, which will inevitably return an error. This is something that Luke Wroblewski refers to as being like “muscle memory”. He goes on to explain (transcribed from a podcast):

“… Time and time again, [...] people try to preface a web form with help text or explanatory paragraphs [...] and every just about single person skips over all that and goes to the first thing that looks like an input field.”

I’ve certainly experienced exactly the same effect myself in many user research sessions in the past. Here’s another example of a weak email verification call-to-action, this time from Mailchimp (which will probably be fixed the time you read this – they are very dedicated to UI design):

Here I am poised to register my email address…

And here I am done. Except I’m not. The text in green – which looks like it’s a positive confirmation – is actually telling me that I must go and check my email.

Like many other usability issues, the problem is incredibly obvious once it’s been pointed out. As Steve Krug puts it:

“If your audience is going to act like you’re designing billboards, then design great billboards.”

Here’s how Linkedin does it. A nice example of a clutter free page, stripped down to the core message to ensure the point cannot be missed:

Linkedin also provides OAuth-based verification if your email provider supports it (e.g. gmail), which is probably something we’ll see a lot more of in the future.

Finally, one thing to remember is that email verification doesn’t always need to be a barrier to registration. Just because your competitors do it, doesn’t mean you have to copy them. Facebook, for example, don’t do it – they use a form of lazy registration so people can start using the site before they’re verified.

So, here I am registering on odeon.co.uk…

Oh look, I need to enter my email address twice. Never mind, I’ll simply copy and paste it…







Job done. No, wait, WTF? They’ve disabled paste!





I’ve been a bad user, I must to stand at the blackboard during lunch break and write out my email address over and over again until I promise never to use shortcuts ever again!

Seriously though, typos in email addresses when registering is a real problem (more than typos in passwords, as Jeremy Keith points out – since if your email address is correct you can always reset your password, but not the other way round). However, this problem hasn’t really been solved properly yet – we don’t have a standard design pattern that we can just copy as needed.

UserGlue’s proposal looks promising, but it’s more of a prototype than a finished solution. Have you’ve seen any other attempts to solve this problem in the wild? Have UserGlue hit the nail on the head? I’d love to hear your comments…

Spurred on by his immense success in the computing industry with the ZX80, ZX81 and ZX spectrum, Clive Sinclair set his mind to electric vehicles. He drew up the Sinclair C5. Everything looked perfect on paper. The C5 was electric and complemented by pedal power, making it a low pollution vehicle, narrow enough to drive between cars in heavy traffic, like a bicycle.

To cut a long story short, Clive Sinclair woefully overestimated his ability to transfer his successes from the familiar computing industry to the completely unfamiliar electric vehicle industry. His assumptions about market needs were way out, and the practicalities of using a C5 in real life were far removed from the intended experience on the drawing board.

Being low on the road, C5s were hard to see from cars and were dangerous, exposing the rider to unpleasant exhaust fumes. In the UK, rain and wind made them horrible to use in the long winters (not to mention dorky looking!). The C5 had no gears and the seat was not adjustable, making it uncomfortable to use if you were particularly tall or short. The motor turned out to be under-specced, making it too weak to power the rider up many hills without pedal assistance. And instead of a steering wheel or handlebars, steering was controlled by small handles on either side of the driver’s waist, making first time usage awkward and ungainly.

The lesson here is that if Sinclair had conducted field trials prior to launch, most of these problems could probably have been overcome. At the very least, he could have discovered the product was going to be a flop at an early stage, and avoiding the need to haemorrhage vast sums of cash. In 1983, Clive Sinclair raised £12 million to finance Sinclair Vehicles. By 1985, they went into receivership, having only sold 12,000 C5s.

Hold this story close to your heart. Whenever you find yourself getting carried away with an idea in an unfamiliar domain, always ask yourself “Am I doing a C5 here?” After all, it’s easy to find out. A bit of contextual field research will set you straight.

Want to know more? Read the first two chapters of The Sinclair Story by Rodney Doyle (1985).

This post is all about the importance setting accurate expectations. One of my friends, Ofer Deshe, often uses this clip when running UX training workshops. What a great way of summing it up!

If you lead your consumers to expect one thing but then give them a poorer substitute, they will be disappointed – angry even (but hopefully not machine-gun angry like Michael Douglas in Falling Down). Honesty is the best option. If your credit card application process takes 15 minutes to complete, then just tell them. Don’t say it takes 5. Lets look at a real world example. Geni.com is often cited as providing a great sign-up experience, but the example below example shows it in a different light.

Above you can see a screengrab from a recent geni.com email campaign. “Discover new relatives with Geni hot matches” – sounds pretty cool. Let’s see what happens when you click through.

After you’ve taken the trouble to log-in, you end up on this page. This is pretty tantalising – it’s possible that within a few seconds you’ll see entire new branches of your family tree, perhaps even new lines of ancestry. You’d be foolish not proceed by clicking on one of the “similar profile” links.

What’s this? Most of the information here seems redundant – but hang on, it’s mentioning words like “Pro”, “Special Offer” and “Try for free”. That doesn’t sound good. Let’s see what happens when we click “Try Geni Pro”

A collective scream of frustration “Argh! A credit card form! And it wants almost $100!”. Users are likely to feel manipulated and annoyed. The key point here is that users would have reacted differently if they were presented this information upfront – the problem lies in the order of presentation. With the right sales pitch, it could have come across as a great deal.

Above is a screengrab from theacropolismuseum.gr, the site for the new Acropolis museum in Athens. It opened this year, and it’s turned out to be a very popular tourist attraction. With that in mind, it makes sense to book your tickets in advance. It’s not too hard to find this page (Hours & Ticketing), but the next step is to enter the ticket booking process. So, how do you do that? It’s almost like they’ve hidden the “Buy Tickets” call-to-action on purpose, as a nondescript link right at the bottom of the page. This is the online equivalent of designing a supermarket with the tills hidden in the stockroom – hardly the definition of good business sense.

Having clicked ‘Buy Tickets’, the user ends up here (above), which seems to be the first page of the booking process. The only thing we can see here is a text field. Where’s the rest of the stuff? Where’s the ‘next’ button? Where’s the steps-left indicator? It almost looks broken – as if the page hasn’t loaded properly. In fact, to proceed to the next step the user needs to enter a number into the text field, and then the next chunk of the form will suddenly be revealed. You can almost picture the user muttering to themselves – “Why on earth does this site have to work differently to the rest of the web?”

Having entered the number of tickets, this calendar widget appears (above). Today’s date is currently selected. What are you expected to do now? Once again, there is no clear call-to-action. In fact, you have to click any date in the future and it will reveal which times are available.

Phew! If the user’s got this far, they are probably getting the hang of this unconventional UI. They need to click on their desired timeslot to proceed, then they need to fill in their address, payment details and finally they reach a confirmation page, shown below.

Here’s the confirmation page. The user will expect this to be emailed to them – that’s normal practice, right? Not on this site. If they don’t save or print this page, they are going to have real trouble getting into the museum. This key instruction is written half-way down the page, but once again the designers have made the same mistake of providing a weak, easily missable call-to-action.

To sum up, I’m hoping that this example has given you a reminder about the crucial importance of strong calls-to-action. It’s obvious stuff really, but we all make schoolboy errors from time to time.

Swap out Yu Wan Mei mandated “Fish Time” with Windows 7 and you’ve pretty much captured the spirit of Microsoft’s marketing strategy. Check out the screen grabs from their screener survey below. It’s nuts!

Gee, I wonder which of these boxes I’m meant to tick in order to get my free copy of Windows 7?

Question 6: would you like to receive junk mail? Er, what are my options?

This is by far the best bit – check out what they want to do to your children. To quote from the second paragraph: “I, on behalf of myself and my children [...] hereby grant [...] an unrestricted, absolute, universal, perpetual, irrevocable, non-royalty bearing, and transferable right and license [...] to use, copy, transmit, distribute, display, modify, perform, present, publish, transform, create works and derivative works, and otherwise promote or utilize my name, image, likeness, voice, words and [...] personal information, and those of my children [...] captured, photographed or otherwise recorded or memorialized in any manner [...] (including, without limitation, print, direct mail, online, mobile or wireless communications, radio or television broadcast, telecast or photograph), for any purpose whatsoever (including, without limitation [...] advertising [...]), and without any consideration or notice to or consent by me or any third party.”

So, how badly do you want a free copy of Windows 7? Badly enough to give Microsoft complete, unrestricted rights to photos and videos of your children so they can use them in their advertising without even notifying you? Seriously?

I cannot imagine why they thought it was a good idea to hide this critical information in the small print. Whatever happened to good, old fashioned up-front honesty?

Benefits include:

• Simple syntax.
• Works with every layout and browser.
• Usability tests show extraordinary levels of acceptance.
• Supports events to extend its functionality

→ Read more and try the demo here.

Mwahahaha! Seriously though, there is a serious message in here about why error messages are often neglected, i.e. developer convenience. Thanks to Bruce Boughton for the link!

“Roaches check in, but they don’t check out”, as the saying goes. While this might be a passable way of getting rid of cockroaches, it’s a terrible way to treat your website visitors, yet it’s very common to see this pattern in email service subscription UIs.

Lets look at the steps required to sign up to an email service on a typical site:

1. User clicks on the ‘subscribe’ link
2. They then register, entering their email address
3. Then enter a new password
4. Then enter it a second time in the ‘repeat password’ field
5. And finally, they submit the form and subscribe to the service

So, that’s 5 or so steps, and each of those are pretty low effort. While it is annoying to be forced to create an account, there’s no serious brainstrain going on yet. Now, lets imagine a couple of weeks have passed and the user is getting fed up with the emails they are receiving. What steps are involved in unsubscribing from the same service?

1. User clicks on the ‘unsubscribe’ link
2. They then have to log-in. They enter their email address
3. Then they hesitate at the password field, wondering “Which of my passwords was it?”
4. So, they try at a password, and hit submit
5. Error feedback comes back showing that they got the password wrong
6. They click on the forgotten password link
7. The form asks them to enter their email address again
8. They fill in the form, and hit submit
9. They switch to their email account, and wait a minute or two for the email to arrive
10. Some users at this point also have to check their junk mail folder, while others will be sidetracked by important new emails in their inbox
11. Finally, the email arrives, they open it and click on the “reset password” link
12. They choose a new password, repeat it and submit the form
13. And finally, they are able to unsubscribe from the email service

On the unsubscribe journey, we’ve got 13 or so time-consuming steps, and some of them are deeply frustrating. When you look at it like this, it’s obvious that it’s a catastrophically awful user experience.

What’s a user to do?

To avoid jumping through all those hoops, the Report Spam button must feel pretty alluring. And if users start clicking it en mass, you’re in big trouble. Google doesn’t discourage this, to quote from the Official Gmail blog: “…if you didn’t ask for it and you don’t want it, it’s spam to you, and it should be reported. We’ll sort it out on our side.”

When a customer wants to leave, it’s crucial that you allow them to do so in a pleasant way. When frustrated customers leave, they don’t come back.

It’s been argued that the problems stemmed from a lack of budget for usabity testing. This is nonsense – ‘expensive’ usability testing isn’t needed to uncover this problem. A simple QA process would have shown immediately that the device isn’t fit for purpose.

I can’t understand why didn’t they just use hard buttons rather than touchscreens. It would have been cheaper and would have avoided the need for calibration entirely… The mind boggles.

It’s funny how the honest business objective of keeping in touch with your customers can get so twisted and contorted that it ultimately becomes this.

It runs full circle from “We want our customers to become loyal friends” to “Customers are just conversion statistics, and we will pull any trick in the book boost the numbers.”.

A big fat race to the bottom.

So is the new version better? In a nutshell, it’s tidier but not much better.

Back in January, Stephen Turbek wrote an interesting article on Advanced Search interfaces. Among other things, he pointed out that after a search is performed on Google, the “advancedness” is lost. You get taken back to the standard search results page, with a few boolean operators thrown into the search box.

There’s a certain degree of arrogance in this behaviour – the user says, very explicitly “I want you to help me to do an advanced search”. Google replies “Hmm, sure, but what you really to do is learn how to use boolean operators like a pro. That way you can use our standard search page instead, see?”

In fact the entire advanced search page is designed to teach you how to manually construct boolean searches rather than to help you do an advanced search. Take a look at the contextual help tips, for example. If you click a “tip” link it tells you how to construct a standard search with boolean operators. So, you ask for help on one thing, and it tells you help on another.

To use an analogy, if a kid asked you for help riding a bike, you’d give them stabilizers. You wouldn’t start telling them about clutch control on a motorbike straight away. So why isn’t Google giving novice searchers any love, compared to Yahoo and their rather nice AJAX search assist tool?

An impressively awful dialog design from Dell. Bad on so many levels.

Actually, if you dig into the Ts & Cs, the limit is 1GB a month. This is a big difference from unlimited, but not unreasonable since it’s an ok price. Why not just be honest and say it?

Actually, you have 5000 minutes of skype-to-skype calls. This isn’t bad, but they don’t make it clear that they mean skype calls only (no skype out, i.e. no calls to real phones included).

Actually, you have a hard limit of 10,000 messages a month. This is plenty, but by this point, you are likely to feel very suspicious of the asterisk. What’s silly here is that the X-Series package is a pretty nice deal by UK standards. There’s no need for all this cloak and dagger stuff. Good, honest simplicity would get them a lot further.

Since you are a nice leader and you care for your people, you want to start increasing your yearly spend on education (as well as healthcare and housing). Last month some Westerners in shiny suits came to visit and tried to talk you into buying OLPCs. Everyone else in your position seems to be buying them.

It seems like a good idea, but on the other hand, you can’t really afford them. Buying them would involve cutting back on other things. It’s a substantial decision. You firmly believe that computers and internet are the future, but are they the right thing for you to buy right now, with what little money you have?

And you suspect that the men in shiny suits don’t really know how things will pan out for the children of your country. You’re worried the OLPC might be a white elephant. It almost feels like a big experiment carried out by the west, but funded by you.

What do you do?

1. Blow your cash on a lot of OLPCs. Trust that teacher training and infrastructure will emerge organically, as a result of being ‘connected’.
2. Don’t buy any OLPCs yet. Instead spend the money on old-fashioned, unsexy stuff like teacher training, books, school buildings and blackboards. Then, watch what happens in other countries like yours that have adopted the OLPC. Perhaps in the mean time some alternatives will appear on the market.
3. or… something else? Your suggestions please!