> randomly selected the last ten or so on hard and got more than half of those right
Me too. Sometimes, things just looked nicer without really knowing what was wrong. Goes to show the power of subconscious perception. TBH, this activity elevated my perception of UX and QC work a lot. This can be hard stuff.
On the other hand, sometimes I felt like I saw color differences that weren't really there.
One stood out to me, where you could give the "skip" button the same blue border as the "invite friends" button, but that would be flagged as a mistake. Leaving "skip" deemphasized and hardly identifyable as a button was the "correct" solution.
So I guess this dark pattern is now being elevated to a design best practice...
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.
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.
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.
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.
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.
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.
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.
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?
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.)
I think the "incorrect" examples are too obviously wrong for this.
Unless only the "hard" section is the crowdsourcing part and the previous sections are a qualification exercise to determine a weight for your votes. Hmmm...
Yeah, it compared a previously identified wrong image with a blue dot for online versus a guitar with an improper aspect ratio (which was the "wrong" image).
Well, user submitted content is going to have to have all sorts of weird aspect ratios. So what's the plan - clip it arbitrarily?
That was my thought, too. I got all the easy ones correct, but only because I chose answers that looked familiar from using an iPhone, not, in many cases, because they were objectively better.
I couldn't find the information on the guidelines for these design ideas. For example are they based on the Google/Apple/other design docs?
Of course some of them are obvious, miss alignments etc, but subtle font decisions such as the "2 hours ago" for the last activity to my eye seems so much nicer.
My understanding is that macOS/iOS HIG specified at some point that search fields should have rounded corners, but other text fields should have squared-off ones.
Yes, the whole thing is super Apple-specific and doesn't make any sense outside of that context.
Even the "correct" examples are often incredibly bad.
A choice between two actions, where the action that most people will want to take doesn't look like a button and more like some misplaced text, while the option that people will only choose by accident is prominent and a proper button? The styles aren't even consistent. Like having a steering wheel only for left turns and a lever for right turns. Utter nonsense.
Two primary buttons stacked is just awful. I agree that transparent secondary buttons have issues, but two stacked blue buttons is pure shit so an easy choice.
It is shit because there is no such thing as two things being primary. It is perfectly okay to highlight the default choice, or not highlight any option, but having two default options makes no sense.
Can you provide an example of two primary button stacked near each other in a good design?
It's not about which action is highlighted and which action is not, it's about not having two primary action near one-another which goes against any UI/UX theory and best practice
What if both actions are equally valid? What does UI/UX theory say about that? Honest question here. I see how having two primary buttons would look ugly, but inducing the user to pick the choice they didn't want (because they were just pressing next and didn't stop to read the "skip" button in the small print) seems even worse UX to me.
Border radius is not 'correct design'. It's subjective design. There are places where `border-radius: 0px` works and places where it doesn't. Context matters more in design.
Since high res screen are becoming the norm, you could argue that border radius are becoming de facto the 'correct design' because it is a more friendly, inviting et legible shape.
What does the screen resolution have to do with it? Genuinely not sure what the relationship is. I could imagine sharp corners appearing more hostile when the pixels are smaller?
Higher ppi help for rendering curved lines cleanly without jagged anti-aliasing.
It's a known fact that typefaces that have curved, humane shapes are more legible. That is why it is bad practice to use something like futura for long text.
I am assuming rounded corners in boxes follow that logic.
Came here to post this, saw your post and went to agree instead.
Really though, some design aspects are objective, but some are not. The author of the page seemed to be relatively on point though about whats objective and whats not.
I dislike that this elevates, canonizes, design decisions out of context.
However, this is how we train machine learning systems. I enjoy this as a social or artistic commentary in that way. How would you like to be trained this way, or what do you learn from being trained this way.
It implies, all knowledge is a convention we adopt and the ability to match or reproduce it.
---
I can do what the task asks, almost entirely, score TDB, but it reminds me of surveys with rigged questions. It's technically correct, technically a majority of people answered questions in a predictable way, and "predictable" will be argued "correct".
Some of these are quite subtle. I've come around. I appreciate being faced with lots of side by side examples, and enumerating the number of good decisions design benefits from.
YES! I came here to say that. I pressed the option with both buttons being blue. Ugly? Yes. Respectful to me as a user? Very much yes. Making a dark pattern look good is not helping the user.
Insisting that "last seen 2h ago" online indicator being green and nothing else, requiring border radius for text boxes etc are not objective in any way.
As others mentioned there were dark patterns presented as 'more correct' - there were also several stylistic choices which are entirely subjective - a major one being border radius.
Yeah, it looks nice, but so do nice clean rectangular edges. This test is missing context, in that sense it is pretty subjective.
Some of the alignment issued were fairly objective, many of them were not, e.g. some vertical alignment ones. Ofc you want consistent alignment, but you simply can't look at two images to figure out what is 'correct'. That's a design decision.
Resizing the image of the guitar to fill the space was "correct" over showing the whole image. In the context of someone selling something, seeing the whole image before clicking through would be important, versus potentially having the object of the photo being cropped out entirely.
There were several where the text between the two appeared to be different, but resolved to the same during compare.
Well characterized. You've summarized here the more clear cut examples of smuggling meaning of "correct" by presenting them all in the same context, from "consistent alignment" to beknighted stylistic choice and further to manufactured consent.
Perhaps these claims are the result of A/B testing and measuring differential engagement. In which case: Cool! That we lowly internet addicts can guess or determine the most effective from design rules, aesthetic preferences, and stockholm syndrome (kidding, a little).
The icon consistency check is subjectively scored, as the "correct" version is undeniably bad design.
The solid camera icon is off-center (it looks smaller, mangled), but the hollow versions of the mic and camera effectively communicate if they are "on" or not and are sized correctly.
As sibling mentions, the issue is with overusing the default style. Another pattern could be to use a secondary outlined style, making skip as prominent as the default.
Jesus some of this "correct" examples are borderline unusable for people with colorblindness. I feel like I'm being a test monkey or a neural network that's being trained to use design guidelines that some X company chose, and most of the times their guidelines have nothing to do with generally good practices
Some of these are obvious, some of these are absolutely terrible. There are clear "correct" items in there, but those are all obvious accessibility issues. Many "correct" items are accessibility issues by themselves. Some of them are even clearly deceptive design/dark patterns.
I don't know who made this, but as a user I would certainly dislike their designs.
I love the "color of the status indicator" one because the "bad" option is literally how most "color blindness compatible" design variants do it. Instead of making red and green easier to distinguish or adding icons/patterns to color, they just use blue to replace one of the colors (usually green), which forces color blind people to guess what the color is supposed to represent or rather which expected color it replaces.
So by the literal text of this game, most "color blindness compatible" design variants are bad design, and as a severely green-blind person I agree with that.
I can do the cross eyed thing to overlay the images and spot the difference. Got 7930 in about 15 minutes. I think I missed one and guessed correctly on another. I feel like the questions were all fair, but it would be a royal pain to find the differences by looking back and forth.
To me, these subtle differences aren't just nitpicking by some design team. These details elevate the experience, and I attribute more trustworthiness to companies that put this effort into their projects.
It's funny, in the past few days I thought about how I never liked FTX as a whole because of their abysmal UI/UX. I always thought their business was less trustworthy just by the look and feel of their website. Kraken, on the other hand, put a lot of detail into their UI/UX and so far, they seem to be rock solid. Some of these crypto exchanges look like poorly adapted Themeforest templates, and I would bet money on their eventual demise.
The ones I failed on were all on the search box because this is such an incredibly bad design unless you are using an incredibly high contrast screen in the dark. I'm sat here using a pretty decent gaming laptop with a good screen and I can barely see the difference between the white search box and the grey background. Whenever I'm doing any UI design work (or assessing something developed outside) I have a cheap and nasty AOC monitor with crappy contrast hooked up and at an angle as a second monitor, so I can see how it will look on the type of monitors a lot of people use. If it looks good on that and on my nicely colour calibrated screen great. If I can barely see it, its not getting shipped.
I think this is a good game to train your eye for design optics.
Whoever did this has a good eye for design, so I'm surprised by the assumptions he makes in what is right and wrong. Some of the answers depend on the overall design decisions of the UI and you can't say what's right and wrong by one example.
The "invite friends" / "skip" is an awful example. One button should be default but the contrast is so great that it's much more suggesting a dark pattern than a good UX.
Promoting usability and then showing examples of text inputs with only placeholder text and no label...
There are some fundamental negative usability practices which are popular and get repeated all the time, even by people who claim to be UX experts. The worst is when you (the developer) raise an issue to the team about some UX problems, and they have closed ears because they implicitly trust their "UX expert" (who has a title).
Some of these differences and what the "game" deems as correct are just arbitrary and have no right/wrong.
And some of what they deem as right is arguably wrong, or at least is not right without additional context (such as which icons are hollow and which are solid). There is a valid reason for some icons being outlines while others on the same screen are solid.
This site is cute, and what they're trying to do is good; but I wouldn't pay them to build a UI.
As a frontend developer, I hope I never get to work with a person who finds "flaws" from the hard section important enough to bother anyone about. As a user, I never cared about minor inconsistencies and flaw in UI as long as the effect was purely cosmetic. Lots of applications and web sites do just fine with subpar markup. As the saying in Russia goes, "when a cat has nothing to do, he licks balls".
125 comments
[ 4.3 ms ] story [ 198 ms ] threadI scored 6180. randomly selected the last ten or so on hard and got more than half of those right
Me too. Sometimes, things just looked nicer without really knowing what was wrong. Goes to show the power of subconscious perception. TBH, this activity elevated my perception of UX and QC work a lot. This can be hard stuff.
On the other hand, sometimes I felt like I saw color differences that weren't really there.
So I guess this dark pattern is now being elevated to a design best practice...
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.
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 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
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.
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.
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.
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.
Unless only the "hard" section is the crowdsourcing part and the previous sections are a qualification exercise to determine a weight for your votes. Hmmm...
No. I’m right, you are wrong. Beauty is in the eye of the beholder.
Well, user submitted content is going to have to have all sorts of weird aspect ratios. So what's the plan - clip it arbitrarily?
Edit: Apparently, yes.
It's amazing what I overlooked by the end. I guessed on one with an obvious typo.
Of course some of them are obvious, miss alignments etc, but subtle font decisions such as the "2 hours ago" for the last activity to my eye seems so much nicer.
I selected the one with corners.
It turns out I was wrong, and the reason given was "Border radius".
Yes, the whole thing is super Apple-specific and doesn't make any sense outside of that context.
A choice between two actions, where the action that most people will want to take doesn't look like a button and more like some misplaced text, while the option that people will only choose by accident is prominent and a proper button? The styles aren't even consistent. Like having a steering wheel only for left turns and a lever for right turns. Utter nonsense.
Care to give a less explicit, more thoughtful justification? Or is it based purely on what jcampbell1 on HN thinks is not pure shit?
It's not about which action is highlighted and which action is not, it's about not having two primary action near one-another which goes against any UI/UX theory and best practice
On a side note, easy to compare by crossviewing.
It's a known fact that typefaces that have curved, humane shapes are more legible. That is why it is bad practice to use something like futura for long text.
I am assuming rounded corners in boxes follow that logic.
Really though, some design aspects are objective, but some are not. The author of the page seemed to be relatively on point though about whats objective and whats not.
However, this is how we train machine learning systems. I enjoy this as a social or artistic commentary in that way. How would you like to be trained this way, or what do you learn from being trained this way.
It implies, all knowledge is a convention we adopt and the ability to match or reproduce it.
---
I can do what the task asks, almost entirely, score TDB, but it reminds me of surveys with rigged questions. It's technically correct, technically a majority of people answered questions in a predictable way, and "predictable" will be argued "correct".
Searching for fallacy leading questions in surveys, I found https://www.cagw.org/thewastewatcher/fallacy-surveys-and-stu... examining misleading net neutrality surveys cited in Congress, a mix of topics able to draw discussion.
I'd be interested in this quiz extended to explicit A/B testing of design. Or with more samples gathered.
Most of it very subtle, I agree, but I think it's hard to argue against any of the questions being subjective.
Yeah, it looks nice, but so do nice clean rectangular edges. This test is missing context, in that sense it is pretty subjective.
Some of the alignment issued were fairly objective, many of them were not, e.g. some vertical alignment ones. Ofc you want consistent alignment, but you simply can't look at two images to figure out what is 'correct'. That's a design decision.
There were several where the text between the two appeared to be different, but resolved to the same during compare.
But you don't get to be a hard engineer without solving hard problems without any help. Just toughen up and study. :/s
Perhaps these claims are the result of A/B testing and measuring differential engagement. In which case: Cool! That we lowly internet addicts can guess or determine the most effective from design rules, aesthetic preferences, and stockholm syndrome (kidding, a little).
The solid camera icon is off-center (it looks smaller, mangled), but the hollow versions of the mic and camera effectively communicate if they are "on" or not and are sized correctly.
No thanks.
.... then it was bad option
I don't know who made this, but as a user I would certainly dislike their designs.
So by the literal text of this game, most "color blindness compatible" design variants are bad design, and as a severely green-blind person I agree with that.
It's funny, in the past few days I thought about how I never liked FTX as a whole because of their abysmal UI/UX. I always thought their business was less trustworthy just by the look and feel of their website. Kraken, on the other hand, put a lot of detail into their UI/UX and so far, they seem to be rock solid. Some of these crypto exchanges look like poorly adapted Themeforest templates, and I would bet money on their eventual demise.
Whoever did this has a good eye for design, so I'm surprised by the assumptions he makes in what is right and wrong. Some of the answers depend on the overall design decisions of the UI and you can't say what's right and wrong by one example.
The "invite friends" / "skip" is an awful example. One button should be default but the contrast is so great that it's much more suggesting a dark pattern than a good UX.
There are some fundamental negative usability practices which are popular and get repeated all the time, even by people who claim to be UX experts. The worst is when you (the developer) raise an issue to the team about some UX problems, and they have closed ears because they implicitly trust their "UX expert" (who has a title).
And some of what they deem as right is arguably wrong, or at least is not right without additional context (such as which icons are hollow and which are solid). There is a valid reason for some icons being outlines while others on the same screen are solid.
This site is cute, and what they're trying to do is good; but I wouldn't pay them to build a UI.