Show HN: Interactive game teaching dark patterns in UX design

#1

Post by rohandehal » Fri, Jan 17, 2025, 2:23 PM UTC

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.

Show HN: Interactive game teaching dark patterns in UX design
games.productartistry.com

Re: Show HN: Interactive game teaching dark patterns in UX design

#2

Post by maalber » Fri, Jan 17, 2025, 2:56 PM UTC

It is actually a really cool idea! Why i tried it out however it is not always clear to me which parts are the 'game interface' and which parts are your 'tooltips'. Not sure if this is intentional though

I was also just about to complain that you shared something to Show HN that is behind a subscription - then I realized that was part of the experience!

Re: Show HN: Interactive game teaching dark patterns in UX design

#3

Post by yakorevivan » Fri, Jan 17, 2025, 3:05 PM UTC

This is very well built. And beautiful to look at too. Congrats..

Re: Show HN: Interactive game teaching dark patterns in UX design

#4

Post by rohandehal » Fri, Jan 17, 2025, 4:09 PM UTC

maalber wrote: post #2

It is actually a really cool idea! Why i tried it out however it is not always clear to me which parts are the 'game interface' and which parts are your 'tooltips'. Not sure if this is intentional though I was also just about to complain that you shared something to Show HN that is behind a subscription - then I realized that was part of the experience!

Thanks for trying it out and for the feedback, it's really helpful! The blur between simulation interface and the tooltips/guidance is one of the design challenges I've been iterating on. It's been something I'm actively working to improve for both this game and future ones.

Haha, that's gold! I was a bit nervous about putting the subscription pattern as the first question, but went with it since it's so relatable. Really glad it created that "aha!" moment where people realize they're experiencing what they're learning about.

Re: Show HN: Interactive game teaching dark patterns in UX design

#5

Post by orphea » Fri, Jan 17, 2025, 4:59 PM UTC

I liked the idea! However I do have a few pieces of feedback

1. Switching between mobile and desktop modes resets the progress

2. When I complete a lesson, an explanation is given but I'm given just a few seconds to read it, and then the game forcefully continues to the next lesson. Sometimes I could miss the explanation.

Re: Show HN: Interactive game teaching dark patterns in UX design

#6

Post by jagged-chisel » Fri, Jan 17, 2025, 5:05 PM UTC

orphea wrote: post #5

I liked the idea! However I do have a few pieces of feedback 1. Switching between mobile and desktop modes resets the progress 2. When I complete a lesson, an explanation is given but I'm given just a few seconds to read it, and then the game forcefully continues to the next lesson. Sometimes I could miss the explanation.

I think you have successfully discovered meta-education on dark patterns.

Re: Show HN: Interactive game teaching dark patterns in UX design

#7

Post by darcien » Fri, Jan 17, 2025, 5:06 PM UTC

Nice game! Seems like someone already gave the feedback about the lack of time to read the explanation before the game progressed automatically.

BTW something on the game is making my CPU go 100%. I'm on Firefox, Linux and in the JS console I can see "Unexpected value translate(52.460687992082626%, 52.24894125700998%) scale(1.0398801892701597) parsing transform attribute." warning being printed nonstop.

Re: Show HN: Interactive game teaching dark patterns in UX design

#8

Post by bbm1 » Fri, Jan 17, 2025, 5:25 PM UTC

  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

Re: Show HN: Interactive game teaching dark patterns in UX design

#9

Post by IggleSniggle » Fri, Jan 17, 2025, 5:28 PM UTC

Very cool interactive, nice work! I think your progression probably works well on desktop, just turn off the "auto scroll to next activity" on mobile devices where it's impossible to see the message without scrolling back up to it... and maybe stick the message right below the last place the user clicked.

Also, I didn't really understand this one, where the phrase in question is "I wish to opt out of receiving exclusive promotional offers and updates about products I might be interested in." How does unchecking this result in an opt out? I can't figure out how to read this to make "[x]" mean anything other than "opt me out of offers and updates."

>

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

Edit: oh I see. I got confused by the triple negative! The "correct" answer is indeed to keep it checked, but the instructional aspect of the page as a whole implies that you need to uncheck the box to have succeeded (aligning with the mistake). I think starting with the box unchecked might be a little more clear for the purposes of demonstrating.

Re: Show HN: Interactive game teaching dark patterns in UX design

#10

Post by matthuggins » Fri, Jan 17, 2025, 5:29 PM UTC

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

I legitimately think the phrasing on this one is wrong if you're expecting unchecking it to be the way to avoid a dark pattern. The follow-up explanation is written as though there's a double negative, but there isn't one here.

Other than that, fun project!