Can't Unsee(cantunsee.space)
cantunsee.space
Can't Unsee
https://cantunsee.space/
125 comments
Seconded. #4 Prioritises the dark pattern of hiding the "Skip" button in an "Add friends" nudge page of an onboarding process.
No thanks.
No thanks.
The issue wasn't that “Skip” was hidden, it was that two default-styled buttons were shown.
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.
[deleted]
I 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.
Most of it very subtle, I agree, but I think it's hard to argue against any of the questions being subjective.
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.
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.
There were several where the text between the two appeared to be different, but resolved to the same during compare.
Haha! Twitter image preview would beg to differ indeed. It's a hard problem.
But you don't get to be a hard engineer without solving hard problems without any help. Just toughen up and study. :/s
But you don't get to be a hard engineer without solving hard problems without any help. Just toughen up and study. :/s
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).
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).
I am pretty sure the border radius examples were actually not "it should have one" but where the alternative had inconsistent border radius.
The Invite/Skip being better with the buttons being different is pretty subjective. It's basically a dark pattern highlighting the invite action.
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.
Arguably, anything with “Skip” is a bad/dark pattern, and thus shouldn’t be occurring at all here.
Yes, it would have been better with something like Save/Cancel.
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.
Square corners versus rounded corners is objective?
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.
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.
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.
6830 "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.
I'd be interested in this quiz extended to explicit A/B testing of design. Or with more samples gathered.
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...
So I guess this dark pattern is now being elevated to a design best practice...
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.
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.
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
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.
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.
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.
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.
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.
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.
[deleted]
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.
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.
Surprised they didn't include the logical next step:
"invite friends" / "skip"
"invite friends" / ""
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.
Neither is separator width ...
On a side note, easy to compare by crossviewing.
On a side note, easy to compare by crossviewing.
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.
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.
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?
I have a high res screen, and I preferred the squared corners.
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.
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.
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
I 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
.... then it was bad option
A 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.
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.
I agree with you that "this thing kicks ass."
I think a good way to really upset people is to tell them that they're wrong. Which I also think is the major factor in the negative comments here.
The game does rate your answers either right or wrong and that upsets people when the answer is subjective.
It's hard to take criticism, especially if it's negative and/or destructive. I think though that the game author could take in the common theme of the criticism here and update the game. Either by adding textual description or updating the problems.
Most brilliant programmers I know are really bad at UI design. Really bad. I think a game like this is very, very helpful to give people the basic tools and jargon to talk and think about UI.
I think a good way to really upset people is to tell them that they're wrong. Which I also think is the major factor in the negative comments here.
The game does rate your answers either right or wrong and that upsets people when the answer is subjective.
It's hard to take criticism, especially if it's negative and/or destructive. I think though that the game author could take in the common theme of the criticism here and update the game. Either by adding textual description or updating the problems.
Most brilliant programmers I know are really bad at UI design. Really bad. I think a game like this is very, very helpful to give people the basic tools and jargon to talk and think about UI.
So 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).
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).
> [...] 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 [...]
Exactly this is the point I got hung up, too.
What I'd like to add, though: There are event wo layers of "evil" here:
- The idea that there's a "right" (default) button in a perfectly file selection of two options
- The fact that the example doesn't even style the alternative as a button opts to pretty much hide it instead
Exactly this is the point I got hung up, too.
What I'd like to add, though: There are event wo layers of "evil" here:
- The idea that there's a "right" (default) button in a perfectly file selection of two options
- The fact that the example doesn't even style the alternative as a button opts to pretty much hide it instead
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.
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.
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.
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.
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
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.
[deleted]
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.
> 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?
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 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.
At 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".
I selected the one with corners.
It turns out I was wrong, and the reason given was "Border radius".
That one pissed me off. Since when is rounded corners a 'correct' way to make an input?
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.
Yes, the whole thing is super Apple-specific and doesn't make any sense outside of that context.
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.
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.
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.
That was more of "fill entire thumbnail with the thing" which makes sense if you're showing a bunch of them on a list
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).
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).
So 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.
No. I’m right, you are wrong. Beauty is in the eye of the beholder.
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?
Edit: Apparently, yes.
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.
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.
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.
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!
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!
#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
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
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.
I don't know who made this, but as a user I would certainly dislike their designs.
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".
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.
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?
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.
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?
I scored 6180. randomly selected the last ten or so on hard and got more than half of those right
I scored 6180. randomly selected the last ten or so on hard and got more than half of those right
> 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.
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.
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.
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.
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 border radius thing is insane. Why does rounded corners mean correct?
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.
It's kind of ironic to make this design mistake on a site dedicated to raise awareness about design decisions
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.
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?
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?
[deleted]
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.
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"
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"
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."
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.
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.
Maybe 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.
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.
Defining "correct" as "parroted by most" is dangerous at best.
Okay, 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.
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.
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'?
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.
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 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.
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.
It's amazing what I overlooked by the end. I guessed on one with an obvious typo.
It's amazing what I overlooked by the end. I guessed on one with an obvious typo.
I wonder why rounded corners are somehow more correct than square ones.
What'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
Edit: Mein Gott, contrast people! Contrast! That "grey" bubble is borderline white on my screen
Telling me my design choices are wrong?
That's just, like, your opinion, man.
That's just, like, your opinion, man.
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"
"Correct" my ass
"Correct" my ass
What is this? Crowdsourcing design work via gamification?
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...
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]
“Correct” is such an provocative word to use here.
> 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)
I disagree. A button should look like a button, not like a text (as it does here)
Symmetry is overrated
well, this is incredibly arbitrary.
thanks much!
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.