Spooky Dark UX Patterns

Since Halloween is coming up, I thought I’d go through some things I’ve seen implemented on sites that sent a chill down my spine. Dark UX Patterns are things built for the web that are really bad for the user, and actually take time and care to build.

Modals

(Unexpected) modals are the spookiest pattern of them all. They are my personal least favorite UX pattern, because they instantaneously break focus and spatial awareness while your brain is trying to understand and map the UI. I tend to close them immediately as an annoyance, sometimes to realize I needed the information in them. They are an example of what I call “brute force UX”, the idea behind which is an example of thinking that’s a bit too lateral: “we need the user to see this, we’re going to totally disrupt them to force it in their faces”. Modals that a user triggers aren't so bad, as they initiated an interaction, but modals that appear on a timer out of nowhere are distracting and can be infuriating.

All of this aside, the scariest thing about modal interstitials is how bad they can be for the blind. This video below reminds me of the scene in a movie where the girl is walking into the closet but you as viewer know the killer is in there:

To help solve this issue, if you do have to use a modal for interaction, please take care to make the contents available to screen readers. If you move their focus position, make an effort to help them recover where it was, as explained in this article and video. They even have a lesson at the bottom to help you learn. Super cool.

Developers (and even designers) sometimes don’t get a say in this because it affects conversion, but it's worth standing up for.

Unsubscribe Links

I recently hit a point where I couldn’t even find my actual emails anymore because I had so much promotional mail, none of which I actually manually subscribed to, bulking up my inbox. I took an afternoon and went through each one and unsubscribed to all of them. This process was pretty enlightening for me. It was amazing to me how often people made the unsubscribe button illegible and inaccessible. Once I clicked it, about half led me into a crazy user circle of page after page of “are you sure?” content, some becoming progressively more aggressive as I tried to opt out.

I don’t doubt that these implementations came from a metric ton of user testing for retention and that’s perhaps the most bothersome part of this dark UX. Instead of funneling our minds and time and energy into building products that are so useful that users will want to return to our sites, we’re wearing people down until they say “oh well” and stay subscribed. This is dark UX at its root.

The worst one I found was an email list that said they were contacting me because “Heather says you’re great!” (I don’t know a Heather). When I clicked on the #eee on #fff unsubscribe list at the bottom, I was taken to a page that said they didn’t currently have my email on their list yet, but don’t worry, they just subscribed me! ...uhhhh...

Code cut and paste trap

I wouldn’t call this one a “pattern” as I’ve only seen it once, but it was so memorable I thought I’d include it. I was recently searching for a way to use e.pageX with a touch device, so naturally I turned to my good friend Google. After a bit of searching around, I found an article that seemed to have an elegant solution. When I went to copy a bit of code out of the example to play with, it opened a new page with a giant ad. I tried again - same thing - a new page with another ad. The ad sharks had paid them handsomely and I was the clickbait guppy.

Though this pattern isn’t common, I think it is pretty common that you try to interact with a page and either an ad begins obscuring content as you touch, or it takes you to a place you don’t expect (sometimes triggering one of those modals I spoke of earlier). I’d argue any time you create a situation where a user calls for some interaction, and you bait and switch them into something else, it’s a dark UX pattern.

I also think that this tends to be where “we used data” fails as well. If I am tricked into clicking on something and your clickthrough rate goes up, those data points might look high but you’d better bet I’m leaving your site and not coming back unless your product is something I need in order to breathe.

Happy halloween! Thanks for joining us in this scary foray into the darkest of UX patterns on the web. There are many more too! If you have any more to add, link them up in the comments.

Related

Comments

Related to copy/paste, one of my least favorite things is when you select text, copy it, then paste it only to find that they’ve inserted some extra crap onto the clipboard you weren’t expecting. Perhaps not as dark as some of the others, but absolutely obnoxious.

Hoooly moly that’s annoying. See also: attempting to select something only to be forced to highlight the entire chunk with no way to deselect the irrelevant bits (Google fonts used to be a big offender there). Just me do my thing, yo.

I’m sure you could get a lot fancier, like by avoiding inline event handling, and considering the “OK, I’ve clicked into you and you selected your text, I get it, now stop doing that so I can only select a part of you” – which is certainly possible.

Nothin’ wrong with selecting everything initially— it’s when you can’t change it afterward that it’s a pain.

Dark patterns aren’t generally considered to be merely annoying UX patterns but deliberate tricks to make the user do what the site wants rather than what they want. On that basis I wouldn’t really include modals as they are simply an annoying way to show content.

I hate them with a vengence but I would have left them out on that technicality.

Nice read! I used to come across another dark UX pattern of scripts adding “Read more: <article URL>” after any text I copy. This usually happened on news sites, and now I can’t name a site that still does it anymore. I guess they finally realized users were sick of it.