Yup, that’s where I stopped. The fact that most correct is a dark pattern means there’s likely other bad lessons in this exercise and I’d rather just stay away.

So I read your comment first (that you stopped), went doing it, ended up stopping at the very same point. I felt disgusted.

I agree the style itself isn't very good but I think the "lesson" was in differentiating primary and secondary actions to make it obvious

Still wrong. As was the one where half the guitar is cut off to “fill the space”. It’s like zooming in on a 4:3 tv show and cutting the top and bottom off.

Same here. Stopped after this one because I kept being told that dark patterns were correct.

This site is a disservice to the entire field of UI design, not to mention the users. At the very least they could have explained _why_ de-emphasizing secondary options or cropping information out of photos is "more correct"

To the site author: your suggestions considered harmful, just give me my 90s-era UI design back, please.

Yes, I kind of bristled at the arrogant word "correct". Correct in what sense? What metric does the "correct" side boost over the "incorrect" one? How was correctness measured? Is it correct simply because it conforms to some document that some company wrote? Most of the choices to my eye are subjective and could go either way.

Then again, I'm not a UI designer. But I wonder what a UI designer thinks of someone boiling his/her design judgement down to a simple 'correct vs. incorrect' choice.

The "correct" would be just using different background. Hell, if you want to guide users put a gray background on skip option at least.

The page instead just makes it white, like it wasn't a button at all and we can only guess by the word only making sense for button

You fill the space so that in a screen with 20 of those cards, they all have the same visual weight, no random dispersed white blocks. The purpose of the picture at this point is decoration to identify a product type, not showing you details of the guitar - you'd see that once you open the product page. Your comment is like complaining that an A3 poster for a TV show doesn't show the full scene.

In a website context I think you're wrong, using a scale instead of a crop would result in every image on your page having a different aspect ratio, since the uploaded images probably don't have size constraints.

That would look absolutely whacky. Especially in responsive design, where the aspect ratio of the parent container changes with screen width.

The difference is that thumbnail images aren't TV shows, it doesn't really matter if the image is cut off. Its not supposed to have literal information, its just a contextual hint of what that element is doing / is related to.

The concept of primary actions is the dark pattern - as a general concept, maybe it's useful to have tiers of actions by complexity, picking actions for your users is the dark pattern.

Using color to differentiate actions is OK, if you are doing styling actions those are different than, say, templating actions.

Promoting obfuscation or misdirection as good design is inexcusable.

Since no-one else in the comments seems to have pointed this out, I'm pretty sure these are all examples from real apps, which is how they're deciding which is correct.

It's not so much about choosing the "better" design (although in most of these cases one of them is objectively better), but choosing the design used in the real app.

No, it's about picking the option more coherent with UI and design best practices.

There's one where the A option is an input with sharp corners, and the B option is the same input but with rounded corners. Which one of these is 'correct'? And why is it a 'best practice'?

Same here, had everything right until Skip button when they chose dark pattern is correct approach to not give user clear options, which I call BS. Stopped test right there.

Ideally it should be regular button with outline and some greyish color, but not completely hidden button.

Btw. quite easy for someone working in QA.

So, that it would seem like the Skip button is disabled? I'm not sure that's an improvement.

Same intensity of text with gray background for skip, greyed out text for "disabled" button would probably make most sense

It can be used for a dark pattern, but the example seemed to be from a chat app, which I guess you just signed up to. Isn't it then more guidance through the expected flow? You just signed up to chat, let's make sure you can chat?

whether its an actual app or not, a some of it is more design opinion than design fact

It's a poor example, it probably should have been something like a default option or a potentially destructive one. In the wild, the "dark pattern" mode I see more often is when the option isn't even a button or presented alongside the default choice. (e.g., "DO THING" is a button, but "skip" or "cancel" is elsewhere on the page entirely as a small link or something.)

Came here to say the same. Thank you.

I came to say exactly this: in my opinion the site's choice was very obviously wrong.