Halloween special: the tricks and treats of UX design

Halloween is an unusual holiday. Historically, it has connections with the Pagan festival of Samhain, which marks the end of harvest and the beginning of winter. It is also a part of catholic and orthodox Christian observance, as a time for remembering family members who have died.

In addition to these traditional meanings, Halloween has assumed an independent identity as a secular cultural event, as part of which children go door-to-door in their neighbourhood in costume or disguise, demanding candy from strangers.

What these different customs have in common is an idea of Halloween as a day when thresholds are crossed: ordinary social rules are subverted (children are usually told to refuse candy from strangers), ordinary identities are concealed (behind spooky masks, under cover of darkness), and people’s ordinary lives are interrupted (by spending a day thinking about the dead).

In the midst of this strange celebration, it seems fitting that we take some time to consider the ways that designers are also engaged in the business of disguise and deception, of tricks and treats.

In this article, we’ll first ask how designers are called upon to trick their audience – whether by designing seductive packaging, choosing attractive typefaces, or crafting addictive apps. Then we’ll examine some examples from history, where the manipulative capacity of design has been used to glorify war, sanitize scandal, and draw people in with promises of meaning and belonging. Finally, we’ll look at 10 of the most common tricks and treats in user experience (UX) design today.

Design as deception

Disguise, manipulation and deceit: we might think that these are activities engaged in only by a shady and disreputable kind of designer – not by us in the respectable mainstream, doing our pro bono projects for a local charity. But if we’re honest with ourselves, all design – at least, all effective design – must contain a measure of deception.

Aesthetic decisions as emotional tricks

When we choose colour schemes, typefaces, and layouts for a project, we are not making purely visual decisions. We are really making aesthetic decisions – but “aesthetic” in its 200-year-old meaning:

aesthetic, 1798, from German Ästhetisch or French esthétique, both from Greek aisthetikos ‘sensitive, perceptive,’ from aisthanesthai ‘to perceive (by the senses or by the mind), to feel,’ from PIE *awis-dh-yo-, from root *au- ‘to perceive’

In this sense of “aesthetic”, our decisions as designers are driven by the way we expect others to perceive and respond. Hence the word anaesthetic: something that causes us to be without (an-) feeling (-aesthetic).

What’s more, our emotional responses to visual cues are often very deeply culturally embedded, or even an innate feature of human consciousness. It’s almost as rare to see a poster for a heavy metal concert set in pastel pink and copperplate script as it to see a sky blue “stop” sign printed in lowercase Comic Sans.

These are unusual, and probably ineffective, aesthetic choices

Aesthetic choices gives us the power to deceive people. And with the power to deceive comes the difficult issue of how we should use that power. I’ll come back to this important ethical question towards the end of the article.

Branding as deception

Before that, let’s take a look at an example of an everyday product and explore how its branding and packaging sets our expectations and manipulates our feelings. I’ve chosen to look at a moisturising cream by Simple, but I could just as well have chosen any other brand or product.

Simple, like many moisturisers, is presented in pared-down, mainly white packaging. This communicates cleanness, and is already silently saying to the consumer “I don’t contain weird scary nasty stuff”. The bottle also has splashes of green and an illustration of a leaf, inviting us to interpret this as a “natural” product.

The product’s name, “Simple”, perfectly sums up the impression that the entire product is trying to make on the shopper. For good measure, the word “Simple” has been set in all-lowercase type, making it appear friendly and unthreatening. There is also a smile-shaped curve underneath the wordmark, encouraging us to unconsciously make a positive emotional association with the product. (For those really interested in unconscious triggers, “simple” also contains an anagram of the word “smile”.)

Amazon uses exactly the same lowercase-with-a-smile trick:

Finally, the moisturising cream inside the container is also a perfect white, carrying all of the associations on the packaging through to the actual product. But how many consumers have considered that the white colour of the cream is itself designed and engineered? And how many consumers would be surprised to read Simple’s list of ingredients? Here it is:

Aqua, Glycerin, Paraffinum Liquidum, Polyglyceryl-3 Methylglucose Distearate, Cetyl Palmitate, Dimethicone, Cetyl Alcohol, Panthenol, Borago Officinalis Seed Oil, Carbomer, Potassium Hydroxide, Bisabolol, Methylparaben, Pentylene Glycol, Tocopheryl Acetate, Acrylates/C10-30 Alkyl Acrylate Crosspolymer, Disodium EDTA, Propylparaben, Lactic Acid, Sodium Lactate, Mica, 2-Bromo-2-Nitropropane-1,3-Diol, Serine, Sorbitol, Urea, Titanium Dioxide, Sodium Chloride, Allantoin, Pantolactone.

The point of this analysis isn’t to suggest that Simple is doing anything wrong by packaging and branding its product in this way. The same process is followed, to different extents and to varying degrees of success, by every product on the shelves of your local store.

On the contrary: we all know that we are attracted to certain products because of how they are presented to us. Yet we can still feel uneasy with this truth when it is pointed out. Frank Chimero nicely sums this up in his book The Shape of Design:

The salesman doesn’t tell an untruth in order to get us to work towards it. Instead, he misrepresents what is in front of us so that we buy into a mirage. It’s a messy distinction, and it’s why design, rhetoric, and politics are so sticky and often mistrusted: the language we use to build the world is so close to what can be used to undermine it. Design and persuasion are manipulative, and if we have the skills to seduce others toward green pastures, we can also lead them off a cliff.

With that in mind, let’s turn to history and current affairs to see how the deceptions of design have served some questionable political agendas.

The history and ethics of manipulation in design

“Your country needs you” – Britain, 1914

We can see the power of design with a brief historical excursion to 1914. This is one of the most iconic images of the first world war: a British poster, containing an image of a man pointing his finger, and the text “Your country needs you” set in uppercase.

In the early twentieth century, newspapers were almost entirely made up of small, dense, text. Mass communication through visual media was limited, so we shouldn’t underestimate the power of this image. The imposing military man is looking the audience straight in the eye, finger pointed, alongside a supersized, capitalized “YOU”.

This is perhaps the first “call to action” of the era of mass messaging. What’s more, the person in the picture is Field-Marshal Lord Kitchener, who was already a decorated war hero and had recently become Minister for War. It was of genuine patriotic significance to British citizens that it was this individual calling on the audience to act.

Partly as a result of this campaign, millions of young men joined up to fight on the front line. But in many cases they were sold a lie, recruited to fight in the interests of an elite, not necessarily the interests of the country. Recruitment strategy often focused on the fact that young men’s friends and family were joining up, and that they should join in with a community effort. In reality, the price of war was paid almost exclusively by the poor and young.

This call to action appeals to the same three dimensions of habit-forming UX design set out by Nir Eyal in Hooked. First, the tribe (in this case, the collective identity of nation, and the esteem of people’s peers); second, the hunt (the adventure of war), and finally, the self (the call to action emphasises personal duty to the country).

To show the power of text combined with a carefully chosen visual motif, we’ve mocked up two different posters using the same text. What do you think these calls to action are about?

Other examples of design in political manipulation

Manipulation is not restricted to graphic design. For instance, the Nazis’ elaborate hierarchy of uniforms created an instant sense of order and belonging that helped to legitimise the regime’s grip on power, as well as adding a sense of certainty and authority to its outlandish policies. Twentieth century fascist regimes recognised the potential of design to manipulate the people, and used this to create highly effective propaganda.

Today, we also see the power of a slick counter-cultural branding effort in the communications strategy of the extremist religious group ISIS. The organisation could easily afford to run a professional production studio. Instead, it deliberately uses amateur production values and an ascetic style of staging and dress. This appeals not only to the disillusioned and marginal individuals that ISIS seeks to recruit, but also to a western audience that is seduced by the aesthetic of the viral video, and even excited by the spectre of violence. The ISIS brand projects a counter-cultural identity that makes a distinctive impression in television news, earning it a level of renown far beyond its real military or geopolitical reach.

The tricks and treats of UX design

In common with other forms of design, UX design gives designers the choice between benevolent and malevolent deceptions. The question for us as designers isn’t whether to exercise our power to trick. It’s whether to exercise it for a purpose that is ethical, and that we’re confident the user already wants to pursue (for example, paying less for their dry cleaning); or for a purpose that is unethical and runs against the user’s interests (like being duped into buying unnecessary credit insurance).

Below are five examples of user interface design that uses deliberate deception to try and get the user to perform an action that they don’t want to do. We’ve selected these from the website Dark Patterns, where you can explore lots more disreputable and arguably unethical examples of UX practices. They define a dark pattern as user interfaces that are designed to trick people.

5 examples of UX design that tricks people

• Bait and switch: the user selects one command, but the app or website responds by executing a different, often contrary command. A recent example was when Microsoft programmed an “Upgrade to Windows 10” dialogue box to initiate Windows 10 installation after the user had selected the “close” button.

• Forced continuity: the user selects a free trial, but after it completes, the trial automatically turns into a paid subscription, which can’t be cancelled except by calling the company (who will then do a hard sell).

• Misdirection: the user’s attention is focused in one place in order to distract them from something else. Dark Patterns gives an example of an airline website which highlights a price as “lowest” even though there are cheaper options alongside it.

• Disguised adverts: promoted content is displayed as if it is normal content on the site the user is viewing. This can often be seen on news sites, where advertising is written as if it were a news article, often without any upfront indication that it is actually promotional content.

• Trick questions: because users want to move through signup and checkout processes rapidly, they often scan-read forms before making decisions about which option to select. This is exploited by creating grammatically ambiguous opt-in and opt-out statements, to try and trick the user into subscribing to something they don’t really want.

Any.do’s tutorial that’s not a tutorial. Unfortunately (IMO) Any.do has switched to a more conventional and intrusive tutorial format in its recent updates.

5 examples of UX design treats

• Pop-up calls to action, the kind that ask for your email address when you first load a web page, can be annoying but are not usually too manipulative. What’s more, you’ll often get a (genuine) treat in return: a discount code or free exclusive content delivered to your inbox.

• Tutorials: many users remove an app right after installing because they can’t intuitively figure out how to use it. However, users are also infuriated by tutorials, especially if they can’t be skipped. This creates a dilemma for developers. An old version of Any.do used a benevolent deception to offer the user a tutorial that they don’t have to spend time or energy engaging with. This successfully avoided annoying the experienced user, while allowing a new user to quickly get to grips with the product within the app’s normal user interface and at a time of their choosing.

• Push notifications are often employed to encourage users to return to an app or website repeatedly (often daily). This is crucial to getting users to occupy what Nir Eyal calls the “habit zone”, where a product is both useful and used frequently. Notifications can be intrusive, but when executed well they support what the user already wants to achieve (e.g. notifications about unfinished tasks on a to-do list).

• Limiting menu choices restricts user behavior, and is in that sense a form of trickery. But where the limitations are engineered to help the user reach the destination they want and need, it is a benevolent form of misdirection.

• Behavioral nudges can be used to promote something which is beneficial to the general good but which individuals may have less personal investment in. For example, a user interface in a digital thermostat might analyse energy usage and alert the user when their settings are wasteful. Nudges like this are psychologically complex, though. If implemented badly, they can trigger “reactance”: where an individual baulks at being told what to do, and deliberately does the opposite.

In this Halloween special, we’ve taken a look at how manipulation is an intrinsic part of design. We analysed examples of how design deceives, ranging from cosmetics to military recruitment. And to finish up, we outlined five ways that unethical UX design can trick people, and five ways that the designer’s power to manipulate can be used more ethically, by nudging users to achieve the goals that they value.

Want to learn more about designing interfaces that serve users’ needs? Check out our courses!