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 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.
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.
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.
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".
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.
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.
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.
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.
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.
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.
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.
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...
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?
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.
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.
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.
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.
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).
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.
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 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.
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.
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.
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 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.
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!
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.
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.
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.
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.
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.
129 comments
[ 4.0 ms ] story [ 197 ms ] threadOne 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".
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.
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".
Either way, it looks like a part of a grid with multiple product cards. The full photo would be on the product detail page.
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.
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.
It might be the approved guideline in official design documentation but it doesn't mean it's a fair design for the user.
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
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/
Depends on the goals...
I'm betting it's the perfect design for what it's intended to achieve.
This needs to be regulated against, it only grows and gets worse over time.
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...
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.
* choose the correct drop-shadow for headline text
* is inner bevel or outer bevel more "corporate" looking?
* 20px rounded corners should be applied to:
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.
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 was really pleasantly surprised.
Still a good site about how important typography, spaces and small details can be.
https://cantunsee.space/business
If they can't pass their own test, should I be trusting their testing method?
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.
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.
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.
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.
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.
I guessed and got it right but thats what was being evaluated?
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?
Edit: wow, looks like HN itself trims excess padding. I had written "Okay\s\s\s\s\s\s"
Edit: Okay, well, I got
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.This place sucks. I wish there was a way to delete my account.
2hr ago is not “active” state
IMO it would stay green like 15-30 mins after the person was online max.
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.
Honestly I thought this was going to be more like an eye-test where it A/B's the elements into increasing visual frame.
https://imgur.com/DesCfwm
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.
A little bit can make things look more friendly sometimes but I think modern design overuses it by a ton