I dislike that this elevates, canonizes, design decisions out of context.<p>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.<p>It implies, all knowledge is a convention we adopt and the ability to match or reproduce it.<p>---<p>I can do what the task asks, almost entirely, score TDB, but it reminds me of surveys with rigged questions. It's <i>technically</i> correct, <i>technically</i> a majority of people answered questions in a predictable way, and "predictable" will be argued "correct".<p>Searching for fallacy leading questions in surveys, I found
<a href="https://www.cagw.org/thewastewatcher/fallacy-surveys-and-studies" rel="nofollow">https://www.cagw.org/thewastewatcher/fallacy-surveys-and-stu...</a>
examining misleading net neutrality surveys cited in Congress, a mix of topics able to draw discussion.
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.<p>So I guess this dark pattern is now being elevated to a design best practice...
I think this is a good game to train your eye for design optics.<p>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.<p>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.
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.
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
A lot of hate here but I think this thing kicks ass.<p>Do you really think that the person who made this does not understand that taste is subjective, rounded corners are not necessarily preferred etc? Do you think that they believe that there is only one right way to do things? Of course they don't. That's not the point of the game.<p>They are inviting you to participate in a subjectively chosen design system and see how quickly you can learn and adopt the rules of the game. In the process they are teaching you to pay attention to figures of merit and details that are subtle and foundational.<p>Put it this way - if someone can score highly on this game, I would be much more confident that they are technically competent enough (and thoughtful enough) as a designer to be able to go out and cook up something totally new and different, without rounded corners or whatever.<p>If someone is not able to calmly interpret the good intentions of the game, or if they are not able to quickly adopt the rules of the design system that is presented, then I would be more doubtful of their chances of cooking up great design themselves - although of course it is not at all out of the question.
Some of these differences and what the "game" deems as correct are just arbitrary and have no right/wrong.<p>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.<p>This site is cute, and what they're trying to do is good; but I wouldn't pay them to build a UI.
Even the "correct" examples are often <i>incredibly</i> bad.<p>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.
At one point there were two "search" input fields side by side. They were identical except one had border radius, the other had corners.<p>I selected the one with corners.<p>It turns out I was wrong, and the reason given was "Border radius".
For photo aspect ratio, it keeps insisting to show as little of the advertised guitar as possible. I would prefer to see as much of it as possible.<p>I think if a photo is essential content (which it is in this case), you should crop as little of it as possible. Though it also depends on whether there's a detail page where you can see the whole thing undistorted, but that's context this example doesn't provide.
Promoting usability and then showing examples of text inputs with only placeholder text and no label...<p>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).
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.<p>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.
This looks very subjective, and in addition also promotes some dark patterns.<p>There was an example where you could see a guitar in full but with some whitespace (with correct aspect ratio, I'm not talking about a later example where it's stretched out), and had the guitar cropped and only partially visible. I prefer to see whole thing so click the one where it's full, but it berates me for "Photo aspect ratio".<p>Then there was an example of "invite friends", where either "invite friends" was a blue button and "skip" gray text, or where both "invite friends" and "skip" are blue. I choose the latter because I find it a dark pattern to "hide" the skip option, but instead it berates me for "One button with default style".<p>Oh yes, creating a design requirement of "one button with default style" like a good excuse to do this dark pattern!
Old thread: <a href="https://news.ycombinator.com/item?id=27188989" rel="nofollow">https://news.ycombinator.com/item?id=27188989</a>
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".
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.<p>I don't know who made this, but as a user I would certainly dislike their designs.
UI problem in the game: I kept clicking the "incorrect" image, even though it says to "select the design that is most correct".<p>The game is basically "find the problem", after which I really want to click on the thing I found and am currently looking at, rather than on the things I didn't find.
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?<p>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.
fun game, would like to see why a few of these design patterns are correct though. for example why does there need to be a border radius?<p>I scored 6180. randomly selected the last ten or so on hard and got more than half of those right
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.
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.<p>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.
I mostly liked this, except for the fact that the send message example doesn’t use an actual button for the “skip” button. It absolutely should be a button and not just text. Otherwise it’s a dark pattern trying to force the user into pressing the one that looks like a button. That is, in my opinion, not just a bad design choice but an unethical one. They can be colored differently because one’s the default, but they should both appear to be buttons.
Wow I really don't like the (automatic?) translation I'm hit with. Sure I know that language, but English is fine? At least give me the option to shut it off or make it opt-in.<p>It's kind of ironic to make this design mistake on a site dedicated to raise awareness about design decisions
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.
I can't agree with some of the "correct" choices.<p>Like, I get that the "2h" sign is meant to be de-emphasised, but there's a level of contrast beyond which becomes unreadable. If so, why put it there in the first place?
I can't see the difference with the last (third) Tutorial image, even with the "Compare" button after choice. Explanation reads "Speech bubble padding", but they look identical to me.
Missing "both are wrong" option.<p>For example, it's always incorrect to have clickable button without any kind of border and same color like background and it does it for "skip". It's just dark pattern to funnel people into clicking stuff you want with <i>technically</i> giving a choice.<p>It also have some slides where <i>both</i> have absolutely awful contrast and asks to pick "less wrong" option (HN also gets that terribly wrong, light gray text on lighter gray background).<p>A lot of it is also designer preferences like "SQUARE BAD"
Wow, am I seeing hours of comments from people who've never used an iPhone or Android phone? People are complying about dark patterns and subjectivity rather than taking the most simple and straightforward interpretation of "correct," which is "matches what we see every day."<p>Are roundrect corners objectively better than right angles? How could they be? But they're definitely what designers have decided to standardize on, and are therefore "correct" for our reality in 2022.
I'm shocked at how many commenters misread "most correct" as "correct"... has no one ever taken a multiple choice quiz where there isn't a definitive 'correct' answer, only one that is 'more right'?<p>Speaking as someone who's currently fighting my design team over attention-to-detail, this site has great examples of sloppy design. I don't think the target audience is senior/experience UX designers.
In my view, the placeholder text in a search field shouldn't be capitalized—the text you type in it isn't capitalized either. In general, capitalization is a complex question that I've agonized a lot about in different contexts. But this thing just tells you that it's "wrong" to not capitalize it. No discussion, it's just "wrong".
Maybe I'm way off here, but my initial impression of this test was to check if you could accurately recognize errors in <i>existing</i> designs.<p>I interpreted "correct" as having correctly identified the example of an existing design, as I imagine I would see if I opened the corresponding apps/websites.
Fun, but I wish it were more that you had to pick out the problem instead of choosing what's "correct". Many of these boil down to consistency rather than objectivity - a 2px difference in spacing doesn't often make a difference as long as it's consistent with all other spacing.
7380 with one forced error (was cooking while answering this). Can't agree with a few in the medium difficulty though, felt that the "correct" answer was arbitrary. However, IANAD so perhaps not the best person to say for sure.
6,880. By the end I was guessing, and I cheated once. (and still got it wrong, I think) I think the right side of my screen just looks nicer.<p>It's amazing what I overlooked by the end. I guessed on one with an obvious typo.
What's the difference in third example of tutorial ("Speech bubble padding")?<p>Edit: Mein Gott, contrast people! Contrast! That "grey" bubble is borderline white on my screen
Who made this must be really proud of themselves and believed they did a good thing. As we all know, "The road to hell is paved with good intentions"<p>"Correct" my ass