If you intend to use this component with Finsweet's Table of Contents attributes follow these steps:
  1. Remove the current class from the content27_link item as Webflows native current state will automatically be applied.
  2. To add interactions which automatically expand and collapse sections in the table of contents select the content27_h-trigger element, add an element trigger and select Mouse click (tap)
  3. For the 1st click select the custom animation Content 27 table of contents [Expand] and for the 2nd click select the custom animation Content 27 table of contents [Collapse].
  4. In the Trigger Settings, deselect all checkboxes other than Desktop and above. This disables the interaction on tablet and below to prevent bugs when scrolling.

Part 1: Diving into the world of deception

In 2010, I defined a dark pattern as: ‘a user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills’.

This definition is now a little out of date, and today I prefer to use the term deceptive pattern,1 or to be pedantic, deceptive or manipulative pattern – but that’s a bit of a mouthful, so in this book I’ll use deceptive pattern as a shorthand to mean both.2

At the time, I was probably the only researcher looking closely at the area of manipulative and deceptive user interface design. Now, over thirteen years later, the area has blossomed into a multidisciplinary topic involving numerous human–computer interaction (HCI) researchers, legal scholars and many other people. Of course, I can’t take credit for the work they’ve done; although I launched the initiative and defined a dozen or so of the initial terms, my role since then has mainly been that of an educator, campaigner and amplifier.3 I’ve worked to spread awareness, to name and shame companies, and to encourage legislators, regulators and enforcers to take action.

To understand how businesses can employ design to manipulate users for profit, let’s start with a physical example: travelling through an airport. When you travel through London Gatwick Airport, you’re advised to ‘arrive at least two hours before your flight to allow plenty of extra time to check-in and pass through security.’4 But after you go through security at Gatwick, you’re not allowed to go directly to the departure lounge. You’re forced to do something that has nothing to do with your trip, and it consumes your attention, energy and time. You have no choice in the matter – even if you’re running late.

Travellers with luggage walk through a retail space in Gatwick Airport. Shops selling a variety of goods are on either side of a well-lit path lined with advertisements and promotions.
The London Gatwick mandatory retail experience.

In the industry, this is known as a ‘forced path’ store layout.5 It’s really just a shop that’s a long, winding corridor, packed into a rectangular footprint in the same way your gut is packed into your belly – travellers are forced in one end and come out the other. The curved path serves a useful function for the business – it forces retail displays into the centre of the traveller’s vision, making it almost impossible for them to avoid looking at the stuff on sale as they navigate their way through the area.6

A floor plan showing the layout of Gatwick airport’s south terminal. The route for passengers from security follows a curved ‘forced path’ through a retail space rather than going directly to the departure lounge (where there are yet more shops).

Floor plan of the London Gatwick South Terminal, featuring a mandatory forced path that doubles-back on itself.

Think for a moment about the airline tickets and legal terms. In those documents, there’s nothing mentioned about requiring you to spend time in a retail area looking at perfumes, beauty products and alcohol before you’re allowed into the departure lounge. And consider the airport’s guidance – to arrive at least two hours before your flight. If time efficiency really was their top priority, they wouldn’t impose the forced path retail store as a mandatory step between security and the departure lounge.

This is a good example of how businesses can use design to coerce and manipulate you. Arguably, it’s also slightly deceptive in the way that the business is fully aware of the revenue-generating purpose of the forced path store, yet they don’t mention it when they ask you to arrive two hours early, and they don’t give you a shortcut to skip it.

In this example, the negative impact on travellers is minor and not particularly harmful; it’s more of a nuisance than anything else. But when you consider the fact that over 40 million people travel through Gatwick every year, you can see why it’s designed this way.7 If this manipulative design can get just a few percent of travellers to make a purchase who would not otherwise have done, the airport can charge a huge premium on the lease for that retail space and enjoy a lucrative relationship with the retailer.

It’s even easier to build manipulative and deceptive experiences online, because the designer has so much more within their control. When everything is virtual, anything can be tweaked to increase profitability. Here’s a simple example of a deceptive pattern on a website. You’ve probably run into something like this yourself before when signing up to something:8

A sign-up form with the following questions and optional answers: “WIRED and Conde Nast would like to contact you with offers and opportunities. Please tick here if you would prefer to receive these messages: by email [tickbox], by SMS [tickbox]”; “If you do not want to hear from us about other relevant offers, please tick here: by post [tickbox], by phone [tickbox]”; “Our partners sometimes have special offers that we think you will find relevant, please tick here if you would prefer to receive these messages: by email [tickbox], by SMS [tickbox]”; and “Please tick here if you would prefer not to hear from our partners: by post [tickbox], by phone [tickbox]”.
Excerpt from the Condé Nast Wired Magazine sign-up form (October 2010).

Did you see the trick? There’s a switch in the wording between each line of checkboxes. If you tick the boxes in the first row, you’re opting in to messages. In the second row, you tick them to opt out. Third row is opt in again, and fourth row is opt out. If you want to opt out but you’re not paying attention, chances are you’ll misunderstand at least one of the rows and end up getting spammed. This trick enabled Condé Nast to send out more marketing messages, which meant more ‘eyeballs’ – more people seeing the information – which in turn meant more sales and more profit. If you live in the EU or the UK, you probably haven’t seen this type of deceptive pattern recently because it became illegal under the General Data Protection Regulation (GDPR)9 a few years ago.10 Hooray for progress!

Part of the inspiration for my work on deceptive patterns came from an interest in design patterns. A design pattern is a common and reusable solution for a problem when you’re building user interfaces (UIs). For example, if I told you to close your eyes and imagine the sign-in box for a website, you’d probably see the same thing in your mind’s eye as...

Buy the book to

Since 2010, Harry Brignull has dedicated his career to understanding and exposing the techniques that are employed to exploit users online, known as “deceptive patterns” or “dark patterns”. He is credited with coining a number of the terms that are now popularly used in this research area, and is the founder of the website He has worked as an expert witness on a number of cases, including Nichols v. Noom Inc. ($56 million settlement), and FTC v. Publishers Clearing House LLC ($18.5 million settlement). Harry is also an accomplished user experience practitioner, having worked for organisations that include Smart Pension, Spotify, Pearson, HMRC, and the Telegraph newspaper.