top | item 27188989

Can't Unsee

393 points| rajlego | 4 years ago |cantunsee.space

126 comments

order
[+] ylere|4 years ago|reply
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

[+] Gualdrapo|4 years ago|reply
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/ [1] https://medium.com/intercom-inside/the-dribbblisation-of-des... [2] https://graphically.io/blog/the-dribbblisation-of-design/

[+] gregmac|4 years ago|reply
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.

[+] Guest19023892|4 years ago|reply
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.

https://cantunsee.space/business

If they can't pass their own test, should I be trusting their testing method?

[+] fragsworth|4 years ago|reply
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.

I was really pleasantly surprised.

[+] crystalmeph|4 years ago|reply
It would be interesting to archive this and see what holds up 15 years from now.
[+] crispyambulance|4 years ago|reply
Of course there's a subjective component.

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.

[+] johnmw|4 years ago|reply
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).
[+] raxxorrax|4 years ago|reply
True. Example was easy 3/10 for example (Hope it is always the same). I think the suggested design is a plain dark pattern.

Still a good site about how important typography, spaces and small details can be.

[+] jholman|4 years ago|reply
I wonder if it's a good way to hire "people who job with technology".
[+] anonytrary|4 years ago|reply
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.
[+] arduinomancer|4 years ago|reply
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.

[+] shever|4 years ago|reply
My thoughts exactly. If "2h ago" was changed to "Online" or "Just now", then green would be "correct" to me.
[+] zinckiwi|4 years ago|reply
I made the same decision for the same reason and have the same objection!
[+] stavros|4 years ago|reply
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!
[+] munk-a|4 years ago|reply
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".

[+] teraflop|4 years ago|reply
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".

[+] mastazi|4 years ago|reply
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.
[+] calvinmorrison|4 years ago|reply
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.
[+] cosmotic|4 years ago|reply
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|4 years ago|reply
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.

[+] saghm|4 years ago|reply
I got them all right until that one, and then I had trouble motivating myself to keep clicking through after that
[+] blfr|4 years ago|reply
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.
[+] xmprt|4 years ago|reply
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.
[+] throwaway481048|4 years ago|reply
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.

[+] colonwqbang|4 years ago|reply
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.

[+] aestetix|4 years ago|reply
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."
[+] jeroenhd|4 years ago|reply
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.
[+] log101|4 years ago|reply
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_|4 years ago|reply
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|4 years ago|reply
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.
[+] wildmanx|4 years ago|reply
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.

[+] fuzzy2|4 years ago|reply
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.
[+] jeroenhd|4 years ago|reply
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.
[+] jholman|4 years ago|reply
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?

[+] CGamesPlay|4 years ago|reply
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.

[+] d--b|4 years ago|reply
This lists some dark patterns as good practice... like the almost invisible “skip” button below the “invite friends” one
[+] happytoexplain|4 years ago|reply
Cool - but this quickly wanders into highly questionable subjectivity.
[+] tummulfingur|4 years ago|reply
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

[2] https://i.imgur.com/H1beWLY.png

[+] CannisterFlux|4 years ago|reply
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.
[+] pianom4n|4 years ago|reply
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.

[+] Swenrekcah|4 years ago|reply
>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.

[+] Smithalicious|4 years ago|reply
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

[+] XorNot|4 years ago|reply
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.

[+] ahofmann|4 years ago|reply
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

[+] gwd|4 years ago|reply
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.

[+] dkarl|4 years ago|reply
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."

[+] konrad_|4 years ago|reply
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.