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.
(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.
Google agrees. They recently announced that they would start knocking SEO points for timed modal popups on mobile. Marketers are already having to adjust product timelines to avoid the penalty, which, as a user, I’m grateful for.
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:
There’s more information on why modals are so bad for the blind in this article.
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.
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.
Lea Verou created a tumblr of ridiculous unsubscribe links, some are quite funny, and it’s pretty entertaining to go through them.
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
#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 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.
sounds like he’s calling you out Chris, article.
This is a short example of how (as a user) I would any ‘auto select’ feature implemented. Let me do what I’m doing, but offer to help me do more. Don’t stop me, don’t interrupt me, don’t force me.
Seems I can’t embed the gif. So here’s a link instead
That article actually addresses my exact gripe:
Nothin’ wrong with selecting everything initially— it’s when you can’t change it afterward that it’s a pain.
Great little article. In relation to the code ux pattern, I love that this site just uses embedded codepen snippets. Then I can go directly to the codepen page and play with the code there if I want.
Paste jacking can be dangerous too. Especially if you just going copy and paste directly into terminal/command prompt
Be careful with copy and paste. Folks can insert malicious code into what you’re copying. So don’t copy and paste directly into the terminal without checking what you actually grabbed. http://thejh.net/misc/website-terminal-copy-paste
People actually click on Unsubscribe links nowadays? I guess Google’s automatic unsubscribe button has some of us spoiled. :)
I think that’s only on mobile?
*desktop – DOH!
I’ve never clicked the “unsubscribe” link on an email I didn’t sign up for. While it may do what you want, it confirms the email address as valid so it can be sold to someone else.
Yeah, definitely agree with this. I just mark it as spam / add it to the list of auto-delete.
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.
it’s very useful and learn me the basics in a right way