Little White UX

Using dark patterns for good (or not-so-bad)

Good UX helps and empowers the user, but what if we want to help them by directing them where we think they want (or where we want them) to go? Something as innocuous as making one button more prominent than another — is it guidance or manipulation?

I’ve been thinking about this one for a while, after seeing dark patterns used for good and frustratingly bad. A dark pattern can be defined as “any interaction that benefits a company at the direct expense of the user experience”. Good UX is beneficial for the user, Dark UX is good for the company and advertisers (and most of the time detrimental to the user experience). “Little White UX” is somewhere in-between (I’ve made this term up by the way). It’s not full-blown deception, more akin to little tricks to direct the user where you want them to go (that benefits both user and company), or sleight-of-hand to make you think something’s happening when it’s not (implemented to better the user experience — I’ll give an example later). Are little white UX lies acceptable for the greater good?

The Dark Side

For those oblivious to the machiavellian tactics implanted in our daily browsing, let’s start with some examples of dark patterns. A typical dark pattern is a user interface carefully crafted to trick users into doing things they might not otherwise do, such as buying insurance with their purchase or signing up for recurring bills. Normally when you think of “bad design”, you think of the creator as being sloppy or lazy — but without ill intent. Dark patterns, on the other hand, are not mistakes. They're carefully crafted with a solid understanding of human psychology, and they do not have the user’s interests in mind.

One of the most well known dark patterns is the hidden or obscured email unsubscribe link. Could it be a mistake that the link is a light grey colour on a light grey background? I saw an example this week where the unsubscribe link was embedded within an image, so was completely hidden until I download the images within the email. Even worse is when there is an “email preferences” link so that you have to go to their site, and then half the time they ask you to sign in and you don’t even remember signing up to the website in the first place!

A slightly more tricksy pattern is making one button choice more prominent than another — the “manipulink”. This is where the company use a tactic often referred to as “confirm shaming” — making users feel bad for opting out of an offer. Should I click “Show me the deals” or “No thanks, I don’t like deals”. But I do like deals, now I’m confused. Maybe I should just have a look at the deals to see what’s on offer. And they have you. Manipulinks are negative for the user experience — they employ patterns that are deliberately designed to have an adverse emotional impact.

A large US retailers use of a manipulink

Clickbait links are a pretty obvious pattern to get you reading something filled with ads, that probably isn’t as exciting as it sounds. But you won’t believe what I’ve heard about those ads after the clickbait jump! (love a good clickbait article on the morning bus journey). Do you ever notice how the ads and/or content loads and jumps after the page has apparently loaded, and when you go to click on a “next” button it has moved and you accidentally click on an ad? Was that really an accident…?

An invitation to treat, clickbait in action

An example of dark UX that I saw recently was the logged-in state of a popular mind mapping tool (it is no longer like this). Instead of being re-directed to my dashboard I was presented with what looked like a pay wall, showing me the various levels of membership I could sign-up for. I’d been using the software with a free membership for a while so initially I assumed a trial period had come to an end. I like the product and had some projects on the go so almost clicked to sign-up to a paid membership. But as I scrolled down, the page revealed a much less prominent, smaller grey and white box stating that I could “stay basic”. Cheeky bastards.

You can see some more examples in the Dark Pattern Hall of Shame here: https://darkpatterns.org/hall-of-shame

The Copperfield Effect

David Copperfield is a master illusionist. Magicians delight us with their trickery — Copperfield made the Statue of Liberty disappear! Pickpockets also use misdirection and sleight-of-hand but to a more malignant end. This is the difference between dark and little white UX — intent.

There was once a dev team that built a search listing tool that worked really quickly, and obviously the client was very happy. When the tool was launched the company had a lot of feedback from users who thought the tool was broken as it generated results almost instantaneously. So, like Derren Brown using the power of suggestion, the team added a 1-2 second loading animation so that the user believed it had worked properly. Like the example I gave above about the jumping ads, this is page-load-deception. It’s a trick, it’s deception, but it’s the intent that lightens the dark pattern.

Another famous (fictional) magic wielder is the Wizard of Oz. I once attended a workshop where the speaker talked about a lean UX method called “the yellow brick road”. I wish I could remember exactly what it was about but it’s a great name so I’ll adapt. In this case I’m using the term to describe the process of leading the user down a an illusionary path. For example, as a company you want to launch a new automated service, but you’re not sure how large the uptake will be. So instead of spending buckets of time and money on designing and building the feature, you have the service requests sent to someone’s email who then replies manually, in the guise of automation. The user still gets the experience and service they expect, and the company gets insight into demand for a feature without wasting money. It’s a win-win situation, even if there was some little white UX involved.

In a similar vein to the above, there is another tactic called the “button to nowhere”. Before you even get to the “yellow brick road” stage you may want to know if a feature you have in mind would be desirable to your users. You create a call-to-action panel on your page with a brief description and something like a “visit shop” button. When the user clicks they are taken to a page with some friendly language to say “we haven’t built this feature but are keen to know if it would be of interest to you. Sign up here to be notified of future announcements...”. This pattern is slightly darker as the user is bound to feel some disappointment. On the plus side, by registering their interest they could help to generate enough feedback so the feature they want actually gets built.

A pattern you may be familiar with are those added extras in your online shopping basket when you go to checkout. For example, insurance being automatically added to your flight when you didn’t ask for it, or being provided with a seating plan for the plane to select your seat, for a charge, without being told that you can simply not choose a seat for free. A lighter version of this ploy is “people who bought this also bought this” or “these items go well with the shirt you have put in your basket”. It’s sneaky and tempting, but they may actually surface and suggest things you want to buy.

Suggestive design patterns as seen on asos.com

Be like Harry

I’ve used a lot of metaphors for UX and magic in this article, so it’s fitting to end on one. Imagine if there was a secret school for UX that you could attend from a young age… its parallel would be Hogwarts. Dumbledore (a headmaster at Hogwarts) had a varied curriculum in place but always promoted the use of magic for good. Over his prestigious teaching career he had two notable students: Tom Riddle and Harry Potter. It’s a long story with numerous books, films and merchandise. You probably know it, but if not, the short of the long (spoiler alert) is that Tom used his magic skills to do evil. Sometimes Harry had to use deception and dark spells in his quest for good, but his intention was always for the better of the people. The thing about dark patterns is that you design them from the exact same rulebooks that we use to enhance usability. They are successful precisely because they’re founded on good interaction design patterns. The best way to learn from them is to start with a dark pattern…and remove its darkness.