I thought I would select some examples of dark patterns found in ecommerce checkouts to highlight the issue. Most of the examples are taken from the #darkpatterns hashtag on Twitter.
Where the website design nudges users towards a more expensive option and distracts them from the standard option.
Misdirection is the sneakiest type of dark pattern because it exists in a grey area. This sort of tactic is commonplace because it is harder to outlaw, as opposed to the ‘sneak into basket’ tactic (discussed further down the article), which is outlawed in the EU.
The example from Delta, shown below, uses a red button to nudge checking-in users towards an upgrade. A must less conspicuous grey button must be selected to say ‘no thanks’ and continue checking in.
— Ed Campodonico, ???? (@uxed) March 29, 2017
Econsultancy blogger Paul Randall has previously highlighted an even sneakier example of misdirection from ZSL London Zoo.
In the screenshot below you can see how the ‘add to basket with donation’ green button appears to suggest moving forward to the next stage of the checkout. The colourless ‘without donation’ button points backward, leaving the unobservant user to assume this is some sort of back arrow to return to a previous page.
Misdirection is probably most commonly found on email unsubscribe interfaces. When a user has clicked to unsubscribe, it is obviously devious to highlight the ‘keep my subscription‘ option over the actual intention of the user (to unsubscribe).
— Aaron Benjamin (@aBenjamin765) February 11, 2017
Obfuscatory checkboxes are probably the most famous and most common examples of dark patterns. What we’re mainly talking about is opt-in or opt-out checkboxes and accompanying spiel that businesses use to give customers notional control over how their contact data is used.
Whilst in the US the CAN-SPAM Act does not restrict how businesses can collect new subscribers (i.e. they do not need to gain prior consent), in the EU consumers must be offered an opt-out option.
In practice though, these mandatory opt-out options can be a little confusing, or even downright sly. Below is a heinous mobile example provided by Ben Tollady and Gareth Roberts at UX New Zealand.
Of course, another common dark pattern amongst checkboxes is double negatives – language that makes the user unsure whether to tick or to untick. Here’s a great example…
— Omicron (@Omicron_o) March 31, 2017
Or in the example below, a seeming call-to-action next to the checkbox (‘keeping in touch’) which is at odds with the functionality of the checkbox (‘keeping in touch’ is merely a heading). Not cool…
— Joelle Bataille (@Joelle_Bataille) March 21, 2017
Lastly, here’s a more subtle example of a dark pattern – what appears to be a radio is in fact a checkbox. One might argue this is a genuine mistake – it’s certainly one to look out for on your own website.
— Benji Weber (@benjiweber) October 20, 2016
It’s pretty simple, if you’ve decided to give the user the option (as is necessary in Europe), you should provide an opt in (not an opt out) with clear supporting text.
Sneak into basket
This is another classic. It is usually performed by offering a supplementary service or product to a user, who is made to actively unselect this extra product otherwise it will appear in the checkout.
The worst transgressors here are in the travel sector. Ryanair still forces customers to deselect an insurance product when adding a flight to basket, despite the fact that this tactic is illegal according to the EU’s consumer rights laws.
Image via Digital Tonic’s Ryanair website review.
Sports Direct is another high profile abuser of this dark pattern. In the past a ‘free’ mug and Sports Direct magazine (£1 delivery charge) have been added to customer baskets online, without any notification.
Though the retailer has now added a pop-up offering the ‘free’ mug to users, note how inconspicuous the ‘no thanks’ text is compared to the large white ‘yes please’ button.
Wow @sportsdirect, a free gift!
But what's this extra £1 delivery charge, ON TOP of the £4.99 standard delivery charge?
— Dark Patterns (@darkpatterns) January 13, 2017
Yet another travel example here. British Airways does not tell bookers what price they will have to pay to add a bag to the hold after they have booked their ticket, merely stating ‘for a fee’. Nor does it tell the price of seat selection or booking amendments.
The obvious intention here is not to undermine the price of the £31 upgrade from ‘basic’ to ‘plus’.
— James Russell (@kazaroth) March 6, 2017
It’s not just obscured pricing that can be a problem. Darkpatterns.org highlights how Sainsbury’s website does not allow comparison of all of its groceries, instead displaying some prices per weight and some per unit. This makes it hard for users to understand which product is cheapest.
Misinformation / terrible language
I can’t work out if this example is intentional or not. I hope not. But again it highlights the need to look at all your functional ecommerce copy and determine if it is as clear as it could be.
— Game Over (@twoplayer) January 24, 2017
In the EU, all extra charges such as shipping must be highlighted (at least the fact that they exist and will be applied) before the customer gets to the checkout.
A good example of hidden costs provided by darkpatterns.org is on the US flower delivery website ProFlowers.
The ethics of CRO
So, that’s the end of my roundup of examples. Please do check out Paul Randall’s post on the ethics of conversion rate optimisation – there is a way to optimise without misleading the customer.
And do share any dark patterns you see on your travels by using the #darkpatterns hashtag.
For more advice on UI design, subscribers can download the User Experience and Interaction Design for Mobile & Web Best Practice Guide.