Page 1

CHECK OUT

What are dark patterns ?

Coined by Harry Brignull, ‘dark patterns’are malicious forms of web design which are meant to trick the user into purchasing or doing something they didn’t intend to do.

There are more than twelve types of dark patterns. This is quite a loose list defined by Brignull which remains open and flexible. Our generation relies everyday on smartphones and computers and the Internet. But most of us are completely oblivious to how digital tools such as Google work, where our data goes whilst we surf web and how the gap between technological progress and our digital ignorance is exponentially growing.

OR HOW MALICIOUS DESIGN TRICKs YOU INTO WASTING YOUR TIME AND MONEY_

Imagine you are surfing on Amazon to buy some chicken. You find 500g of organic breasts. You add to basket. You check out. You pay. With credit card. You confirm. You receive an email.

Suddenly you notice that you just spent £14 instead of £5 and you have extra wings dispatched to your house.

Finally you realise that you didn’t uncheck the ‘recommended item’ section and that the product wasn’t really that recommended. *

With this project, we wish to raise awareness around deceptive user experience and help users understand the risks of internet navigation and how to avoid them

NEXT

Digital literacy and the power of mastering digital tools should be presided under a set of principles. With power, comes responsibility.

NO THANKS, I WANT TO WASTE MY TIME AND by MONEY *metaphor Harry>Brignull


CHICKEN

BURGER


PROJECT BY ANNA TSUDA MARIA THAN CAMBERWELL COLLEGE OF ARTS

2018

C O


What are dark Introduction patterns ?

Coined by Harry Brignull, ‘dark patterns’ patterns’are aremalicious maliciousforms of webof forms design web design which which are meant are to trick the meant touser trickinto the purchasing user into or doing something purchasing or doing they something didn’t intend they didn’t to do. intend to do. Imagine you are surfing on Amazon to buy some chicken. You find 500g of organic breasts. You add to basket. You check out. You pay. With credit card. You confirm. You receive an email. Suddenly you notice that you just spent £14 instead of £5 and you have extra wings dispatched to your house. Finally you realise that you didn’t uncheck the ‘recommended item’ section and that the product wasn’t really that recommended. * There are more than twelve types

of darkare There patterns. more than Thistwelve is quitetypes ofloose a dark list patterns. defined This by is Brignull quite a looseremains which list defined open byand Brignull flexible. which remains open and flexible. Our generation relies everyday on Our generation smartphones and relies computers everyday and on smartphones the Internet. But andmost computers of us are and the Internet.oblivious completely But mosttoofhow us are completely digital toolsoblivious such as Google to howwork, digital our where toolsdata such goes as Google whilst we work, where surf web our and data how goes thewhilst gap we surf web technological between and how the gap progress between and our digital technological ignorance progress and is exponentially our digital ignorance growing. is exponentially growing. With this project, we wish to raise With this project, awareness aroundwe deceptive wish to user raise awareness around experience and help deceptive users underuser experience stand the risks andof help internet users navigaunderstand tion and thehow riskstoofavoid internet them. navigation and how to avoid them Digital literacy and the power of Digital literacy mastering digital and tools the should power of be masteringunder presided digital a set tools of should principles. be presided under a set of principles. With power, comes responsibility. With power, comes responsibility.

*metaphor by Harry Brignull *metaphor by Harry Brignull


What are dark patterns ?

DARK PATTERNS HOW DO DARK PATTERNS WORK ?

LIST OF DARK PATTERNS

‘When you use the web, you don’t read every word on every page you skim read and make assumptions. If a company wants to trick you into doing something, they can take advantage of this by making a page look like it is saying one thing when it is in fact saying another.

BAIT AND SWITCH

From www.darkpatterns.org

CONFIRMSHAMING DISGUISED ADS FORCED CONTINUITY FRIEND SPAM HIDDEN COSTS MISDIRECTION PRICE COMPARISON PREVENTION PRIVACY ZUCKERING ROACH MOTEL SNEAK-INTO-BASKET TRICK QUESTION


PASSIVE .VS. ACTIVE The previous dark patterns discussed were the twelve categories coined by Harry Brignull (visit www.darkpatterns.org for more information). As graphic designers, we have noticed a crucial difference in dark patterns. ACTIVE dark patterns consists of elements which tricks the user when he engages in activity, such as clicking or typing. PASSIVE dark patterns consists of elements which are in the display and graphics of the website, such as the font, the colour, the layout and affects the user’s perception and mind. It is indirect. SCENARIO ONE: ACTIVE DARK PATTERN (BAIT AND SWITCH) You surf a streaming website, find a movie, click on a bright green bold ‘DOWNLOAD’ button which opens up a new ADVERTISEMENT window.

User interaction:

Active (click)

Number of elements: Tactic:

Single (it was only one button)

Lying (language is deceptive, word =/= action)

Objective:

+customers and traffic

SCENARIO TWO: PASSIVE DARK PATTERN (MISDIRECTION) You are on a Amazon and you want to unsuscribe from the Prime, after going through a maze, you find the unsuscribe button. It was at the very bottom of the page, written in 10pt font on a page covered in big, colourful ads.

User interaction:

Passive

Number of elements: Tactic:

Series (a mix of deceptive font and colour)

Distracting layout

Objective:

+customers and direct profit


USER INTERACTION Active (click)

NUMBER OF ELEMENTS Single

CONFIRM SHAMING

Active (click)

Series

Lying

DISGUISED ADS

Active (click)

Single

FORCED CONTINUITY

Series

FRIEND SPAM

Passive Active Passive

Lying Confusing layout Lying Confusing layout

Series

HIDDEN COSTS

Passive

Series

MISDIRECTION

Passive

Series

PRICE COMPARISON PREVENTION

Passive

Single

PRIVACY ZUCKERING

Passive

Series

Lying

ROACH MOTEL

Passive Active

Series

SNEAK INTO BASKET

Active (click)

Series

Passive -> Active (click)

Single

Misleading Confusing layout Persuasion Confusing layout Language Confusing layout

BAIT AND SWITCH

TRICK QUESTION

TACTIC

OBJECTIVE

Lying

+ customers + traffic Direct profit + customers + customers + traffic

Lying Persuasion Confusing layout Misleading Distracting layout Confusion Language

Direct profit + customers + traffic Direct profit Direct profit + customers Direct profit + customers + data + customers + traffic Direct profit Direct profit

A SPECIAL CASE:

We have reviewed passive and active dark patterns. However, there is a third category which could be considered both passive and then active patterns, we call it the PANIC AND BUY technique. PANIC AND BUY involves a set of font, language and layout choices which goal is to stress and induce panic in the user in order to rush him into purchasing products which are seamingly limited. Viagogo, Ebay and most travel-related companies use this technique. SCENARIO THREE: ACTIVE DARK PATTERN (BAIT AND SWITCH) You are on Ebay and need an important item. It says that only 2 are left in stock and 543 people are watching the item right now. It says ‘BUY NOW’ and ‘GET IT BEFORE ITS TOO LATE !’ You panic. You buy it.

User interaction:

Passive then active (watch and click)

Number of elements: Tactic:

Series

Misleading, Lying and Stress-inducing

Objective:

Direct profit


User Interaction User Interaction

Number of elements Number of elements

Tactic Tactic

Objective Objective

BAIT BAIT AND AND SWITCH SWITCH Active (click) Active

Single

Single

BAIT AND SWITCH is when the When the user takes a certain user takes a certain action to get action thinking it would lead to point A (desired destination) butpoint it actually leads destination) to point B to A (desired (undesirable consequence). but it actually leads to point B This tactic uses a Series of (undesirable consequence). language/layout based dark patterns such as tiny font and deceptive colours.

Lying

Lying

+ customers More+ customers traffic

Other examples: Microsoft’s Windows 10 update in 2016, Strikingly, Addison Lee

CHECK OUT OUT example: CHECK The search bar at the top of the ‘HOME PAGE’ is actually an ad, the real one is actually at the bottom of the page.

CONFIRM-SHAMING CONFIRM-SHAMING Active

Single

Single Active (click) Manipulates the user in taking a certain action by generating guilt CONFIRMSHAMING is when through specific use of language the design manipulates the user and phrases. in taking a certain action by

Lying

Language Persuasion

More customers

+ customers Direct profit

generating guilt through specific use of language and phrases. CHECK OUT OUT example: CHECK The grey ‘I dont wish to save money on my purchases’ underneath ‘SIGN UP’ is an example of confirmshaming the user in wasting money.

Other examples: Almost every online blog, daily post, news outlet, TMZ.


User Interaction

Number of elements

Active (click)

Single

Tactic

Objective

DISGUISED ADS Confusing layout Lying

DISGUISED AD is a type of bait and switch but specific to ads. The user click on a link expecting an action but ends up on an ad instead.

+ customers + traffic

Other examples: The ‘WATCH’ button on almost every online streaming services and torrent websites,

CHECK OUT OUT example: CHECK On the ‘search results’ page, one of the results is a product and the other is an ad. They look exactly the same next to each other and the similar display confuses the audience. Only the marks ‘SP’ indicate the sponsored ad.

FORCED CONTINUITY Active (subscribe) Passive

Series

Language No alert Confusing layout

Direct profit

A form of ROACH MOTEL*.

FORCED CONTINUITY combines multiple dark patterns (Series). Main scenario is when a free trial ends and your card starts getting charged without warning. The pages are designed so the user has a hard time cancelling his subscription, or obtaining a refund.

Other examples: AMAZON PRIME, Yahoo! News and Graze Snack boxes, DELIVEROO


User Interaction

Number of elements

Tactic

Objective

FRIEND SPAM Series

Active (subscribe)

Lying

+ customers + traffic

A form of BAIT AND SWITCH*

FRIEND SPAM is when the user thinks he is doing one thing (e.g asking for an email) but instead his contacts are spammed with a message from the user himself. It requires a Series of actions e.g clicking and then typing.

Other examples: Linkedin contact spam incident

HIDDEN COSTS Passive

Series

HIDDEN COSTS is a final price displayed different from the original price just before the end of a purchase. The user generally fills a lot of content before he sees it, therefore would rather continue the purchase instead of cancelling. This tactic uses a Series of language/layout based dark patterns such as tiny font and deceptive colours.

Persuasion Confusing layout

Direct profit

Other examples: GoDaddy, 1and, Bookings.com, AirBnb, Linkedin


User Interaction

Number of elements

Tactic

Objective

MISDIRECTION

Passive

Series

MISDIRECTION is when the design purposefully focuses your attention on one thing (beneficial for company) in order to distract you from another thing (beneficial for customer). This tactic uses a Series of language/layout based dark patterns such as tiny font and deceptive colours.

Misleading Distracting layout

+ customers Direct profit

CHECK OUT OUT example: CHECK On the ‘SUMMARY’ page, the NEXT button is actually an ad and the real one is the tiny written word underneath it.

Other examples: Amazon, Facebook, ASOS, Old Navy

PRICE COMPARISON PREVENTION Passive

Single

Language Confusing layout

Direct profit

PRICE COMPARISON PREVENTION is when the user attemps to compare prices between two items but the display makes it very difficult or impossible, eg. an item with price/unit and a similar with price/kg. CHECK OUT OUT example: CHECK On the ‘HOME’ page, the unit is different for all three products, making it difficult to find the best value.

Other examples: Amazon, Sainsbury’s, Linkedin


User Interaction

Number of elements

Tactic

Objective

PRIVACY ZUCKERING Passive

Series

PRIVACY ZUCKERING, a term derived from Facebook CEO Mark Zuckerberg, tricks users into publically sharing more information than they intend to. It is a form of data mining in which the information deceivingly collected are often used for marketing purposes and for designing targeted ads. Other examples: Facebook, WhatsApp, Zapier.com, Linkedin

Confusing layout Language Misleading

Direct profit + customers + data

CHECK OUT OUT example: CHECK On the ‘PAYMENT’ page, there is a double negative meant to trick you into saving your card details.

ROACH MOTEL Passive

Series

ROACH MOTEL is a term derived from the cockroach bait product. It refers to when the user is allured into a situation which is extremely difficult to get out of, e.g a paid subscription. It is generally built upon a Series of MISDIRECTION/ HIDDEN COSTS, TRICK QUESTIONS AND FORCED CONTINUITY.

Confusing layout Language Misleading

+ customers + traffic

CHECK OUT OUT example: CHECK On the ‘SEARCH RESULTS’ page, 3 out of 2 products lead to a subscription roach motel.

Other examples: Amazon, LinkedIn, Facebook, Yahoo!, Wix, Rolling Stones


User Interaction

Number of elements

Tactic

Objective

SNEAK INTO BASKET Active (click) Passive

Series

SNEAK INTO BASKET is a variation of HIDDEN COSTS where a ‘recommendation’ is added to your basket without you noticing. This leads to accidental buys. This tactic uses a Series of deceptive choice of words and layout based dark patterns such as tiny font and deceptive colours.

Confusing layout Persuasion

Direct profit

CHECK OUT OUT example: CHECK On the ‘SUMMARY’ page, a recommendation is sits in the cart unless user ticks a box.

Other examples: Amazon, GoDaddy, 1and1, Uhaul, Cloudflare

TRICK QUESTION Active

Single

A TRICK QUESTION is a when you respond to a question, which when glanced upon quickly, appears to ask one thing, but if read carefully, asks another thing entirely. It exploits the fact that there’s an online culture of quick skim reading. Other examples: Amazon, Yahoo, Linkedin,

Misleading Language

Direct profit

CHECK OUT OUT example: CHECK On the ‘ACCOUNT’ page, it asks the user for a newsletter subscription, however the usual ‘yes’ means ‘no’ and vice versa.


VISUAL DECONSTRUCTI

BRIGHT COLOURS TO ATTRACT THE EYE

EXCITABLE/PANIC-INDUCING LANGUAGE


ION: ‘PANIC AND BUY’

EXCITABLE PANIC-INDUCING COLOURS

VALUE TO RUSH DECISION MAKING


VISUALISATION A BAIT AND SWITCH point a

point b

CONFIRMSHAMING point a

point b

= generates guilt

DISGUISED ADS point a

point b = ad

FORCED CONTINUITY price a 0£

price b £££ = automatic

FRIEND SPAM point a

provide email address

point b = spam email to your contacts

HIDDEN COSTS 0£ point a

£££


AND SCHEMATICS MISDIRECTION point a

PRICE COMPARISON PREVENTION

point b = confused

obviously noticeable

hard to notice

ROACH MOTEL point b

item a item b

SNEAK-INTO-BASKET point b item b

item a

point a

TRICK QUESTION point a

item a

point b item b

PRIVACY ZUCKERING point a

share some information

point b share more info than intended


Dark patterns: the underlying danger

WHY DO WE NEED TO BE CAREFUL ? DIGITAL VS. REAL LIFE

DIGITAL LITERACY

In an age of information where the web reigns supreme, there has been multiple debates around how the Internet should be used. Although seen as an extension of our society, the Internet is also seen as an entity of its own. Should the laws of society be applied to the ones on the Internet ? Who gets to decide on them ? Should it have rules in the first place ?

Since dark patterns are mostly visual-based, the lack of digital literacy makes it is very easy for the generic user to be fooled. In today’s Internet age, there is still a strong knowledge gap between its users and the makers. In PROGRAM OR BE PROGRAMMED by Douglas Rushkoff, the author establishes that the digital fluency and literacy of the everyday user is significantly lower than the digital elite: companies, banks and the tech geeks. For Rushkoff, the everyday user is like the passenger of a car: we get to use the function of the machine in a superficial and limited way, whereas the driver is the who the user should be: you fully exploit the tool and understand it enough to put it in motion and experiment with all its possibilities. You then have the mechanic who is the expert holding all the knowledge to build the tool itself. Therefore if Moore’s law is true, the idea that computing power tends to approx double every two years, then the digital ignorance of the everyday man is also growing exponentially. As frequent users who rely on the internet every single day, we must be able to understand the digital tools which allow us to communicate with each other effectively. These tools were given to us and it is up to us to get out of the darkness and start using them properly.

Regulating the Internet and its use has been a challenge due to the discrepancy between our perception of real life versus the web. We tend to view the web as anarchical or indepedent and real-life as governed by the law and rules. Although users have been falling into dark patterns everyday for years, more people are getting accustomed to these traps and this accustomedness is democratising the use and effects of dark patterns. We must’nt think of dark patterns as another example of the Internet’s underlying anarchism, rather a genuinely malicious tool which helps big companies make profit. By raising awareness, we hope to help users and designers be mindful and careful of these traps and build conscienscious, user-beneficial websites. If dark patterns happened in real life people would be outraged.


Dark patterns: the underlying danger

HOW DARK PATTERNS BENEFIT THE COMPANY OVER THE USER

HOW CAN WE BE CAREFUL ?

Dark patterns are not BAD web design but purposefully MALICIOUS. It inherently benefits the companies over the user. Dark patterns allow companies to not only retrieve more subscriptions, names on mailing list, direct profit but also by exploiting your personal data to either use or sell. On the web there is PPC, or Pay Per Click advertising. Advertisers get Google or other click providers such as Yahoo! Search Marketing and Microsoft AdCenter to display their ads and they pay the providers when a user clicks on the advert. The point is to increase traffic on a website for potential relevant customers. If they click on ads posted on the website, its owner gets paid some £. Dark patterns sometimes facilitate the mining and exposition of your personal data and information which is often used to track you with similar advertisement or sold to data brokers.

RESEARCH ABOUT YOUR BROWSER, YOUR INTERNET PROVIDER AND LOOK UP ALL OF YOUR SOCIAL MEDIA PROFILES. Just to remind yourself and be conscious of the amount of personal information you have unleashed in the wild. Pay attention to the web. Understand that there are traps, be smart and research them, their consequence and how to avoid having your data or your money tricked. Delete your cookies, research what they are and look into web design. Look into programming logic and the social history of computers. Read about generative art. Learn the command line to understand the fundamentals of coding and the principles of programming. Get familiar with your tool, don’t be over-reliant for your everyday tasks. Be mindful. This is a publication originally made to accompany a game online. We are two second year graphic design students from Camberwell College of Arts, UAL, London, and the information which we give you is not fool proof. To look for more information, we suggest you research further for yourself. Helpful key words:

In addition, some designers defend that A/B testing, an experiment testing two variants of the same website, contribute to the development of dark patterns. Since A/B testing is meant to measure the efficiency of a business, it favours the website which is most profitable which usually involves malicious tricks. A/B testing does not measure the frustration or satisfaction level of the user, but measures the efficiency and profit of a web design. As users vulnerable to malicious web design, we must raise our protection and be careful or not overexposing our selves and fall in traps.

‘digital literacy’, ‘douglas rushkoff’, ‘what is data’, ‘GPDR’, ‘w3school’, ‘digital fluency’, ‘what are cookies’, ‘cambridge analytica’, ‘what is UX/ UI’, ‘what is data analysis/mining’, ‘data brokers’, ‘SEO’, ‘API’, ‘big data’, ‘pay-per-click’, ‘dark patterns’, ‘harry brignull’, ‘singularity’, ‘moore’s law’, ‘design ethics’, ‘cognitive psychology’, ‘user friendly design’, ‘A/B testing’


What are dark patterns ?

WHAT IS UX/UI ? USER EXPERIENCE/INTERFACE

USER FRIENDLY

USER EXPERIENCE (UX) as coined by Don Norman, a user-centered designer with a background in cognitive science, refers to a multitude of elements such as the anticipation, perception, emotion, attitude, behavior of the user that emerges when interacting with products, services, and systems. While this term is often utilized when discussing website and application design, this phrase is simultaneously applicable to a wide variety of subjects outside of the digital screens. For instance, one can describe an excellent customer service provided by a flight attendant as ‘good ux’.

The generally known (desirable) objective behind UX/UI design is to create ‘user-friendly’ digital platforms that are easily navigable, understandable, efficienct, pleasant and more for the end-users. Hence, designers specializing in these two areas often use their professional knowledge of design to provide a beneficial service for the users interacting with their product, service or system.

USER INTERFACE (UI) on the otherhand is one of the screen-specific determinants that influence the user experience. As the term ‘interface’ reveals, it refers to the visible appearance of the product, services and systems implemented to communicate certain sets of information. To further elaborate on the difference between UX and UI, product manager Ken Norton uses a restaurant analogy stating: “UI is the table, chair, plate, glass, and utensils. UX is everything from the food, to the service, parking, lighting and music.”

Don Norman claims that one of the basic requirements in order to design a user-friendly platform is to take into full consideration the needs and wants of the customers. Understanding customer needs is not only achieved through assumptions but also through an intensive series of field research using prototypes. This statement clearly implies that UX/UI is not simply designing the aesthetics of a website and/or an applicaiton through coding, but also involves an entire set of background tasks that all lead to the development of user friendly products, services and systems.


Lying Confusing layout Lying Persuasion Confusing layout

Series Series Series Series

Series Series Series Single

Passive Active

Passive

Passive

Passive

Passive

Passive

Passive Active

Active (click)

Passive -> Active (click)

FORCED CONTINUITY

FRIEND SPAM

HIDDEN COSTS

MISDIRECTION

PRICE COMPARISON PREVENTION

PRIVACY ZUCKERING

ROACH MOTEL

SNEAK INTO BASKET

TRICK QUESTION

Single

Direct profit

Lying Confusing layout

Single

Active (click)

CONFIRM SHAMING

Misleading Confusing layout Persuasion Confusing layout Language Confusing layout

Lying

Misleading Distracting layout Confusion Language

+ customers + traffic

Lying

Series

Active (click)

BAIT AND SWITCH

DISGUISED ADS

+ customers + traffic

Lying

Single

Active (click)

Direct profit

Direct profit

+ customers + data + customers + traffic

Direct profit

Direct profit + customers

Direct profit

Direct profit + customers + customers + traffic

OBJECTIVE

TACTIC

NUMBER OF ELEMENTS

USER INTERACTION

DARK PATTERN TABLEAU


C O


The official guide for www.the-check-out.com a web game based on dark patterns and malicious ux/ui design.

#1

CHECK OUT: or How Malicious Design Tricks You Into Wasting Your Time and Money  

Coined by Harry Brignull, 'Dark Patterns' are malicious forms of web design which are meant to trick the user for their money, time and data...

CHECK OUT: or How Malicious Design Tricks You Into Wasting Your Time and Money  

Coined by Harry Brignull, 'Dark Patterns' are malicious forms of web design which are meant to trick the user for their money, time and data...

Advertisement