13 ms·

Can't Unsee

393 points by rajlego 5y ago

munk-a 5y ago
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".
- mastazi 5y ago
  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.
- teraflop 5y ago
  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".
  - duckmysick 5y ago
    The entire scaled down photo also hides meaningful content since I can't see the details. Either way, it looks like a part of a grid with multiple product cards. The full photo would be on the product detail page.
    - ehnto 5y ago
      You can't see the details if they're cropped out, either. You would hope for a way to see the full and correct image in either case.
      - duckmysick 5y ago
        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.
  - dalmo3 5y ago
    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.
    - red_trumpet 5y ago
      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.
      - pvorb 5y ago
        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.
  - wruza 5y ago
    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.
    - oceliker 5y ago
      I think that image is from Facebook Marketplace where you can sell anything, not just guitars.
- cosmotic 5y ago
  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.
- trog 5y ago
  Came to post the exact same thing! 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.
- calvinmorrison 5y ago
  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.
- saghm 5y ago
  I got them all right until that one, and then I had trouble motivating myself to keep clicking through after that
- xmprt 5y ago
  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.
  - yarcob 5y ago
    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.
  - pndy 5y ago
    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.
  - Firadeoclus 5y ago
    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.
- blfr 5y ago
  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.
happytoexplain 5y ago
Cool - but this quickly wanders into highly questionable subjectivity.
ericls 5y ago
How correct is the color red? Is it more correct than the color blue?
ahofmann 5y ago
How am I supposed to focus on small mistakes when on every screen with the guitar, the image is not aligned with the text box below it?!? https://imgur.com/DesCfwm https://imgur.com/DesCfwm
- gwd 5y ago
  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.
1cvmask 5y ago
Later on it becomes very questionable and subjective. But still fun till then.
ylere 5y ago
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). [0] https://cantunsee.space/business https://cantunsee.space/business
- Gualdrapo 5y ago
  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. [0] https://www.intercom.com/blog/the-dribbblisation-of-design/ https://www.intercom.com/blog/the-dribbblisation-of-design/ [1] https://medium.com/intercom-inside/the-dribbblisation-of-design-406422ccb026 https://medium.com/intercom-inside/the-dribbblisation-of-des... [2] https://graphically.io/blog/the-dribbblisation-of-design/ https://graphically.io/blog/the-dribbblisation-of-design/
  - deanCommie 5y ago
    > which is a terrible design in usability terms. Depends on the goals... I'm betting it's the perfect design for what it's intended to achieve.
    - 5y ago
bombcar 5y ago
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.
dmcginty 5y ago
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.
throwaway481048 5y ago
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.
pianom4n 5y ago
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.
- anoncake 5y ago
  Multiple colored buttons may be incorrect, but dark patterns are even more so.
- Swenrekcah 5y ago
  >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.
  - anoncake 5y ago
    More than one button styled as the default button is objectively bad because there cannot be more than one default button.
    - Swenrekcah 5y ago
      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.
juliann 5y ago
I liked it! Quite fun, thanks :)!
samspenc 5y ago
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.
vmception 5y ago
Highly subjective given the prompts but a GREAT test for the design team or graphics personnel you hire
vmception 5y ago
How was I supposed to pass the “button caption tracking” test on mobile or anywhere I guessed and got it right but thats what was being evaluated?
jholman 5y ago
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?
tediousdemise 5y ago
It was fun at first, but I left on the first Mailchimp ad.
umvi 5y ago
But what if I really wanted to type "Okay "? Edit: wow, looks like HN itself trims excess padding. I had written "Okay\s\s\s\s\s\s"
- oneeyedpigeon 5y ago
  That's how HTML works.
shirro 5y ago
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.
anonytrary 5y ago
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.
- zinckiwi 5y ago
  I made the same decision for the same reason and have the same objection!
- dguaraglia 5y ago
  Same
  - dguaraglia 5y ago
    I love the magic of Hacker News: posting a reply agreeing with someone describing a problem? WELL, THAT'S A DOWNVOTE FOR YOU! This place sucks. I wish there was a way to delete my account.
    - phnofive 5y ago
      I’d suggest that "same" can be signaled with an upvote. You can ask hn@ycombinator.com about any account questions.
- arduinomancer 5y ago
  Had the exact same thought. 2hr ago is not “active” state IMO it would stay green like 15-30 mins after the person was online max.
CGamesPlay 5y ago
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.
- kibibu 5y ago
  I know - the border-radius ones were simply opinion, which I happen to not always agree with.
XorNot 5y ago
Dropped out when I got to "separator width" as a point of contention. Honestly I thought this was going to be more like an eye-test where it A/B's the elements into increasing visual frame.
mikewarot 5y ago
It seems that the examples are randomly clearer/blurrier, or I'm going blind.
aestetix 5y ago
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."
- deleted 5y ago
  [deleted]
- jeroenhd 5y ago
  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.
Smithalicious 5y ago
The one I disagreed with a lot was "border-radius" (why not call it what it is, rounded corners) A little bit can make things look more friendly sometimes but I think modern design overuses it by a ton
- oneeyedpigeon 5y ago
  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.
d--b 5y ago
This lists some dark patterns as good practice... like the almost invisible “skip” button below the “invite friends” one
lifthrasiir 5y ago
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.
askvictor 5y ago
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.
personjerry 5y ago
At the end, signed up for the mailing list but their address indicates this is a project from within Facebook? Like a sneaky recruiting project?
doodlebugging 5y ago
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'. Thanks for an interesting diversion.
Seattle3503 5y ago
I thought this was to help me identify fraudulent websites.
aero-glide2 5y ago
I use linux so it was hard to answer this properly. Most Linux Distros have weird UI philosophies. Well it does its job
deleted 5y ago
[deleted]
beyondcompute 5y ago
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”?! ¯\_(ツ)_/¯
7357 5y ago
Great idea.
log101 5y ago
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.
- konrad_ 5y ago
  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.
- TrackerFF 5y ago
  It doesn't seem as terrible as certain pymetrics tests, but still - I'd love to see that research before blindly trusting my recruitment to it.
konrad_ 5y ago
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.
RileyJames 5y ago
> You can use Can't Unsee to screen designers, developers, QAs, product managers and other people who job with technology. “Who job with technology”. Not sure what you’re trying to say exactly, but needs attention. Additionally, the “compare” button on mobile is annoying because (at least on an iphone) try’s to highlight the text shortly after holding it down. All in all, well executed. Immediately made me think “oh this so what designers look for / at” which is not something I’d ever really considered. Well done.
CannisterFlux 5y ago
All I kept thinking was "that is not a Gibson ES-275". The ES-275 body shape has only 1 cutaway. The photo looks more like a ES-335 with the 2 horns.
- spurgu 5y ago
  Haha, good catch.
colonwqbang 5y ago
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.
donatj 5y ago
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.
tummulfingur 5y ago
I'm not a designer but I found a few things to be a bit off on the "One last thing..." page: - Title is not centred [1] - Bullet points look like checkboxes which is misleading since you can only select one [1] - List of roles is not sorted in any meaningful way [1] - Words are unevenly spaced inside SHOW MY SCORE [2] - SHOW MY SCORE is slightly off centre inside the button [2] - Another small nitpick, choice of colours, or perhaps it is the shadow, of the title makes my eyes think the text is a bit blurry. See top in [1] [1] https://i.imgur.com/pBdz8le.png https://i.imgur.com/pBdz8le.png [2] https://i.imgur.com/H1beWLY.png https://i.imgur.com/H1beWLY.png
ehnto 5y ago
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.
peterhung 5y ago
Some differences are not quite clear. But interesting idea anyway. Thanks for sharing this.
wildmanx 5y ago
I stopped playing at the "skip" dark pattern. "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.
- jeroenhd 5y ago
  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.
- fuzzy2 5y ago
  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.
  - sdflhasjd 5y ago
    If it's about making a choice, there should _be_ a primary button.
  - qsort 5y ago
    What does that even mean? Equal choices should be on equal footing, regardless of how many of them there are. Anything else is plainly dishonest.
  - scbrg 5y ago
    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?
vvoyer 5y ago
Great game! Protip: zoom in your browser (CMD + +/-)
dkarl 5y ago
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."
vermaden 5y ago
Reminds me this one: https://imgs.xkcd.com/comics/kerning.png https://imgs.xkcd.com/comics/kerning.png
gpvos 5y ago
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 I'm just getting old.
ericls 5y ago
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.
grae_QED 5y ago
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.
charsi 5y ago
There is a typo in the 'For business' page- > You can use Can't Unsee to screen designers, developers, QAs, product managers and other people _who job_ with technology.
ammar_x 5y ago
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.

393 points by rajlego 5y ago

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".

mastazi 5y ago
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.
teraflop 5y ago
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".
- duckmysick 5y ago
  The entire scaled down photo also hides meaningful content since I can't see the details. Either way, it looks like a part of a grid with multiple product cards. The full photo would be on the product detail page.
  - ehnto 5y ago
    You can't see the details if they're cropped out, either. You would hope for a way to see the full and correct image in either case.
    - duckmysick 5y ago
      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.
- dalmo3 5y ago
  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.
  - red_trumpet 5y ago
    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.
    - pvorb 5y ago
      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.
- wruza 5y ago
  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.
  - oceliker 5y ago
    I think that image is from Facebook Marketplace where you can sell anything, not just guitars.
cosmotic 5y ago
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.
trog 5y ago
Came to post the exact same thing! 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.
calvinmorrison 5y ago
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.
saghm 5y ago
I got them all right until that one, and then I had trouble motivating myself to keep clicking through after that
xmprt 5y ago
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.
- yarcob 5y ago
  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.
- pndy 5y ago
  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.
- Firadeoclus 5y ago
  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.
blfr 5y ago
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.

happytoexplain 5y ago

Cool - but this quickly wanders into highly questionable subjectivity.

ericls 5y ago

How correct is the color red? Is it more correct than the color blue?

ahofmann 5y ago

How am I supposed to focus on small mistakes when on every screen with the guitar, the image is not aligned with the text box below it?!? https://imgur.com/DesCfwm https://imgur.com/DesCfwm

gwd 5y ago
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.

1cvmask 5y ago

Later on it becomes very questionable and subjective. But still fun till then.

ylere 5y ago

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). [0] https://cantunsee.space/business https://cantunsee.space/business

Gualdrapo 5y ago
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. [0] https://www.intercom.com/blog/the-dribbblisation-of-design/ https://www.intercom.com/blog/the-dribbblisation-of-design/ [1] https://medium.com/intercom-inside/the-dribbblisation-of-design-406422ccb026 https://medium.com/intercom-inside/the-dribbblisation-of-des... [2] https://graphically.io/blog/the-dribbblisation-of-design/ https://graphically.io/blog/the-dribbblisation-of-design/
- deanCommie 5y ago
  > which is a terrible design in usability terms. Depends on the goals... I'm betting it's the perfect design for what it's intended to achieve.
  - 5y ago

bombcar 5y ago

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.

dmcginty 5y ago

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.

throwaway481048 5y ago

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.

pianom4n 5y ago

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.

anoncake 5y ago
Multiple colored buttons may be incorrect, but dark patterns are even more so.
Swenrekcah 5y ago
>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.
- anoncake 5y ago
  More than one button styled as the default button is objectively bad because there cannot be more than one default button.
  - Swenrekcah 5y ago
    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.

juliann 5y ago

I liked it! Quite fun, thanks :)!

samspenc 5y ago

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.

vmception 5y ago

Highly subjective given the prompts but a GREAT test for the design team or graphics personnel you hire

vmception 5y ago

How was I supposed to pass the “button caption tracking” test on mobile or anywhere I guessed and got it right but thats what was being evaluated?

jholman 5y ago

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?

tediousdemise 5y ago

It was fun at first, but I left on the first Mailchimp ad.

umvi 5y ago

But what if I really wanted to type "Okay "? Edit: wow, looks like HN itself trims excess padding. I had written "Okay\s\s\s\s\s\s"

oneeyedpigeon 5y ago
That's how HTML works.

shirro 5y ago

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.

anonytrary 5y ago

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.

zinckiwi 5y ago
I made the same decision for the same reason and have the same objection!
dguaraglia 5y ago
Same
- dguaraglia 5y ago
  I love the magic of Hacker News: posting a reply agreeing with someone describing a problem? WELL, THAT'S A DOWNVOTE FOR YOU! This place sucks. I wish there was a way to delete my account.
  - phnofive 5y ago
    I’d suggest that "same" can be signaled with an upvote. You can ask hn@ycombinator.com about any account questions.
arduinomancer 5y ago
Had the exact same thought. 2hr ago is not “active” state IMO it would stay green like 15-30 mins after the person was online max.

CGamesPlay 5y ago

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.

kibibu 5y ago
I know - the border-radius ones were simply opinion, which I happen to not always agree with.

XorNot 5y ago

Dropped out when I got to "separator width" as a point of contention. Honestly I thought this was going to be more like an eye-test where it A/B's the elements into increasing visual frame.

mikewarot 5y ago

It seems that the examples are randomly clearer/blurrier, or I'm going blind.

aestetix 5y ago

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."

deleted 5y ago
[deleted]
jeroenhd 5y ago
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.

Smithalicious 5y ago

The one I disagreed with a lot was "border-radius" (why not call it what it is, rounded corners) A little bit can make things look more friendly sometimes but I think modern design overuses it by a ton

oneeyedpigeon 5y ago
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.

d--b 5y ago

This lists some dark patterns as good practice... like the almost invisible “skip” button below the “invite friends” one

lifthrasiir 5y ago

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.

askvictor 5y ago

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.

personjerry 5y ago

At the end, signed up for the mailing list but their address indicates this is a project from within Facebook? Like a sneaky recruiting project?

doodlebugging 5y ago

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'. Thanks for an interesting diversion.

Seattle3503 5y ago

I thought this was to help me identify fraudulent websites.

aero-glide2 5y ago

I use linux so it was hard to answer this properly. Most Linux Distros have weird UI philosophies. Well it does its job

deleted 5y ago

[deleted]

beyondcompute 5y ago

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”?! ¯\_(ツ)_/¯

7357 5y ago

Great idea.

log101 5y ago

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.

konrad_ 5y ago
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.
TrackerFF 5y ago
It doesn't seem as terrible as certain pymetrics tests, but still - I'd love to see that research before blindly trusting my recruitment to it.

konrad_ 5y ago

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.

RileyJames 5y ago

> You can use Can't Unsee to screen designers, developers, QAs, product managers and other people who job with technology. “Who job with technology”. Not sure what you’re trying to say exactly, but needs attention. Additionally, the “compare” button on mobile is annoying because (at least on an iphone) try’s to highlight the text shortly after holding it down. All in all, well executed. Immediately made me think “oh this so what designers look for / at” which is not something I’d ever really considered. Well done.

CannisterFlux 5y ago

All I kept thinking was "that is not a Gibson ES-275". The ES-275 body shape has only 1 cutaway. The photo looks more like a ES-335 with the 2 horns.

spurgu 5y ago
Haha, good catch.

colonwqbang 5y ago

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.

donatj 5y ago

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.

tummulfingur 5y ago

I'm not a designer but I found a few things to be a bit off on the "One last thing..." page: - Title is not centred [1] - Bullet points look like checkboxes which is misleading since you can only select one [1] - List of roles is not sorted in any meaningful way [1] - Words are unevenly spaced inside SHOW MY SCORE [2] - SHOW MY SCORE is slightly off centre inside the button [2] - Another small nitpick, choice of colours, or perhaps it is the shadow, of the title makes my eyes think the text is a bit blurry. See top in [1] [1] https://i.imgur.com/pBdz8le.png https://i.imgur.com/pBdz8le.png [2] https://i.imgur.com/H1beWLY.png https://i.imgur.com/H1beWLY.png

ehnto 5y ago

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.

peterhung 5y ago

Some differences are not quite clear. But interesting idea anyway. Thanks for sharing this.

wildmanx 5y ago

I stopped playing at the "skip" dark pattern. "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.

jeroenhd 5y ago
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.
fuzzy2 5y ago
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.
- sdflhasjd 5y ago
  If it's about making a choice, there should _be_ a primary button.
- qsort 5y ago
  What does that even mean? Equal choices should be on equal footing, regardless of how many of them there are. Anything else is plainly dishonest.
- scbrg 5y ago
  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?

vvoyer 5y ago

Great game! Protip: zoom in your browser (CMD + +/-)

dkarl 5y ago

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."

vermaden 5y ago

Reminds me this one: https://imgs.xkcd.com/comics/kerning.png https://imgs.xkcd.com/comics/kerning.png

gpvos 5y ago

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 I'm just getting old.

ericls 5y ago

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.

grae_QED 5y ago

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.

charsi 5y ago

There is a typo in the 'For business' page- > You can use Can't Unsee to screen designers, developers, QAs, product managers and other people _who job_ with technology.

ammar_x 5y ago

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.