[HN Gopher] Show HN: Interactive game teaching dark patterns in ...
___________________________________________________________________
Show HN: Interactive game teaching dark patterns in UX design
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.
Author : rohandehal
Score : 167 points
Date : 2025-01-17 14:23 UTC (1 days ago)
(HTM) web link (games.productartistry.com)
(TXT) w3m dump (games.productartistry.com)
| maalber wrote:
| 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!
| rohandehal wrote:
| 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.
| yakorevivan wrote:
| This is very well built. And beautiful to look at too. Congrats..
| rohandehal wrote:
| Thank you so much for the kind words!
| orphea wrote:
| 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.
| jagged-chisel wrote:
| I think you have successfully discovered meta-education on dark
| patterns.
| rohandehal wrote:
| Haha! "You were supposed to stop the dark patterns, not join
| them."
| rohandehal wrote:
| Thanks so much for the feedback--it's super helpful! Persisting
| progress between mobile and desktop is definitely on my
| roadmap. As for the lesson timer, I've just updated it to 5
| seconds as a quick fix while I work on a better long-term
| solution for completing lessons. Appreciate you pointing that
| out!
| darcien wrote:
| 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.
| rohandehal wrote:
| Thanks for helping identify my first ever hotfix! There was
| bound to be an issue given this is my first real solo web
| development project - the background animation was causing the
| CPU issue as I immediately suspected. I've just pushed a fix
| that resolves this, along with extending the completion timer
| to 5 seconds for better readability. This timer adjustment is a
| temporary solution until I can implement a more configurable
| system.
| throwaway127482 wrote:
| Something is still not right for me. The scrolling is
| extremely janky. I'm on mobile so can't check devtools right
| now, but I would open up Chrome's Rendering tab in devtools
| and check for excessive layout recalculations and such. Maybe
| also do some performance profiling
| bbm1 wrote:
| 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
| technothrasher wrote:
| 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.
| FloorEgg wrote:
| 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.
| powersnail wrote:
| 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 wrote:
| "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"
| robertlagrant wrote:
| Yes, I came here to say that. "Wish" definitely does not create
| a negative, and ticking the box is the correct thing to do.
| probablybayesed wrote:
| I'd say you shouldn't tick it. By ticking it they may grant
| your wish to opt-out.
|
| They send emails > you opt-out > wish fulfilled > you're
| welcome.
| Vampiero wrote:
| 5 bucks say it was written by a LLM
| IggleSniggle wrote:
| 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.
| matthuggins wrote:
| 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!
| gs17 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| rohandehal wrote:
| Thanks for the detailed lesson feedback! Developing the game
| piece by piece made it harder to step back and see how the flow
| worked as a whole, and I can see where the gamification falls
| short.
|
| For the next update, I'm planning to streamline the flow so
| that all patterns reinforce positive actions and avoid
| rewarding the wrong behaviors. I also want to separate the
| educational aspects more clearly to make the goals and outcomes
| easier to understand. Your insights will definitely help guide
| those changes--thank you again for sharing!
| nelblu wrote:
| Very cool! I interacted with the first few pages and I am going
| to share this with my friends so they can learn how to avoid the
| dark patterns.
| rohandehal wrote:
| Glad you enjoyed it! Hearing this means a lot and motivates me
| to keep improving it.
| exogeny wrote:
| That was really well done. Nice work!
| rohandehal wrote:
| Thank you, I really appreciate it!
| pmontra wrote:
| Well done.
|
| From a technical point of view the page scrolls a little slowly.
| I'm on Firefox for Android and it's usually faster than that.
| However for those scammy sites slowness is par for the course. It
| adds to the realism of the experience.
| rohandehal wrote:
| Haha, thanks for the heads-up about scrolling! Definitely not
| intentional realism, but hey, I'll take the happy accident.
| NotAnOtter wrote:
| Fantastic idea, the UI of the site is clean, I think the actual
| content itself could use some improvement.
|
| After opening the site I had to "fail" a couple just to
| understand what the user goal even was. I recognized the
| fake/misleading UI but still wasn't sure what to do with that
| information.
|
| I think you should take this exact concept, do some user studies,
| and come out with a V2. There's a market for this. My
| grandparents are getting to the age where I don't really trust
| them with access to their own credit cards / operating the web, I
| frequently come over to fix their computer and it's just
| extensions they've unintentionally installed. If this was
| iterated on & repackaged as either a educational course or a
| "test" to see if they are "safe on the internet", I would pay
| money for it.
|
| And on the other end, it's well-proven at this point that tech
| literacy for the average person peaked somewhere around people
| born in 1985-2000. Before then, people grew up without as much
| access to tech. After that, people grew up in an environment
| where common tech problems were already solved. (A 10 yearold in
| 2012 wasn't dealing with corrupted disks, they were playing on an
| iPad). Offering this concept as a course targetted at the age
| range could be good.
| rohandehal wrote:
| Thanks so much for the kind words about the UI and concept!
| I've gotten a lot of feedback about improving the gamification
| and making the user goals clearer, and it's something I'm
| really targeting in the next iteration.
|
| I really like the idea of turning this into an educational tool
| or test, especially for younger or older audiences who need
| help with tech literacy. It's a great use case and definitely
| fits with where I want to take the project. Thanks again for
| sharing--it's super valuable!
| csallen wrote:
| 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 wrote:
| 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.
| pointedAt wrote:
| addidition to 1.
|
| before it all begins, have a few modals do something like
|
| "Your are being fucked with. The economy has a secret system: A
| machine that spies on you every hour of every day. I know that
| because I designed some really fancy parts of that machine. To
| abuse your gullibility, to exploit your cognitive fallacies. To
| prime you, to nudge your bias. All in favor of the portfolio,
| of enshittification. You don't feel it that much. While others
| benefit from something you just don't know yet. This is getting
| worse and worse until your child, your sibling, your loved one,
| ends up on a public pole. As a street stripper, begging and
| twerking in order to be able to pay for the enshittifiers
| monthly subscription that they need to do 30 mins of
| maintenance and updates per month. While having 10000 paying
| subscribers. On this application alone. With 40 % not even
| using 90% of the features. But that's their fault. They don't
| know."
| batch12 wrote:
| The pipeline from popups to prostitution? Talk about a
| slippery slope...
| loloquwowndueo wrote:
| Kudos on the Person of Interest intro references.
| rohandehal wrote:
| 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.
| kittikitti wrote:
| Thank you so much for this! I think this is informative and
| relevant.
| rohandehal wrote:
| Thank you! Glad you liked it.
| immibis wrote:
| The gamification of the "levels" starting with "Misdirection"
| doesn't really make sense to me. After the first few "levels"
| you've established how the game works: the player has to click on
| the button that opts out of the bad stuff, and gets a green box
| (success). Opting into the bad stuff gives a red box (fail).
|
| But then suddenly you switch it up: the player is forced to opt
| into the bad stuff, so you can give a guided tour through the bad
| stuff. You still give red failure feedback for all of this, but
| you also give red failure feedback if the player opts out of the
| bad stuff, since you were trying to get them to see it.
|
| Even after this point, some levels work the original way where
| you have to opt out of bad stuff.
|
| Again on "Basket Sneaking", the goal is to remove items from the
| cart, but when removing items from the cart, you give red
| failure-like feedback.
|
| On "Privacy Zuckering" the "Show details" are not anything you'd
| see on a real website. Here the idea that you're giving a guided
| tour clashes with the idea that you're showing us a mockup of a
| real app.
|
| This reply was delayed by a few hours due to HN rate limiting.
| rohandehal wrote:
| Thank you for the super detailed feedback--this is incredibly
| helpful!
|
| Other comments have highlighted similar issues, and I
| definitely see the need to re-work the lessons to maintain a
| more consistent positive action pattern.
|
| Balancing guided exploration with clear player expectations has
| been tricky, but your input gives me a lot to think about.
|
| Thanks again-really appreciate you taking the time to share
| this.
| maupin wrote:
| I think your UI could use some work, funny enough. But I like the
| concept, it's just that the way the page and "game" works is not
| exactly clear.
| rohandehal wrote:
| Appreciate this! It's clear there's a lot of room to make
| things more intuitive. I'll definitely focus on improving the
| clarity and flow in the next iteration.
| avree wrote:
| The forced 5 second wait time is killing me. Why not just let me
| click between the puzzles? Also feels like a left-to-right
| orientation would be easier to browse, as opposed to the mobile
| style stacked cards.
| trw55 wrote:
| Yes. I tried to click on that twice; the first time within the
| text of the toast button and then on the right chevron. I
| really hate having to wait when it's arbitrary and doesn't add
| anything to the challenge.
| Animats wrote:
| Oh, that's great!
|
| And then, at the end, there's an onboarding funnel for the
| author's paid Substack, which has several screens of dark
| patterns. I put "uce@ftc.gov" in the email box.
| CM30 wrote:
| So, am I the only one who finds it kinda amusing that right after
| a game about avoiding dark patterns, we get a Substack email sign
| up that seems like it's subtly trying to manipulate you into
| using it (the bouncing arrow, obvious border/highlight/etc)?
|
| But as far as the game itself goes, it's good, but kinda
| confusing in its design. Sometimes it seems like you're meant to
| show you won't fall for the tricks by clicking the right option,
| whereas sometimes you're forced to do the wrong thing first so
| the game can explain why it's the wrong choice. It'd be better if
| you just had to do what was needed without clicking the
| wrong/misleading option, since it'd be a better test of your
| ability to recognise online manipulation.
|
| Also the delay between each puzzle felt really arbitrary, not
| gonna lie. Don't know why I'm forced to wait 5 seconds between
| rounds.
| zb3 wrote:
| The game is good but it's missing a level where you need to
| uncheck 500 checkboxes which are hidden behind the "legitimate
| interest" dropdown..
|
| To me, there's one thing worse than dark patterns - no real
| choice at all, and this is what FB/Instagram does with its "pay
| or okay" approach and I can't figure out how is this even legal
| here.
| deskr wrote:
| I like this. We should have a community site that scores websites
| based on how many dark patterns they use.
| rglover wrote:
| 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.
|
| Touche?
| yowayb wrote:
| Cool game, but it's an infinite arms race, plus bugs. It's
| important, as an individual, to approach every interface
| carefully, even one's you're already familiar with.
| omnivore wrote:
| Dark patterns as a name needs work anymore, but I like the
| general premise of this and think it could be cool for people
| learning this stuff for the first time. Good work conceptually.
| ablation wrote:
| I believe the general consensus is now to call them "deceptive
| patterns".
| magnat wrote:
| Similar vibes to https://userinyerface.com/
|
| Also, for some reason, hogs 100% CPU recursing like hell between
| two methods: o0 [https://games.productartistry.
| com/_next/static/chunks/4bd1b696-98e9308c101e0794.js:1:90345]
| o2 [https://games.productartistry.com/_next/static/chunks/4bd1b69
| 6-98e9308c101e0794.js:1:90778]
| rohandehal wrote:
| That game really is the final boss. I'll dig into the recursion
| issue and get it fixed - Appreciate you taking the time to flag
| it!
| hulitu wrote:
| > Show HN: Interactive game teaching dark patterns in UX design
|
| One doesn't need a game. Android or Windows are live example of
| bad UX design and dark patterns.
| TwoNineFive wrote:
| Lots of poor judgement here. Needs maturing. I suspect there's
| some non-native English speaker problems here too.
| dostick wrote:
| The test itself has UX mistake. The "Next >" countdown appears as
| a button but it's not. It does not appear to be clickable, does
| not progress to next screen when you click on it.
| alwa wrote:
| On Question 3 (Misdirection)--why is clicking "no thanks, I
| prefer a limited experience" the wrong answer? Why should I click
| the stuff I don't want just in order to "learn about it"?
| throwaways85989 wrote:
| Sure thing hoss, just because we know where the minefields are,
| we as individuals are now empowered to take hyper-focused walkies
| again. No need to fight those that lay mines.
|
| No need for any real action, to change the government and force
| bad actors out of the game forever via a justice system. Just
| stay divided a little longer, stay under the thumb a little more,
| believe in privatized problem-solutions overcoming systemic rot.
|
| Liberal slob propaganda trying to stave of the overdue violent
| riots against the dystopia its spreaders built.
| keb_ wrote:
| Awesome. Capitalism has turned the internet into the best it can
| be!!!
___________________________________________________________________
(page generated 2025-01-18 23:02 UTC)