11 ms·
Can't Unsee
- stevage 4y agoI wish they would define "correct" at the start.
- deleted 4y ago[deleted]
- texaslonghorn5 4y agofun 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? I scored 6180. randomly selected the last ten or so on hard and got more than half of those right
- karmanyaahm 4y ago> 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.
- shazn 4y agothanks much!
- xg15 4y agoOne 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...
- navhc 4y agoI agree the style itself isn't very good but I think the "lesson" was in differentiating primary and secondary actions to make it obvious
- midasuni 4y agoStill 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.
- ricardobeat 4y agoYou 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.
- branon 4y agoSame 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.
- ryandrake 4y agoYes, 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.
- choeger 4y agoWhat is this? Crowdsourcing design work via gamification?
- xg15 4y agoI 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...
- deleted 4y ago[deleted]
- midasuni 4y agoSo I choose what I think is best and I’m wrong? No. I’m right, you are wrong. Beauty is in the eye of the beholder.
- reitzensteinm 4y agoYeah, 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? Edit: Apparently, yes.
- ReactiveJelly 4y ago6,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. It's amazing what I overlooked by the end. I guessed on one with an obvious typo.
- aidenn0 4y agoApparently not owning an iPhone makes this rather hard.
- tkgally 4y agoThat 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.
- bilekas 4y agoI 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.
- mastazi 4y agoAt one point there were two "search" input fields side by side. They were identical except one had border radius, the other had corners. I selected the one with corners. It turns out I was wrong, and the reason given was "Border radius".
- wildrhythms 4y agoThat one pissed me off. Since when is rounded corners a 'correct' way to make an input?
- mook 4y agoMy 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.
- deepserket 4y agoOld thread: https://news.ycombinator.com/item?id=27188989 https://news.ycombinator.com/item?id=27188989
- chmod775 4y agoEven 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.
- jcampbell1 4y agoTwo 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.
- junon 4y ago> pure shit Care to give a less explicit, more thoughtful justification? Or is it based purely on what jcampbell1 on HN thinks is not pure shit?
- jcampbell1 4y agoIt 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.
- gbalduzzi 4y agoCan 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
- aflag 4y agoWhat 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.
- NayamAmarshe 4y agoBorder 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.
- alternatetwo 4y agoNeither is separator width ... On a side note, easy to compare by crossviewing.
- fold3 4y agoSince 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.
- crabmusket 4y agoWhat 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?
- antonyh 4y agoI have a high res screen, and I preferred the squared corners.
- fold3 4y agoHigher 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.
- rosmax_1337 4y agoCame 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.
- mcint 4y agoI 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". Searching for fallacy leading questions in surveys, I found https://www.cagw.org/thewastewatcher/fallacy-surveys-and-studies 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.
- mcint 4y agoSome 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.
- mcint 4y ago6830 "BRONZE" top 50%. 5-7 wrong, though only maybe 3 I'd contest. I'd be interested in this quiz extended to explicit A/B testing of design. Or with more samples gathered.
- gbalduzzi 4y agoI found most of this to be quite "objective" and not really related to design decisions. Most of it very subtle, I agree, but I think it's hard to argue against any of the questions being subjective.
- maxerickson 4y agoThe Invite/Skip being better with the buttons being different is pretty subjective. It's basically a dark pattern highlighting the invite action.
- deliriumchn 4y agoJesus 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
- adql 4y agoI was wondering about it myself, I looked at blue/cyan status lamp and though "huh, that's probably to make it easier for color blind" .... then it was bad option
- jeroenhd 4y agoSome 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.
- hnbad 4y agoI 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.
- jcampbell1 4y agoI 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.
- dna_polymerase 4y agoTo 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.
- r_hoods_ghost 4y agoThe 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.
- ranting-moth 4y agoI 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.
- hoosieree 4y agoSurprised they didn't include the logical next step: "invite friends" / "skip" "invite friends" / "" Option B exploits the user by changing the word "skip" to the empty string, making it completely invisible. Therefore Option B is best.
- z9znz 4y agoPromoting 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).
- z9znz 4y agoSome 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.
- unsafecast 4y agoThe border radius thing is insane. Why does rounded corners mean correct?
- Klaster_1 4y agoAs 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".
- mcv 4y agoFor 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. 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.
- adql 4y agoThat was more of "fill entire thumbnail with the thing" which makes sense if you're showing a bunch of them on a list
- Kairinz 4y agoWhy is this actually addicting ?
- yoz-y 4y agoFor better or worse, people tend to like doing mundane, repetitive tasks, if the stakes are low or non-existent. I enjoyed it quite a bit.
- deleted 4y ago[deleted]
- emiliobumachar 4y agoI 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.
- laputan_machine 4y agoTelling me my design choices are wrong? That's just, like, your opinion, man.
- Tade0 4y agoI can't agree with some of the "correct" choices. 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?
- abhishekbasu 4y ago7380 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.
- agluszak 4y ago> WRONG: there should be one button with default style I disagree. A button should look like a button, not like a text (as it does here)
- seydor 4y agoSymmetry is overrated
- junon 4y agoFun, 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.
- wasabi991011 4y agoMaybe I'm way off here, but my initial impression of this test was to check if you could accurately recognize errors in existing designs. 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.
- zwirbl 4y agoWow 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. It's kind of ironic to make this design mistake on a site dedicated to raise awareness about design decisions
- Aardwolf 4y agoThis looks very subjective, and in addition also promotes some dark patterns. 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". 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". Oh yes, creating a design requirement of "one button with default style" like a good excuse to do this dark pattern!
- spoonfeeder006 4y ago#16 on hard, the 'wrong' answere looked better to me.... at first Then I was in the middle of writing this comment and I looked back at the comparison, and this time the 'right' answere looked better to me
- whiddershins 4y ago“Correct” is such an provocative word to use here.
- champagnepapi 4y agowell, this is incredibly arbitrary.
- rouxz 4y agoWho 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" "Correct" my ass
- jamesfisher 4y agoUI problem in the game: I kept clicking the "incorrect" image, even though it says to "select the design that is most correct". 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.
- markdestouches 4y agoI wonder why rounded corners are somehow more correct than square ones.
- adql 4y agoMissing "both are wrong" option. 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 technically giving a choice. It also have some slides where both have absolutely awful contrast and asks to pick "less wrong" option (HN also gets that terribly wrong, light gray text on lighter gray background). A lot of it is also designer preferences like "SQUARE BAD"
- pwinnski 4y agoWow, 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." 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.
- adql 4y agoDefining "correct" as "parroted by most" is dangerous at best.
- pwinnski 4y agoOkay, think about it this way: you've got a designer who is turning in their work, and your job is to review it before releasing it to the customer. Typical frontend workflow. The quiz is about catching the sorts of things that many, many, many people wouldn't notice, but might still be unsettling in some vague way. The icons aren't evenly distributed, spacing is too tight or too loose. Things that look different from every other app running on the same phone. Daring to be different sounds noble in an after-school special, but putting out a mobile app with conflicting call to action or icons that don't line up isn't brave and safe.
- pwinnski 4y agoMaybe we're a bunch of backend devs scoring really badly, which is shaking our collective belief that we're detail-oriented and all-wise? Maybe I'm defending it because I scored 7230 with a rank of "SILVER (top 25%)," so I feel special? I'm no fan of dark patterns, but the most-complained-about prompt here as I type this, the one with "ADD FRIENDS" or "SKIP," is very common, and the alternative of making both options identically blue seems like worse UX to me. Maybe in large part because "ADD FRIENDS" is also so much larger than "SKIP." I suspect many people might feel better if the options were "ADD FRIENDS" as primary, and "MAYBE LATER" as secondary, since they wouldn't feel quit as uneven then.
- Jorengarenar 4y agoWhat's the difference in third example of tutorial ("Speech bubble padding")? Edit: Mein Gott, contrast people! Contrast! That "grey" bubble is borderline white on my screen
- pjs_ 4y agoA lot of hate here but I think this thing kicks ass. 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. 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. 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. 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.
- saurik 4y agoSo I only read your comment and then played the game... and OMG "yes": it kicked ass! For like, 99% of it, I wanted all of the people I work with to be able to at least answer this before building their own controls, as being good with spacing and kerning and shading are critical skills way too many people lack. But... it also had a handful of places that infuriated me--like made me viscerally angry at the state of society level angry, where if you answer the way the game wants you to I hope to not only not hire you but de-friend you :/--and of course none of them were "rounded corners". I then went back to the comments expecting--based on your comments--to waltz back here into a discussion about rounded corners to "lay down the law" about how horribly evil the designers are that agree with stuff like "make the skip button not look like a button so no one knows to click it as it is really really important that we get them to invite their friends for our product virality and KPIs, so you won't get promoted if that number goes down!" and... ...well, you were just wrong about the discussion: almost no one here (hell: I didn't even see a single example, but I was, admittedly, skimming to get the zeitgeist) is arguing about rounded corners :/. (edit: OK, in a more careful read I found one, but it was buried in a more substantial argument. I also don't think it was even correct as I remember the example being about inconsistent border radius, not "corners should be round".) Instead, the vast majority of the comments are about dark patterns and "form should follow function" complaints (as with the aspect ratio of the guitar: the goal of that control is to help a user decide whether to buy the guitar, and if it looks like ass then that matters less than satisfying its job; there are better ways of solving that problem, a la Pinterest's continuous grid, but they are going to cause other problems involving fairness... but like, if we aren't going to do that then, at best, we should be helping the user choose a different photo if we are going to insist on cropping it like that, not just cropping it "because our app looks so fugly with your silly image in it"). There were a few people I saw complaining about contrast, and that was in fact the only other place I lost some points (though, I will admit, in the opposite direction from the people here correctly arguing about accessibility... but, in my defense, I went that direction in my answers due to cynical beliefs about designers: I believed the Search box needed even less contrast as nothing else had been given much contrast ;P).
- thewebcount 4y agoI 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.
- SirSavary 4y agoI'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'? 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.
- amadeuspagel 4y agoIn 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".