The dark side of UX

Take a look at the most common Dark Patterns and learn how to recognise them.

By Emma Flynn and Maria Elena Calisi

What are Dark Patterns?

Using the psychology of human-centred design when designing services and experiences to understand a user’s behaviour and how they carry out tasks, is a great way to help create a successful and transparent user experience. However what would happen if we took all this knowledge and used it against the user?

This is exactly what Dark Patterns are; turning the principles of good UX and UI on its head. Originally coined in 2010 by Harry Brignall, a UX specialist, the term Dark Pattern is described as “a user interface which is carefully and intentionally crafted to trick the users into doing things they might not otherwise do” (Brignall, 2013)1. Often used to benefit the business at the expense of the user’s experience.

Often considered unethical or even evil as described by Chris Nodder, in his book Evil by Design.2 Which raises the question, why are they so common?

Why use Dark Patterns?

With so much fighting for the user’s attention on the internet, businesses are finding themselves under growing pressure to meet their targets and objectives. Unsurprisingly they turn to these Dark Patterns to help them. Despite being condemned they do unfortunately work. Using dark UX tactics help them to encourage the user toward or away from things in order to make more sales, grow their mailing list or collect more data than necessary.

What do they look like?

Here are six common types of Dark Patterns and some more user friendly ways to design for the user instead. Sometimes, the best way to defend yourself against something is to be able to identify them.

  1. Bait and Switch

This is when a user sets out to complete one thing or task but something undesirable and different happens to what they were expecting instead.

Example
While Microsoft were rolling out their upgrade to Windows 10, they changed the meaning of the “X” button in one of their pop up windows. When the user clicked the ‘X’ button the upgrade began automatically instead of closing the pop-up window as expected. The button’s meaning changed from ‘close’ to ‘yes I want to upgrade’. Those who didn’t want to upgrade were also encouraged to click ‘X’, as the ‘OK’ and ‘Upgrade now’ call to action would have resulted in beginning the download.

screenshot of windows 10 pop up window

Image 1 – Microsoft’s deceptive pop up message for upgrading to Windows 10.

UX friendly Advice
Users don’t like being deceived or tricked into something they don’t want to do. Always make sure that you stick to recognised web conventions in order to avoid any confusion e.g clicking on the ‘X’ closes the window. Also clearly labelling call to actions and using terminology on the labels/buttons the user will understand and recognise where they are going or what to expect after clicking.

    1. Confirmshaming

This is when the user is guilt tripped or shamed into opting into something by the way the decline option is worded. This dark pattern is most commonly utilised to make a user sign up to or subscribe to a mailing list. It is also used in wording found in other popups or exit modals.

Example

image of a pop up box which demonstrated confirm-shaming. Telling the user they are a bad person if they were to decline the message.

Image 2 – example of using words to shame the user into accepting.

For more examples visit http://confirmshaming.tumblr.com/.

UX friendly Advice
Avoid making the user feel bad for not signing up for your newsletter. It’s not particularly ethical and users often don’t appreciate it. When it comes to wording the decline option of the exit modal try using words which are emotionally neutral rather than negative. Whenever you speak to the user, respect them as they are less likely to return to a site which is rude or guilt trips them.

  1. Forced continuity

When a free trial you signed up for has come to an end you are automatically renewed without being notified or warned. Your card begins to get charged and the service offers no easy way to cancel the auto renewal. Sometimes a pop up window appears offering a discount or reward, however in the small print there is a condition explaining how you must sign up first in order to receive the discount. This is the pattern known as forced continuity.

Example
After buying a ticket from Trainline you were directed to the confirmation page, as seen in the image below. A user is likely to click the blue ‘Continue’ Trainline styled button, thinking it will end the process, but it doesn’t. Instead it directs the user to a completely different site, where it tries to convince the user to sign up to receive a £20 money off voucher. By signing up the user is enrolled to a £15 per month charge (a form of bait and switch). Since GDPR has come into effect, Trainline confirmation page has since been updated.

A screen grab of Trainline's confirmation page

Image 3 – Example of Trainline’s confirmation page

UX friendly Advice
A bad experience can impact how the user interacts with your service. To help alleviate any fear or suspicion of being tricked into membership or subscription fees ensure that any buttons are styled clearly. Always offer users a way out or backdoor in any process they find themselves in, as well as making it easier to leave or cancel. Users really appreciate convenient exit routes and sometimes by being so clear and transparent they may even end up staying.

  1. Misdirection

The name speaks for itself. The purpose of this dark pattern is to make the user focus on one thing while something else is happening. The general idea is that the user would follow the biggest buttons with the brighter colours. These buttons catch the user eyes misleading them and making them do something else.

Example
In this example the user doesn’t know where to click. Which button is going to perform the action the user needs? Probably none of them and these buttons will lead the user into some dark web page and confuse the user even more.

image of two buttons which have the misdirection pattern applied

Image 4 – An example of using colours to misdirect the user

UX friendly Advice
It is easy to transform misdirection into a useful service. With clear wording and design using the colours ethically and allowing your users to answer in the right way and to the right questions. Instead of tricking them, it is key to help them through the process of what they are doing with clear buttons and defined colours to distinguish the different actions.

  1. Roach motel

You know how to get in but you don’t know how to leave. The most common example of this type of dark UX pattern is the subscription that takes one click to subscribe to but unsubscribing is almost impossible. It’s likely that the users have to go through multiple web pages asking them if they were sure they wanted to leave.

Example
Here is a classic scenario of a user looking for the unsubscribe link. In the first part of the image you can see how the user is fooled by the colours of the page, in fact the colour of the link to unsubscribe and the background of the newsletter are the same. If you know a bit about Dark Patterns then your reaction would be to highlight that bit and find the link to unsubscribe. Please avoid that, it takes more effort to find the matching colours between the two than using a white background and leave the link colour as it is.

A screengrab of an unsubscribe page, where the actual unsubscribe button has been made invisible.

Image 5 – How do I unsubscribe?

 

A screengrab of an unsubscribe page, where the actual unsubscribe button has been made invisible.

Image 6 – Oh of course, via this invisible link!

UX friendly Advice
It would be better to let the user unsubscribe from your services in the easiest way possible to avoid a painful leaving journey. Make it simple and immediate by clarifying all the action with simple text and links or buttons at the right place and time.

  1. Trick question

The trick question is linked with the Misdirection. Most of the time it includes confusing language and tick boxes to fool the user and make them do the opposite of what they really want.

Example
In a regular scenario, ticking a box means an affirmative action, and is a key element of GDPR compliance. However if you read carefully you’ll find out that ticking the boxes means the opposite. If you don’t tick them you’ll receive the communications. Royal Mail took a conventional action and turned it against the users making them do the exact opposite of what is culturally known as a positive decision.

Screengrab of royal mail's communication T and Cs to opt in and out

Image 7 – Going against user convention and asking users to tick to opt out, rather than in.

UX friendly Advice
The trick question is linked with the Misdirection. Most of the time it includes confusing language and tick boxes to fool the user and make them do the opposite of what they really want.

Why Dark Patterns should be avoided

Dark Patterns work to fool people. They take advantage of people scanning through web pages instead of reading the text. Though these patterns could initially bring in more money and customers, in the long run the business will end up in losing customers and ruin their own reputation. Moreover, a company may not realise that the use of Dark Patterns could incur greater costs. In fact, it could increase the number of returns or complaints to customer services.

Another good reason to avoid Dark Patterns is the public attention you could get. Nowadays if your customers want to complain about the experience you are offering them they can simply write a review or share their experience – good or bad – all over social networks and the really bad ones would immediately get the press attention.

With the use of dark UX patterns, users may feel betrayed as well as angry at themselves and they would lose trust in those brands that trick them and in the power of good UX. As a Jedi said once “I’ll never turn to the dark side”.

References

  1. Brignull, H. (2013). Dark Patterns: inside the interfaces designed to trick you. [online] The Verge. Available at: https://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you [Accessed 17 Sep. 2018].
  2. Nodder, C. (2013). Evil by Design. Indianapolis: John Wiley & Sons.

Image sources

  1. http://rhpsolutions.co.uk/windows-10-upgrade-deception/
  2. http://confirmshaming.tumblr.com/
  3. https://darkpatterns.org/types-of-dark-pattern/forced-continuity
  4. https://1stwebdesigner.com/dark-patterns-good-bad-ugly
  5. http://spottheunsubscribe.tumblr.com/post/140046281916/invisible-unsubscribe-by-wwwmyopportunitycom
  6. http://spottheunsubscribe.tumblr.com/post/140046281916/invisible-unsubscribe-by-wwwmyopportunitycom
  7. https://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you

Recent articles

Uncategorized
29. November 2018

Protected: Top tips for tapping into successful opportunities

There is no excerpt because this is a protected post.
Read More
zoomed in lightblub, with yellow lights in background
featureUncategorized
28. November 2018

Three steps to smart innovation

This is article 3 of 4 on how to create successful Customer Journey Mapping projects.
Read More

Be Inspired

Subscribe to our Newtletter for a monthly round up of news and views on Service Design. Plus get our exclusive white paper on Customer Value Models for Retail.

Got a project in mind?

Get in touch and tell us what you’re thinking.

Drop us a line

020 3515 1030
info@newtidea.com

Visit us

4 Wellesley Terrace
London N1 7NA