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 complainedmanytimes 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:

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?

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?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler