Instructions
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.
Deceptive Patterns: Book by Harry Brignull

Chapter 4: Exploiting perceptual vulnerabilities

Before a human can reason about information, they first have to perceive it. With so much of our lives being online and on-screen, it is useful to consider how visual perception works.

Although it’s tempting to consider healthy human eyes as perfect high-definition cameras, they are actually very different.1 In fact, much of what we visually perceive is fabricated by the perceptual systems in the brain, and our eyes provide highly incomplete information. For example, the human eye has a physical blind spot at the back, where the optic nerve connects the eyeball to the brain. People with normal vision do not see any blind spot, despite it being present at all times. It’s filled in by our visual cortex.2 In simple terms, the human visual perception system guesses at what should be present and fabricates it. Or in other words, our brains are making it up as we go along.

In the same way, the middle of the retina contains sensors called cones that enable us to see in colour. Around the periphery of the retina we mainly have a different type of receptor called rods, which provide non-colour vision, and work better in low light. Yet we do not perceive any variation in the colour of what we see from the centre to the periphery of our field of vision. The human visual cortex does an enormous amount of ‘guesswork’ to fill in the gaps, making an inconsistent data source seem utterly full colour and high definition.

What’s more, when a person with normal vision looks at something, they usually perceive a steady, fixed scene. However, the human eyeball typically moves around a great deal. When we read something or scan our surroundings, our eyes rapidly flick from here to there and back again, taking in all kinds of pieces of information in addition to what we’re focused on. The fast movements are called saccades, and they last somewhere between 20 and 200 milliseconds. They’re interspersed by fixations, when the eye stops, briefly, for 50 to 600 milliseconds. Yet we don’t get motion sickness from it – we don’t notice it at all.

To summarise, what you ‘see’ as a human is not reality, but an internal representation of reality involving imperfect sensors (our eyes) and an enormous amount of internal processing that uses amazing guesswork to fill in the gaps. This means that the entire visual system is exploitable, making it easy to hide things. In other words, camouflage.

A famous example of camouflage in nature is the lime hawk-moth (Mimas tiliae),3 which has evolved to blend into its environment using colours and visual contrast to mimic its background and to create false edges that disrupt its shape, thereby avoiding visual detection by predators when positioned on a lime tree or similar vegetation.4

Photograph of a lime hawk-moth.
Visual camouflage used by a lime hawk-moth.

With apps and websites, exploitative designers frequently use similar techniques, by manipulating text colour contrast and size.

The interesting thing about colour contrast is that it is straightforward to calculate.5 You capture the hex codes for the text foreground and background colours, then enter the values into a calculator tool.6 There is an internationally recognised standard for minimum colour contrast: the W3C’s Web Content Accessibility Guidelines (WCAG 2.1). It has three levels. The middle level, ‘AA’, is widely recognised as the baseline to aim for.7 This means you can use a colour contrast calculator tool to instantly work out if a piece of text on a page meets the baseline recommended level for colour contrast.

One trick to watch out for is differences in text contrast on a page. If most of the text on a page is relatively high-contrast and one bit of text is relatively low-contrast, this could make readers less likely to notice or pay attention to the lower-contrast text, even if it is AA-level compliant. Readers often interpret colour contrast as a signal of what they should read versus what they can safely ignore (i.e. ‘this pale grey text can’t be very important – if it was, they’d have made it more prominent’).

One of the first cases I worked on as an expert witness was...

Buy the book to read more...

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 deceptive.design. 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.

Buy the book
Inquire about expert witness services
Previous
II. Exploitative strategies
Next
5. Exploiting vulnerabilities in comprehension