I like how it trains you in noticing issues in alignment, spacing, font setting etc. But as others noted it mixes clear mistakes with highly subjective opinions around size, shape and color choices and even dark patterns while suggesting to use this test to filter out job candidates for design positions [0].
While there might be some merit to this method for educational purposes I'm generally wary of fully automated assessments as they often include hidden biases like in this case and just end up enabling you to hire the same kind of people all the time (which admittedly already is an issue with human assessments/interviews, so lets not make it worse).
That's a bummer, I was thinking this was more of a game to recognize design little details in widespread applications (Facebook, iMessage, iOS...) - so in that view the "subjective opinions" were not subjective but how those apps are doing design choices. Not saying they are good because, for example with the 'Skip' button in the Facebook example, people can't tell if that's actually a clickable button from the first sight, which is a terrible design in usability terms. Not sure who came with that "designing secondary buttons as if they were not buttons" thing, but the first time I saw them was with Android Lollipop and their then-new "material design".
Putting what you're saying in perspective only tells that even now employers are helping to the dribbblisation of design[0][1][2] - and helping developers hate us designers even more.
I misinterpreted OP's comment, thanks for the clarifications. A company deliberately choosing not to adhere to accessible web standards because dark patterns benefit the company by converting more users in their sales funnel.
This needs to be regulated against, it only grows and gets worse over time.
> and helping developers hate us designers even more.
This is off-topic, but since I have you... Would you happen to have an idea about why designers don't seem to engage in OSS much? There's a wealth of open source software (and developers), but I've never once seen a designer open a PR fixing some design/UX issue...
UX is rarely a very rewarding process. It's not nearly as much fun as writing new software. OSS often has the same problem with bug fixes, which are also less fun than adding new features.
It's even worse than bugs, since bugs are usually localized, while UX issues often require substantial redesign even for something that feels like a very specific issue. That puts you in front of a whole lot of stakeholders, and even more work, for something that isn't going to feel nearly as big an accomplishment as adding a new feature.
So unless you get a UX programmer who also happens to be interested in your particular open source project, things will stay for years. That's a lot easier for programmer's tools than for anything that requires domain experience.
I think it often boils down to everyone having an opinion about design/UX. When fixing a software bug in a PR there is often a fairly clear subset of "correct" solutions, but when it comes to design/ux the set is generally bigger and everyone (even non-designers) will have an opinion on how it should look.
Hm, maybe, bikeshedding is a killer in these things... I haven't even seen people attempt it, though. Maybe they all got scared away by us developers years ago?
It actually seems like a really cool idea as a trainer for "non-UI-oriented" developers (that end up building UI anyway) -- minus all the subjective and dark pattern stuff.
Early in my career I worked with a really great graphic designer. Up to that point, I thought I was "decent" at doing UIs, as I was proficient in the technology (HTML/CSS), and could take a sketch/mockup/photoshop/whatever and turn it into something usable. We were basically building custom templates that worked on top of a custom CMS/shopping engine (pre-Wordpress/etc), usually matching some existing customer branding, so it wasn't exactly 1:1 from design to implementation.
What consistently amazed me was that then the graphic designer would take what I did -- even just doing minimal modifications like adjusting spacing/sizing/color -- and make it look 10x better. I quickly learned that my design talent was severely lacking, and that Photoshop/HTML/CSS/etc skills are totally independent from UX/design skills.
I still think there's lots of programmers that haven't experienced this type of thing and believe being good with the tools == being good at design. Systems like Bootstrap make things a bit more interesting, because it becomes easier to fall into the pit of success, but it doesn't substitute.
A good "game" like this seems like it would help to break the mindset of some of these programmers because fundamentally once you start recognizing things like mixed icon styles, misaligned elements, or inconsistent font styles, you really can't un-see it.
> What consistently amazed me was that then the graphic designer would take what I did -- even just doing minimal modifications like adjusting spacing/sizing/color -- and make it look 10x better
Ha. I do this for my team, but I still don't consider myself a great designer. All I can really do is correct mistakes, and create something clean looking. The best graphic designers I've worked with all had this ability to pull a whole look and feel from thin air. It's really impressive.
I like how they didn't capitalize the input placeholder for "job e-mail address" when they're emphasizing attention to detail, and placeholder capitalization was one of the questions.
Their decisions were not subjective at all. At least if you accept "most correct" to mean "most standard", when you think it might be ambiguous. I've been working on software and interfaces for over 20 years and actually agreed with the entire game, 100%, without a single disagreement.
Yeah, that was the one that made me immediately stop "playing". If dark patterns like that are "objectively" correct, then I would much prefer to be objectively wrong.
Not subjective at all about drop shadow or letter spacing or button padding? It feels like we've squeezed every ounce of art out of the UI. I would not have thought that revelation about UI decisions would make me sad tonight but there it is.
Design choices are intrinsically subjective but also perfectly valid. Subjective doesn't merely mean that all choices are equally valid and it really doesn't matter which one you choose.
"Subjective" in this context means that you can't mecahnically use simple measurements, properties or heuristics to analyze correctness. That's perfectly fine. It's what designers are trained for and paid to do.
Awesome, happy to be educated (despite the subjective questions). But I'd like the next game to train designers how to use tools like Figma properly (by that I mean if they knew how to design using auto layout - flexbox for devs - it would save millions of dollars a year).
The "activity indicator color" one is "wrong" to me. It says "2h" by her name, meaning she was last online 2h ago, meaning that her activity indicator color should not still be green.
Already feeling like some of these are one person's opinion, biased towards the current status quo in mobile/web. Although there are a lot of good points around padding, font, contrast, etc. Main theme seems to be around consistency.
Edit: Okay, well, I got
7580
Rank: PLATINUM (top 5%)
Completed in 00:24:47
I think a lot of this was more "find the difference" than it was "tell me what version is better". Once you are able to find the subtle difference, it's pretty obvious which one is better, mostly because one of them lacks self-consistency. I think a lot of the tracking, color, and tint differences were pretty opinionated.
I use Redshift and spent five minutes trying to figure out what the damn difference was. In the end, I had to disable it to notice that the indicators' colors weren't both purple!
That's pretty interesting but also highly opinionated in places.
One card that was weird for me in particular was reinforcing dark UI patterns by considering a strongly bold backed "Invite Friends" above a "Skip" lacking any background as "More correct".
I like the part where it says that a classified ad showing the entire photo of the product being advertised is "wrong", and the version that crops the image and hides meaningful content is better because it has a "correct aspect ratio".
That's when I decided to quit, because I really don't care about this person's opinion of what kind of design is "correct".
IIRC none of the images showed the whole guitar. Both were cropped, but one was consistent with the card layout. I agree with the test authors on that one.
I also agree that the more cropped version looks better. However I'm not sure it's a matter of "aspect ratio", since both images have the same aspect ratio, just zoomed differently.
I think the widget that was used is simply a really bad choice for selling anything. The obviosly correct solution would be to show the full image next to the textual description including price or maybe text as a subtitle, if there are multiple columns.
This kind of widget might be nice for sliding through things that are represented by some abstract image where details don't matter. But when buying a product, I want to see the whole thing, ideally from multiple perspectives.
Yes, the full and correct image would be on the full product page. The cropped image is fine on a multiple product listing (for example search results) where users quickly scan for interesting products.
Yep, neither of two is okay. If you sell guitars, make cards horizontal [1x3photo 7x3info] boxes, or figure out a good vertical arrangement. Test authors were picky on details, but missed an elephant in a scope.
I agree, in many cases I preferred the "wrong" one. In addition to that skip button (which doesn't even look like a button in the "right" example), I also preferred the 2px-thick separator which is "wrong" according to the site.
Thirded... All buttons should have at least the same basic buttonness. A default option can be presented in many ways, but obfuscating other buttons is a no go.
Also the placeholder text contrast being higher makes it look like actual content in that textbox which is bad, and why placeholder text is discouraged altogether.
The best thing I think we can get out of it is to give it to non-tech/non-design/non-UI people to show them the sorts of details that some people obsess over when making design decisions - it's not just all putting pretty pictures into pages and picking colours and fonts.
At this point, I think it's correct. Maybe it's a dark pattern but one so widespread that a link below is where I would look for "skip" and a full skip button would throw me off.
That's definitely a dark pattern but I think it's a good idea to have different styling for different buttons and the one that's most commonly used is the one that should be more eye catching. In this case, skip should be the one with a background but the point stands that one should look different from the other.
The problem is not which of the two is the default, the problem is that only one of them looks like a button.
It's good to use different styles. Symmetry is bad when you want people to make a choice.
But in this example it doesn't look like there is a choice at all.
It's just a dark pattern that almost all companies (including Apple and Microsoft) have started to use, where they de-emphasize certain options to the point where people don't even realise that they have a choice.
As a user I disagree they should look different. Maybe the designer wants to funnel users down a specific path, but these aren't my preferences. "Skip" is not a rare, exceptional choice here.
I think the good idea would be to give this "Skip" button at least a darker gray background (which once pressed changes into blue) upon interaction so less experienced user would know that it is still an option that can be selected. Without it, this screen suggest that only action is to press visible "Invite Friends" blue button and that is an example of dark pattern design.
It might be the approved guideline in official design documentation but it doesn't mean it's a fair design for the user.
I enjoyed this. About 1/3 through “hard” difficulty, I found it difficult to discern differences. Perhaps I rely too heavily on my browser’s Inspector tool.
A quibble: I signed up for the “no spam” email update(s) and only then saw mention of Facebook via their HQ’s address. If this feeds into Facebook in any way, it’d be nice to know this prior to submitting my email. I do appreciate you have to verify your subscription via email verification, but the list still received my (unverified) email.
Edit: I see the creator is an employee at FB, hence their use of their hQ’s address, but the creator may want to consider another, like a PO Box. I am significantly less likely to confirm my email subscription if it has anything to do with Facebook.
Many of these are purely subjective. A 2pt line separator is not more "correct" than a 0.5pt one. Rounded box corners are not more "correct" than square ones. We are just trying to guess the author's own design preference.
I did enjoy the parts which were clearly about identifying errors or inconsistencies in design.
The question really should be renamed from "Select the design that is most correct" to "Select the design that is most adherent to the doctrines of the cult of Apple and Helvetica."
There's also some Material and Fluent design stuff in there, but that's about it as far as I can tell. The alignment issues and such may be valid, but a lot of this is just graphical designers training other graphical designers to agree with them.
Omg this is from "For Business" section of the page:
"Use Can't Unsee to measure attention to detail
Our data suggests that high scores in the Can't Unsee game are correlated with high attention to detail.
You can use Can't Unsee to screen designers, developers, QAs, product managers and other people who job with technology.
This is how it works: after joining our program you'll get a custom link. Share this link with your candidates, and you'll see their results in a dashboard (custom integrations available)."
What kind of writing style is that, this is spying on people. If you're assesing someone, they should be aware of the fact.
Ooff - this test if complete nonsense since it lacks context. Large fonts could be advantageous in an app for people with bad eyesight, etc. To use this as a screening tool is *#!&!$ and immoral.
"Correct" is used subjectively here, which is awful since the word has a connotation of objectiveness. It's "correct" if your intend is to trick somebody into not clicking "skip". It's incorrect if the intend is to show to equally valid options to go forward.
It really isn’t subjective. There can only ever be one primary button. Still, it could’ve been a regular gray button, not some text that just happened to be clickable.
If people have varying opinions about it, it's subjective. That's the definition of the word subjective, no?
In either case, the point of highlighting one (and only one) button is to indicate that that's the default button, i.e. the one that will be the default choice when you press return. What does that even mean on a touch interface? Is this for the seven people who have a keyboard hooked up to their iBling?
Agreed, a dark pattern is not "correct", it's a dark pattern. Spreading word of your app is not in the direct interests of your users, so it shouldn't be the main action IMO.
Is this a test for "is the consistent with iOS"? I can spot all the differences (edit: hmn, not all of them, especially on Hard), but some of them are just worse.
Who thinks "2h ago" should be as bright as the name? Who thinks that speech bubbles should have border-radius so big that it creates a circle?
I think you could improve this test by at the very least not saying "correct". There were many cases where I spotted the difference and disagreed.
Equally, there were cases where I simply guessed and got lucky or unlucky. You could make this test much better by making the user click near the difference. This both removes the subjectivity and makes it much less likely to simply guess.
Basically a fun QA test. Even if you disagree with what's "correct", being able to notice and articulate why something is off is a valuable skill.
The only only subjective ones I disagreed with were about tracking. With one I preferred more spacing, and the other I preferred less.
People complaining about dark patterns with buttons are missing the point. More than one colored button is bad with all current design. Whether you disagree with the other option being plain text is besides the point.
>People complaining about dark patterns with buttons are missing the point. More than one colored button is bad with all current design.
I think you might be missing the point honestly.
Making all buttons to look like buttons is a design choice I like. I would even venture so far as calling it objectively good design from a usability standpoint. People may disagree.
Opinions about how many colors should be in buttons are in any case highly subjective.
Perhaps the problem is the concept of a default button. The practical application for it is simply to push the user to the company preferred path rather than provide a choice.
In any case if one button is the more common choice it can be indicated by position or by a more subtle way than making it appear like there is only one button.
border-radius is simply the name of the css property that achieves rounded corners. I agree that it isn't more 'correct' to have rounded corners on a text box than square ones.
Yeah, on the first question of the "easy" section, I noticed two differences:
1. The color of the indicator marker was green on the left, blue on the right
2. The space between the characters in the name was uneven on the left, even on the right.
I figured bad character spacing was more wrong than a blue indicator marker; but when I selected 2, it said I was wrong; and the "toggle to see the difference" showed them to be the same spacing, with the color being the only difference. Something screwed up in the rendering obviously, but that's going to make it pretty impossible to get very far.
I treated this like a spelling test: how am I accustomed to seeing this in professionally produced material, and therefore which option would I choose to avoid a distracting sense of "not rightness" for a general audience?
By those rules, it was a fun and fair game. I really hated abandoning my streak to get my own work done. Well done to the creators on that aspect.
I can understand that like a spelling test it might be frustrating if you approached it from the perspective of "how should this be done if we are open to unfamiliar possibilities."
The amount of design-self-righteousness in this "test" is over the top. These decisions are not set in stone and should rightfully be subject to change. If we train designers to adhere to this "right" way we be stuck with an 2020 aesthetic. Also Dark Patterns.
It was interesting that I’d often look at the two - say I can’t see any difference - pick one and turn out I picked the right one and the difference was something major like capitalization or aspect ratio.
The fanboy mentality surrounding this site kind of rubs me the wrong way. Why is putting the "skip" option in a blue box marked wrong? Why are square boxes marked wrong? I get the feeling that the creator of the site thinks that if a website doesn't look like the iOS interface then it automatically looks bad.
I hope most people that are in charge of web design disagree with the premise surrounding this site. There shouldn't be a "correctly" or "incorrectly" designed site. It's like declaring Renoir is better than Monet. They are both amazing, and in the end there is no objective foundation to claim such a thing.
7680 (top 5%) in 8m 12s. I too agree that some questions are highly subjective, only made "correct" by platform standards or controversial goals. Also one question was particularly impossible to discern even after the reveal; I was playing the game through RDP (cause I'm on a laptop and I have more powerful desktop at home) and the compression made both images identical.
The first one I got was the avatar with an online indicator. It's meant to be green if you're online, sure, but the subtext clearly says 2h ago suggesting they're no longer online. So what does 2h ago mean if they are online?
I'd argue that one is wrong in both images, it's failing to communicate either their online status or what the "2h ago" means clearly.
I am not nearly as knowledgeable about this as many of you and I took my time through the test. It was interesting though parts were not challenging.
I was most disappointed though to find that the text in the button to "Show my score" that allows you to see how well you did seems to have an extra space between 'my' and 'score'.
In almost all of these, the use of and definition of “more correct” is troubling at best.
Apart from a few obvious errors most of this is entirely subjective and promoting that as what is “correct” is at best a lie, and at worst full on malicious as the case promoting the less obvious “SKIP” button dark pattern.
Interesting! At some point on harder levels I started forcing myself to select the example which looks worse to me and thus I started getting more of the questions “correctly”! I suppose some people find things beautiful that are slightly imperfect. Or in other words to be attractive an image must be “interesting” and slight “tension” does contribute to it (for me).
Of course I am not speaking about gross problems like buttons having inconsistent spaces between them or different shapes. And still. That shorter line under the user card! Or that claustrophobically small padding around the “enable camera” button! How can those be “correct”?! ¯\_(ツ)_/¯
Why does it say some things are correct and others not?
Of the easy questions, I disagreed with the first: a search field with square corners is perfectly fine.
I apparently misunderstood the context of the fourth, a red or blue phone icon that apparently was intended to mean "hang up" ("Destructive action button color"), but that bit of context was not made clear, so I thought it would start a call and of course chose the blue one.
Then I quit. Obviously this test is incorrect and ill-conceived.
Maybe it's just not displaying correctly for me, but the difference between the images for the last easy one (search border radius) is extremely difficult to see.
I thought this was good for teaching things to look for and attention to detail. If I did this sort of exercise more often it might help me pick up more mistakes. Some of the styling may have been subjective but I think the aim was consistency which is something you probably want regardless of platform or theme.
What a great and practical way to teach people to
1) avoid things that make bad design.
2) teach designers the small things that come together to form an elegant design.
Brilliant idea.
If I as a user think one thing is better than the other, does it make it automatically the more correct one? Unless you design doesn’t serve the purpose of a product but for yourself to feel better when compared to other designers.
Horizontal spacing differences are much easier to spot than vertical, with the images side-by-side as they are; would be interesting to offer the images one atop the other and see what difference that makes to the result.
It took me the first 2-3 "questions" to figure out what was going on but super cool after that I especially liked how the differences were so subtle you had to really pay attention to the minute differences.
While there might be some merit to this method for educational purposes I'm generally wary of fully automated assessments as they often include hidden biases like in this case and just end up enabling you to hire the same kind of people all the time (which admittedly already is an issue with human assessments/interviews, so lets not make it worse).
[0] https://cantunsee.space/business