←back to thread

179 points rohandehal | 1 comments | | HN request time: 0.271s | source

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 context
csallen ◴[] No.42742160[source]
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.

replies(3): >>42743488 #>>42746999 #>>42751452 #
1. rohandehal ◴[] No.42751452[source]
This is fantastic feedback—thanks for taking the time to share it! I’m updating the flow so users see the objective first and can click to reveal the challenge and then the learning objectives. Leaning more into the simulation aspect and adding real-world context should help clear up much of the current confusion in the game design.

Auto-advance has already been removed in my WIP branch based on overwhelming feedback, and the new stage-wise approach works much better.