remix logo

Hacker Remix

Show HN: Interactive game teaching dark patterns in UX design

108 points by rohandehal 11 hours ago | 45 comments

I built this educational game to help people identify and understand dark patterns in digital products. It features 10 interactive scenarios based on real-world examples.

The game includes:

• Interactive pattern recognition scenarios • Explanations of psychological principles • Simulated real-world examples with guided feedback

Built with Next.js, TypeScript, and Tailwind.

I'd especially appreciate feedback on the educational approach and scenario design.

csallen 6 hours ago

Cool idea, pretty good execution, but your UI is confusing.

1. There's so much happening on the screen between your app's UI and the fake UI with the dark patterns that it's confusing. IMO you should show the objective first, and then let the user click to reveal the fake UI and challenge. For example, simply show, "Challenge #1 — Find the button that actually lets you cancel the subscription." Then have a button that says, "Start Challenge." When that button is clicked, then reveal the UI.

2. Give me some context. If you just say, "Find the button that actually lets you cancel the subscription," that's not really enough. You should set the scenario. "Imagine you're subscribed to an app, but you don't want to be subscribed anymore. So you sign into the app and click the cancel button. It loads a new screen. How do proceed from here to finalize your cancelation?"

3. Don't tell me the answer in advance. Naming the first challenge "Color Confusion" tells me the answer.

4. Don't auto-advance steps. I had no idea that I auto advanced. I changed tabs, then came back, then was scrolling down looking for the next step button. Just let me manually click to the next step as a user. Preferably at the bottom, near the pattern explanation.

LocalPCGuy 4 hours ago

Just adding on to number 4 - I didn't realize there was additional information explaining the pattern further below the interactive challenge for the first couple steps. When completed, it should then show the explanation and a button to continue.

rglover 7 minutes ago

While this was helpful and well done, I find it incredibly amusing that after I popped in my email, I was hit with very similar dark patterns trying to get me to pay for a Substack subscription, follow people, and share it.

Touché?

bbm1 8 hours ago

  I wish to opt out of receiving exclusive promotional offers and updates about products I might be interested in.

  What this means:
  When checked: They will send you marketing emails. Uncheck to stop promotional emails.

  How it tricks you:
  They use 'opt out' and 'wish' to create a double negative - saying no to opting out means saying yes to emails
Fun stuff! But I'm really unclear about this particular checkbox on lesson 9 - in my eyes, wishing is not a negative - so this is a single negative, and you would check it to not receive updates

powersnail 8 hours ago

The worst offender I've seen in this regard was some GUI program on Windows, and it had this checkbox in its installation process with some wording like this:

"Please do not uncheck if you do not wish to not install XXX (bundled bloatware)"

I just assumed that the default state must be installing the bloatware, and changed it, and fortunately I was right.

lukan 7 hours ago

"I just assumed that the default state must be installing the bloatware, and changed it, and fortunately I was right."

That's how it is usually and also my way to navigate modern UI.

"No, I don't want to share all of what I do on my device with you and your 800 partners"

FloorEgg 8 hours ago

The double negative is incorrect, but perhaps the negative "opt out" is being a bit obfuscated by the "wish".

It's been common for these types of questions to say something like "I wish to receive exclusive offers..."

So this phrasing is a little bit tricky in that if someone doesn't read it carefully they will think checking the box is saying yes to marketing spam, when in reality it's the opposite.

Vampiero 2 hours ago

5 bucks say it was written by a LLM

technothrasher 8 hours ago

It would seem to me that "I wish to opt out" doesn't make it clear whether you actually opt out or not, simply that it would be your desire. So checking or not checking wouldn't make any difference, as neither way is answering the actual question of opting out.

gs17 8 hours ago

It's a nice game but I have some feedback:

The first two levels want you to click the non-misleading option and then the third requires you to click the misleading option, which then has a "Report as Deceptive Marketing" button. This feels counterproductive if you're trying to teach people to not fall for dark patterns, you've just rewarded them for falling for it and punished anyone who didn't!. Then, a later level has the opposite, you see (almost) the same dialog from level 3, but you need to click the other option.

The instructions for Level 3 do say you're supposed to "find the hidden truth", but that's not necessarily what clicking the "Activate Premium Features" button would do in real life. I think it would work better if it stuck to one side of things, probably having players always try to avoid getting misled. At the end it says one of the outcomes should be "Improved muscle memory", so the goal should probably be no clicking on bad things.

This also makes it confusing what it's supposed to be simulating to me. I've never had a site offer to let me report their own promotions as deceptive (or as a later level has, "Report Bait and Switch Tactic" when you go to check out).

The "Trick Questions" level had only pre-checked checkboxes that you should uncheck (and the button tells you to uncheck all of them, there's no thought required here), I think it would work better if some needed to remain checked. It ties in to the same "muscle memory" issue, unchecking isn't guaranteed to be a good action. Similarly, it might make sense to have Basket Sneaking include a coupon code or something that you shouldn't remove from your cart, so players learn to read closely.

jay_kyburz 6 hours ago

Yes, I stopped at question three because just lying is not what I consider a dark pattern. The three check boxes are not giving the site permission to do what you say they will do.

"Unlocking exclusive and premium content" doesn't mean it will always be promotional content. The exclusive content has just as much chance as being an ad as the rest of the content.

"Personalized deals just for you" is not a dark pattern. That is basically just asking if you want to see more ads. That's a light pattern,

"24/7 support" presumably means you will get some support. If they share data with folks who are not support folks, then that's just lying.

CM30 3 hours ago

Yeah this confused me quite a bit too. I thought the point was to spot the misleading options and avoid them/do whatever was necessary to fix the sneaky tricks the site pulled, not deliberately fall for it to find out why it's misleading.