13 of Darkest Design Patterns You Can Find on Internet

by author Craig Buckler

The worst web design patterns are not just for Halloween: they stay with us for years!

Some dark patterns are unintentional but most trick you into doing something you didn't intend. You'll eventually see though the manipulation but it's often too late. As a developer, you have the ghost-busting skills to prevent these spooky problems...

1. Nefarious Notifications

Newsletter sign-ups, push notifications, "lets chat" widgets, and survey prompts could be useful but implementations are awful.

Why do sites prompt you to subscribe the moment you access for the first time? You have no idea whether the content is relevant or useful. Unsurprisingly, most people click "no" when faced with the prompt.

There's nothing wrong with these notifications but users are more likely to appreciate the suggestion after they've engaged with the site first. Perhaps show a prompt at the end of the article or after a few visits. And never prompt users to sign-up for a newsletter when they click a link in the newsletter!

2. Broken Browsers

Even those with minimal technology experience understand the browser's back button. Why do sites break standard web functionality by opening new tabs or expiring pages? There is no technical reason to break browser controls. Doing so leads to design problems, fragile systems, and confused users.

Further "features" to avoid:

1. disabling the right-click/long-tap menu
2. disabling copy or adding further text
3. disabling bookmarking by not updating the URL in a Single Page App.

3. Diabolical Disabling of Password Paste

Disabling paste for any reason is unnecessary but it's especially problematic on password fields. Yet you'll encounter this issue on large sites such as major international banks.

The practice is probably implemented for "security" reasons. If the user cannot paste, they cannot reuse a password. The practice also stops people using a password manager so it's impossible to use more secure long random strings.

Never disable paste: it's less work and improves system security.

4. Phantom Password Policies

"Your password must be between 7 and 12 characters and requires at one uppercase character, two non-consecutive numbers, and a ! or $ symbol."

Companies apply these rules for two reasons:

1. The system is insecurely storing the password as plain text in a database with specific character restrictions, or

2. A security "expert" suggested that it stops people using easy passwords such as "password". This is correct - but it also stops people using more complex passwords and provides a handy template for brute-force cracking bots.

A long minimum length is the best way to enforce strong passwords because each character exponentially increases complexity and cracking time.

5. Spooky Scroll-Jacking

Showing animations or other effects as the page scrolls can be an engaging experience but be wary of:

1. Over-using animations. Animating everything is a distraction and highlights nothing. One or two subtle effects to show important messages is preferable.

2. Breaking the context. Scrolling should not lead to an unexpected actions such as content disappearing, modal dialogs, form submissions, redirects to other pages, etc.

Animation can also cause motion sickness so use the CSS prefers-reduced-motion media query to disable effects according to the user's preferences.

There's also a special place in hell for infinite-scrolling pages! Auto-loading seemingly random content without the user's consent wastes bandwidth, makes it difficult to bookmark pages, and makes it impossible to reach contact information in the page footer.

6. Creepy Content Jump

Reading articles on a smartphone can be a frustrating experience. You're engrossed in the text when it jumps off-screen and you lose your place. You may even click the wrong button or link the moment the page moves. Some readers will give up and leave.

Content jumps occur when an image or iframe loads above the viewport scroll point. The browser inserts the content once it has determined the dimensions and the page height grows. A 300 pixel height image loaded above the current position pushes the content down 300 pixels.

Google's Cumulative Layout Shift (CLS) metric measures content jumps and penalizes sites accordingly. Technical solutions include:

• Adding width and height attributes to HTML <img> and <iframe> elements or using the CSS aspect-ratio property to reserve space before an asset loads.

• Setting dimensions of container elements which enclose slower-loading ads, images, and social media widgets.

• Optimizing web fonts and using similarly-sized fallbacks to minimize layout shifts.

• Requesting larger assets earlier using preload in your HTML <head>.

• Not inserting elements at the top of the page unless they're triggered by a user action.

• Considering CSS containment to optimize the rendering of content blocks.

7. Alarming App Installs

Some sites and social networks often prompt you to install their app when clicking an email alert about a new message, follower, article, transaction, etc. The link opens in a web page with two buttons:

1. A massive "Download Our App" button which leads to an AppStore where you must approve, download, install, and launch the app before logging in, accessing the system, then returning to the original alert to start again.

2. A microscopic "continue in mobile web" link which performs the action.

There's nothing wrong in having an app which offers more functionality or a slicker UI than the website (even though some just collect more personal data!) But promoting that app at the start of every interaction is frustrating. Some users may install it to stop the nagging but others will unsubscribe.

Consider offering the app infrequently at appropriate times. Perhaps give up if the user shows zero interest after a dozen prompts.

8. Strange Shopping Cart Additions

A list of related or recommended products can be useful … adding them to the user's cart without their consent is not!

• At best, a small proportion of users will notice the extra item and decide it's useful enough to buy.
• A larger proportion will remove it.
• Some will not notice and a proportion of those will demand a refund.

These activities increase sales at the expense of customer support, goodwill, and ongoing return purchases. Dealing with complaints and refunds can wipe out any short-term profitability gains.

9. Supernatural Stock Scarcity

It's useful to know when an item's in-stock but some sites stretch the credibility to breaking point. The more information they give, the less believable their claims:

"BUY NOW! 1 item in stock, 26 were bought today, and 423 people are viewing!"

You can even encounter these high-pressure tactics when buying infinitely-available digital products.

Users soon become suspicious when items remain in stock for many days. Will they reconsider their purchase when they cannot trust the marketing messages?

10. Creepy Cookie Cancellations

The EU's General Data Protection Regulation (GDPR) requires sites to show opt-out options for non-essential cookies and other tracking technologies. Other countries have similar rules.

Most site visitors click "agree" and move on. Opting out should be just as easy yet some sites require you to:

1. wade through pages/tabs of jargon before finding the options
2. click hundreds of opt-out checkboxes, and
3. wait for up to a minute while they "process your preferences" (manually, perhaps?)

These dark patterns are on the fringes of legality so be wary of fines or increased lawyer costs. Making it difficult to opt-out also gives the impression you have something to hide.

11. Woeful Web Performance

httparchive.org reports that the average web page takes seven seconds to load on a desktop device, twenty seconds on mobile, makes 70 HTTP requests, and downloads more 2MB of data. websitecarbon.com claims that every page view emits 1.3g of CO² into the atmosphere.

No one wants a slow site but adding features is often a higher priority than addressing performance. Given it's possible to create a playable Quake clone in 13Kb, you have to question why two paragraphs of text on an "About us" page requires 154 times more code?

Addressing performance requires a combination of techniques but there is one rule to remember: don't send so much stuff!

12. Scary Social Media

Social media widgets such as "Like" buttons look innocent but each one adds hundreds of kilobytes of JavaScript code to the page. It affects performance and is a security risk given they run with the same permissions as the site's own JavaScript. The widgets track users even if they're not clicked -- which they're not. Fewer than 1% of people will click one.

The widgets are also unnecessary. Social media sites provide standard "sharing" links which are lightweight and have no performance, security, or privacy risk:

• Email: mailto:?subject=[title]&body=[url]
• Twitter: https://twitter.com/share?url=[url]&text=[title]
• Facebook: https://www.facebook.com/sharer.php?u=[url]
• LinkedIn: https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Reddit: https://reddit.com/submit?url=[url]&title=[title]

[url] is the current page URL and [title] is the main heading. You could open them in popup windows like the real widgets but it's up to you.

13. Chilling CAPTCHAs

Completely Automated Public Turing test to tell Computers and Humans Apart help to prevent bots from accessing or scraping web systems. You may be asked to enter indecipherable text or click squares which contain buses. (Does a coach count? What about a toy bus? Is there a bus in the distance out of shot?!)

CAPTCHAs have three problems:

1. They're difficult for able-bodied humans with 20:20 vision. How do those with visual or other impairments cope?
2. They must become more difficult as AI techniques improve.
3. They place the onus for security on users -- not the site owners who benefit most!

CAPTCHAs are overkill on most websites. Better alternatives include:

• Hidden honeypot fields which block form submission when bots add data.
• Checking that keyboard events such as input or keydown fire appropriately.
• Checking the time it takes to complete and submit a form -- a human will take more time than a bot.
• A two-stage submission process which asks the user to confirm their data before it's sent.

These methods are easy for humans but halt the majority of bots. It becomes necessary to reprogram them with techniques specific to your site.

The Weird Wide Web

The web is a fantastic resource but dubious practices can taint user experience. Sites use dark patterns because they work -- but they're only effective over the short-term. Visitors eventually become wise to the techniques and go elsewhere.

Avoid confusing people, build trust in your brand, and you'll retain customers without having to resort to dark patterns.

Happy Halloween!