1. 54
  1. 28

    Generally I liked it, but from some reason it discourages square-style borders in designs. One answer treats a square border as a wrong answer, but that’s just a style issue. I don’t see anything wrong with square borders.

    1. 31

      Also, having the “skip” button just be text instead of being an actual button is somehow the “correct” design.

      1. 6

        You’re not alone. That’s an aspect of mobile platform standards that plenty of people in the design world aren’t wild about.

        1. 11

          I am not in the design world but I really want to punch somebody for this. Either give me a choice or don’t give me a choice. Don’t hide half the options under different design. This is the standard cookie bullshit dark pattern.

          1. 4

            Oh yeah, you’re talking about the “option that preserves your privacy is diminished” dark pattern? Agreed. That much is not a platform standard. What I was referring to as a platform standard that many designers don’t like is for buttons to be borderless.

        2. 2

          With a single ‘highlighted’ option it makes speed-nexting easier.

          Too bad most organisations put the anti-user option as the default whenever they could.

        3. 10

          What’s not explicitly stated here is that these designs are in the style of popular mobile standards like the stock iOS search bar or Material Design in the share prompt. In mobile app development we often try to keep consistency with other apps. Users switch between apps quickly and they need to be more similar in terms of appearance and layout to keep the friction to a minimum. Colors and fonts are fair game to change, but shapes, capitalization, putting the confirm button on a certain side, etc. are viewed as having a correct (conformant) answer. At least, that’s a common viewpoint.

          On a web app, go nuts :) In that case it’s all up to your own design system, and I agree fully.

          Another possible interpretation of “correct”: Your designer gave you the intended appearance. You built it. Now it looks like this. Either the design or implementation might have introduced a mistake, but either way the buck stops with you. Is it right? “Did I do this correctly” is an everyday question for mobile app developers.

          1. 1

            As others have said it’s more about consistency. If there are two rectangular items, and 6 of the 8 corners are rounded, then the smallest change that achieves full consistency is to make all 8 corners rounded (requires changing only 2 corners) rather than making all 8 sharp (requires changing 6 corners). Even more so if rounded corners are the default style of the platform (which they often are these days).

          2. 25

            Most of the examples are excellent examples of how small details matter a lot. But some of these examples illustrate why some of us (including yours truly) think that, in general, UI design has gone downhill in the last 10-15 years.

            • Some of the examples look identical in low-contrast settings, or on monitors with a particular image gamma (e.g. there’s an example where the wrong design has a slightly different tint color – the two look identical on my MBP M1 and, ironically, are obviously different on a 12 year-old monitor). This is not something users always have control over. If you’re in a low-lighting environment, you have a low battery, you’re in a dusty environment, or you’re just on a bad monitor (or a combination of these three), you really can’t do much about contrast.
            • Some of the examples (like the search button where the “border radius” is supposedly incorrect, or the one that supposedly has too thick a separator) are simply subjective. This is not a matter of design, it’s just a matter of taste – or, as it is more commonly referred to, a matter of bikeshedding.
            • While consistency is obviously one of the things that the rules are meant to enforce, several of the examples fail in the most obvious way possible – similar elements (e.g. buttons) look like entirely different classes of elements. E.g. in one of the examples there are two buttons – one of them has a border and color, the other one doesn’t (to add insult to injury, the font is identical to that used for general text). Ironically, there is one example where they both look the same – and that’s supposedly incorrect, because “one button with default style”. (I.e. only one button is supposed to have the default button style – the fact that the other one looks like a non-interactive element isn’t a problem though).
            • In some cases you’re supposed to spot the fact that a “destructive action button” should be coloured red. Said button shows an old-school phone receptor. Indeed, without the red colour, you wouldn’t know what the button does – because the colour is a stronger indication than the icon. The icon doesn’t mean anything. The “correct” design is certainly better than the incorrect one, but it still sucks.

            These aren’t problems with the examples per se, they just show how arbitrary things are. Some of them – like the “default action” button – literally used to be anti-patterns at one time (big, highlighted checkboxes vs. default-styled, subtle-styled widgets were how you got additional toolbars in Internet Explorer by mistake, or how you sent “join ” to all your inbox contacts because you couldn’t find a way to skip that step) and have been promoted to good practices later on. There’s no surprise there – a good chunk of the mobile app ecosystem is fueled by the same advertising companies/communities that gave us things like the Lycos Toolbar and whatnot back in the late 90s/early 00s.

            1. 12

              So I learned today that thicker than 1 pixel separators are incorrect.

              1. 5

                Needs more complete explanations. Using the shift button to make the differences obvious helps a little, but in some cases, it’s not clear why one is better than the other.

                1. 4

                  Maybe I am the one not getting it but everyone in this thread seems to be reading this game as “these are good designs vs these are bad” instead for me it was taking a “base design” and making ever so slight modifications to see if the player “can see it” and once the game shows the difference then the player “can’t unsee”.

                  So it’s not a way to tell people they are right or wrong in their design choices but rather a tool for non-visual people to fine-tune their awareness of tiny visual differences and being able to point them out specifically. That’s my read of it at least.

                  1. 3

                    I understood it as this as well. I took it as, “This is how Facebook is set up. Can you detect it?” This perspective is also supported by clicking the “For Business” link at the bottom of the page, which says:

                    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.

                    1. 3

                      If that was the case, choosing between two similar designs and being told you’re right or wrong doesn’t seem to fit. Like, I could tell the difference between the separator thickness, clicked the thicker one because I thought it looked better, and got a big cross in my face.

                      1. 1

                        But… the game literally tells you if you’re right or wrong in your choice, and you’re penalized if you’re wrong. It’s not a “spot the differences” type of game, where you get to click and highlight differences – you’re also supposed to pick the right choice.

                        In order to get a high score in the Can’t Unsee game, you don’t have to just spot the difference, you’re also supposed to point out which of the two variants is “right”. Spotting the difference isn’t enough.

                        1. 2

                          Whether or not the language of the game is effective at conveying its intent, information available on the website seems to suggest it. The use of the strange phrasing, “and other people who job with technology” tells me that maybe the designer’s mastery of English isn’t the best (or they’re making a joke, or they’re not as good with the proper use of words as they are with graphic design). It’s not a stretch to consider their use of the word “correct” within the exercise as meaning “aligned with the real website” given their specifically calling out the exercise as being related to attention to detail.

                          I get the sense from most of the replies here that people are upset at having felt like they failed a test, and now they’re expressing their frustration at that. I don’t think it’s unreasonable to feel this way. There is useful criticism in saying that the website does a poor job of laying out its intent (why isn’t it front and center on the first page, for instance?) but I think anybody being critical of it because they view the site as a value judgment about design features might be missing the point.

                          There’s very little language on the site, and it’s telling that people have pasted their own meaning of the phrase, “Select the design that’s most correct.” as either meaning “better than the other one” or “right by some objective measure of design” instead of simply the one that is actually present on the source material.

                          1. 1

                            Their “for business” description makes it sound like one of those “spot the differences” games we had in comic books back when we were kids, but the game is not like that, and the fact that they insist it’s just like that doesn’t magically make it so. Those games only had you spot things like Mickey Mouse having a square belt buckle in the picture on the left, and a round belt buckle in the picture of the right. They only asked you to spot the differences, not pick the picture where Mickey Mouse is dressed right.

                            This is a game that’s supposedly about attention to detail, but getting the right score – by which, in their “for business” package, you could pass or fail a job screening – requires not just attention to detail (i.e. spotting differences), but also making a quality judgement.

                            For example, in the question related to colour tint, you’re not just supposed to spot that two buttons differ slightly in colour (which, by the way, says more about the quality of your monitor than about your attention to detail, but anyway) – you’re also supposed to pick the one with the correct colour. And you’re supposed to do that without any context. I could believe it was about attention to detail if, for example, the correct answer would be correct because the shade of red on the button matches the shade of red in other design elements of an app or a page. But that’s not the case. You’re just given two pictures, each of them including a single red button.

                            Cynically, but I’ve been at it for a while and I wouldn’t be surprised if this were the case: they have to make the “official” desription of the commercial package about “attention to detail” rather than taste or design skills because otherwise it would be hard to sell. First, because if you make it about particular design choices, any recruiting consultant worth their money will ask you what good it’s going to be 12 months from now when design trends change, and now you gotta update it every six months. Second, because if it’s going to be marketed as a tool for screening and interviewing, it has to claim it measures objective metrics, otherwise corporate recruiters won’t want it, for a long list of reasons that starts with accountability and ends with legal risk – while small-time companies aren’t going to pay for that.

                    2. 3

                      Fun(*) way to practice spotting smaller design issues.

                      On your way to reach master status: https://xkcd.com/1015/

                      *) and very annoying at the same time.

                      1. 3

                        i threw tutorial 3 through image diff, and it’s literally the same picture

                        i feel like i’m at a wine tasting event

                        (https://cantunsee.space/static/media/T22.cee961a1.png, https://cantunsee.space/static/media/T21.51a7913d.png)

                        1. 7

                          The left chat bubble juts to the right quite a bit, past the text it should be enveloping equally on all sides. You might want to adjust the contrast on your monitor.

                          1. 3

                            it was contrast

                            anything above ~5% on the slider in osx, and the left text doesn’t have a bubble around it at all

                            (forgot i increased it when trying to use my laptop outside. everything looks dull and grey now that it’s back to normal, until my eyes adjust)

                        2. 2

                          “one button with default style” was the reason it is wrong to have skip and give up personal information be the same color while from my point of view both of them will equivalently progress you towards the goal of “using the damn app” so they should have the same color. I’d even argue that if the heuristic he gave is correct then skip should be the favored option.

                          I was waiting to see how “choose the more correct design” would become subjective, it was doing quite good till that point.

                          Edit: very next example was search vs Search for placeholder text. As a command line person I have been converted into a lowercase everywhere style and if this was configurable (placeholder text) then I would choose the former.

                          Edit2: I found that I can consistently guess the worse one instantly if I go very fast, it’s easier to spot the one “where something is wrong” than where “everything is right” which makes sense from an algorithmic standpoint (exists vs forall).

                          1. 1

                            This is funny, because the text in the progress bar isn’t properly aligned on my machine.

                            1. 1

                              I recently switched to a telephone with an e ink screen that only shows grayscale. It has been a lesson in accessible design. So many UIs are utterly unusable without color. I rage quit this website after about the images.

                              1. 1

                                Cool site! About 1/4 of the “correct” answers were actually not, or at the very least arguable. But I realize my opinion might be like wanting ketchup with your well done tenderloin steak.