[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 : 88 points
Date : 2025-01-17 14:23 UTC (8 hours 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..
| 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.
| 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.
| 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.
| 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.
| exogeny wrote:
| That was really well done. Nice work!
| 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.
| 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.
| 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.
| kittikitti wrote:
| Thank you so much for this! I think this is informative and
| relevant.
| 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.
| 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.
| 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.
___________________________________________________________________
(page generated 2025-01-17 23:00 UTC)