The Web's Most Annoying Dark Patterns

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

We have created a monster. Despite living and working on the web, many of us detest the ways in which the technology is abused. A few frustrations are inevitable but many techniques are malicious — if not edging on fraudulent. Other dark-patterns are just plain stupid. Here is a list of my top web irritations. I won’t shame anyone directly but, when I encounter these, I’m tempted to give it all up and go live on a beach…

Web Page Bloat

I’ve complained many times but few developers care about page load times or performance. Average page weight reached 2,884kb in May 2017. That’s an average for content pages — not apps, not games, not social networks. Is user experience improving by more than 20% every year? I think not.

Needless Multi-Page Articles

Splitting a long article into separate pages is fine. Splitting a short article into sentence-sized pages to increase your advertising impressions is not.

Obtrusive Advertising

Advertising is one of the biggest causes of bloat. Full-screen, pop-over and auto-play video advertising is particularly nasty. Unfortunately, some site owners think: “I have one ad on every page which raised $X last month. If I place two ads, that’s $2X…” It works to the point where users start abandoning the site. How do some site owners fix falling revenues? More advertisements.

Fake News Ads

Is that 19 year-old really making $5,000 working one hour per week? It seems we’ve lost the art of creating desirable products with intelligent advertising to indulge in preposterous get-rich-quick schemes.

Blocking Ad Blockers

“Sorry, you cannot access this page until you disable your ad-blocker”.

The advantages of this stance: the visitor could never click an ad so they’ll never contribute to revenue. Let’s block them. The disadvantage? The visitor won’t care. No one will go through the rigmarole of disabling their ad blocker just to see your content. Even if they do, they won’t click ads because they know how and when to avoid them. Those users disappear forever and you’ve removed any possibility of promoting other goods and services. If advertising is your only source of revenue, you may want to consider alternatives now vendors have started blocking advertising by default to improve browser speeds.

Mobile Jump

You’re part way through reading an article on your smart phone when the browser scrolls to a random position because an image, advertisement or other asset loaded above. Admittedly, this is a consequence of modern Responsive Web Design but it’s annoying. The solution? Other than fixing image and other asset widths, I’m not aware of any in-page solution (and I’ve spent many hours trying!) Mobile Chrome has an experimental flag to prevent the jump:

enter chrome://flags in the address bar
scroll to or search for Scroll Anchoring
enable and restart the browser.

I’m not convinced it always works but I applaud any vendor for trying.

Mobile App Promotion

You tap a link on a mobile device but, just as you reach the destination, you’re invited to install the site’s mobile app and read the article there. That’s right: you must visit an App Store, approve the terms, download several megabytes of code, wait for installation to complete, launch the app, then try to locate the same content you could have read ten minutes ago. This translates as: “We’ve spent a lot of money on numerous native mobile applications but no one’s bothered. We should probably have implemented a Progressive Web App for a fraction of the cost. Rather than address the core problem, we’ll try and trick a few people into installing it. Perhaps our CEO will then stop complaining about our dismal return on investment.”

Confusing Navigation

I’m all for design freedom but if you need to explain your navigation, something is wrong! Horizontal and vertical lists of links may not be exciting but they work without requiring bouncy arrows or instructions. Bonus irritation: CSS-only multi-level cascading menus which disappear the moment you move your mouse one pixel off the active area.

Browser Detection

“This website only works in Google Chrome.” I thought this sort of nonsense died out in 2001. Perhaps it’s necessary if you’re trying an experimental technology but applying it to every page of content will lose you visitors.

“You Need Flash”

I don’t. You need to update your website.

Single Page Applications With No Fallbacks

All the cool kids are using JavaScript frameworks to create single page applications. Fine, but at least add a little tolerance when JavaScript fails. Which it will. Progressive Enhancement is not dead.

Stupid Password Restrictions

“Your password must be between eight and ten characters, contain an uppercase letter, two numbers, a symbol, and the smiling poo emoji.” This translates as: “We don’t really understand security but this makes it look as though we’re doing something practical.” You’re not: you’re handing a template to brute-force password tools and significantly reducing discovery time. By all means, enforce a minimum number of characters, indicate the strength and check for idiotic passwords such as ‘password’. That’s it.

Disabling Paste on Password Fields

Why do sites do this? You’ve now stopped me using a strong 500-character randomly-generated string set within my password manager. You should also stop…

Breaking Browser Behaviour

Site owners need to learn several basic facts about the web. You cannot:

hide your code
stop people viewing your source
prevent people using the right-click menu
detect when someone opens the developer tools
force people to run your scripts or use your styles
stop people copying content (and please stop adding stupid copyright messages when I try).

Breaking the Back Button

Breaking back-button functionality is unnecessary and a terrible user experience. Even the novice users understand what “Back” does. There’s no excuse for Single Page Applications — the history API has been available for many years so use it! It’s not just SPAs. Some sites insist on ending sessions or presenting an expiry page so you can’t go back or forward and have to log in again. And don’t get me started on sites which fail to respond to mouse wheel scrolling.

Using the Wrong Input Type

HTML5 introduced a range of new input types including url, email, tel, number, date, time, color etc. Browser vendors can optimize the user experience so certain characters are restricted or an appropriate control such as a calendar appears (which still isn’t in Firefox — what’s taking Mozilla so long?!) Use the right input control for the job. Anyone implementing yes/no radio buttons instead of a single checkbox deserves all the ridicule they receive.

Cookie Warnings

You may not see these but EU residents are bombarded with “we use cookies” banners and pop-ups on almost every site they visit. Few people care. Even fewer read them. Millions of people are now preconditioned to ignore security warnings which, one day, could be more serious. This daft rule is enshrined in law and I’m not advocating you indulge in criminal activity. Yet laws must be enforceable; how many sites been fined for refusing to show a cookie notice? There is an easy option: install an auto-click plugin such as I don’t care about cookies.

Needless Scroll-Jacking

I quite like scroll-jacking when it’s subtle and highlight a few key points. It’s less pleasing when it’s over-used with a dozen parallax sections combined with 57 floating items moving into place. My eyes are bleeding, thanks.

Infinite Scrolling Shenanigans

I’m not particularly keen on pages which load and append additional content as you scroll toward the bottom of the page. I’m less keen on sites which fail to append content quickly enough, provide no indication of when the page will end, or make it impossible to bookmark an individual article.

Social Sign-on Silliness

When OAuth is implemented well, signing-up and logging in with your Facebook, Twitter or Google account is fabulous and saves time. When implemented badly, sites then proceed to ask for your email and another password to register — why?

“Useful” Items Added to My Shopping Cart

I don’t mind a few product recommendations but auto-adding something to my cart steps beyond the line of reasonable ecommerce behavior! You just lost a sale, buddy.

Subscription Shaming

Automatically opting people in to services or products is a dark pattern still adopted in some corners of the web. Worse are the marketing phrases which turn you into the bad guy, e.g. “I don’t care about orphan puppies so I want to opt-out from your newsletter”.

Artificial Scarcity

“We have 2 items available and 47 people are viewing this product.” It’s great to know when you’re out of stock but enticing a sale using these tactics is immoral. Travel sites are notorious for these messages but others have implemented scarcity scares. Try visiting the page a week later — strangely, the product is still available.

Easy In, Difficult Out

Finally, the ultimate dark pattern. The site makes it easy to sign-up: you need no more than an email address. Cancelling the service is another matter. You must visit the company’s headquarters in Pyongyang, submit a hand-written cancellation letter, provide fifteen types of photographic identification (originals, not photocopies), fill in a fifty-page leaving questionnaire, and agree to medical experiments on your first-born child. Thanks for reading. I’m off for a lie down. Have you encountered worse transgressions? Have you been asked to implement any? Did you refuse or succumb to the dark side?

Frequently Asked Questions about Annoying Web Dark Patterns

What are web dark patterns and why are they annoying?

Web dark patterns are deceptive design techniques used on websites and apps to trick users into doing things they might not want to do, such as signing up for a service, buying a product, or sharing personal information. They are annoying because they manipulate user behavior, often leading to frustration, wasted time, and a sense of being tricked or cheated.

How can I identify web dark patterns?

Identifying web dark patterns can be tricky as they are designed to be deceptive. However, some common signs include confusing language, hidden information, pre-selected options, and difficult opt-out processes. If a website or app is making it hard for you to make an informed decision or is pushing you towards a certain action, it might be using dark patterns.

Are web dark patterns illegal?

The legality of web dark patterns varies by country and the specific technique used. Some countries have laws against deceptive business practices that could apply to dark patterns. However, enforcement can be difficult due to the global nature of the internet and the subtlety of many dark patterns.

How can I avoid falling for web dark patterns?

The best way to avoid falling for web dark patterns is to be aware of them and to take your time when interacting with websites and apps. Read all information carefully, especially the fine print, and don’t feel pressured to take immediate action. If something feels off, trust your instincts.

What can I do if I’ve been tricked by a web dark pattern?

If you’ve been tricked by a web dark pattern, you can report it to the website or app’s customer service, file a complaint with your local consumer protection agency, or share your experience on social media to warn others. You may also want to consider legal action if you’ve suffered significant harm.

How can I protect my personal information from web dark patterns?

Protecting your personal information from web dark patterns involves being vigilant about what information you share online. Be wary of requests for unnecessary personal information, and use privacy settings to control who can see your information. Also, consider using a virtual private network (VPN) for added security.

Are all web dark patterns bad?

While web dark patterns are generally seen as manipulative and unethical, not all of them are necessarily harmful. Some may simply be annoying or inconvenient. However, any design technique that intentionally deceives or misleads users is problematic and should be avoided.

Can web dark patterns affect my computer’s performance?

Web dark patterns themselves do not typically affect a computer’s performance. However, they can lead to unwanted downloads or subscriptions that could slow down your computer or use up valuable storage space.

How can I report a website or app that uses web dark patterns?

If you come across a website or app that uses web dark patterns, you can report it to the website or app’s customer service, your local consumer protection agency, or a relevant regulatory body. You can also share your experience on social media to warn others.

How can I learn more about web dark patterns?

There are many resources available online to learn more about web dark patterns, including articles, blogs, and videos. You can also join online communities or forums dedicated to discussing and raising awareness about this issue.

The Web’s Most Annoying Dark Patterns