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.
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.
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.
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 #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.
Spooky Dark UX Patterns is a post from CSS-Tricks
