43 votes

cantunsee.space: Test your attention to detail in UI design

Tags: design, ui, ux, game, details

14 comments

  1. [8]
    balooga
    Link
    I like the presentation and a lot of the challenges, but it's frustrating when the border radius or icon color of the item I chose is proclaimed to be "incorrect." Most of these are legitimate,...

    I like the presentation and a lot of the challenges, but it's frustrating when the border radius or icon color of the item I chose is proclaimed to be "incorrect." Most of these are legitimate, quantifiable usability or UX issues, but some of these boil down to style or taste.

    26 votes
    1. [2]
      acdw
      Link Parent
      I agree with you -- I was actually confused playing the game because I wondered whether "correct" meant "most like real-world apps," or "my opinion."

      I agree with you -- I was actually confused playing the game because I wondered whether "correct" meant "most like real-world apps," or "my opinion."

      7 votes
      1. Octofox
        Link Parent
        One of them was just a button that border radius and another one that didn't there were no other buttons in the image so how are you meant to know which one is "correct"

        One of them was just a button that border radius and another one that didn't there were no other buttons in the image so how are you meant to know which one is "correct"

        2 votes
    2. [5]
      unknown user
      Link Parent
      I don't think the word "incorrect" is ever used on the site, is it? It's asking you to select the "more correct" option—i.e. there's no implication the wrong answer is explicitly incorrect, it's...

      I don't think the word "incorrect" is ever used on the site, is it? It's asking you to select the "more correct" option—i.e. there's no implication the wrong answer is explicitly incorrect, it's just less well-thought than the right answer.

      I personally haven't seen any challenges that I'd call completely stylistic in nature.

      5 votes
      1. [2]
        Gaywallet
        Link Parent
        I disagree. I think a search bar should have lighter text where it says "search" in the choice between lighter and darker, especially since it's so iconic and you know exactly what it's purpose...

        it's just less well-thought than the right answer.

        I disagree. I think a search bar should have lighter text where it says "search" in the choice between lighter and darker, especially since it's so iconic and you know exactly what it's purpose is.

        There was also a choice of a thicker or thinner line below a person's profile and activity indicator. Sometimes the difference in thickness was essentially insubstantial, and the author believed that a thinner line was better in all cases. I disagree, because the information below the line differs from that which is above, and it should have the correct amount of weight. But that's just my stylistic choice.

        15 votes
        1. [2]
          Comment deleted by author
          Link Parent
          1. Gaywallet
            Link Parent
            Agreed, I chose the curved one because it's kind of the standard to round edges in moderns styles, but it's definitely a stylistic choice.

            Agreed, I chose the curved one because it's kind of the standard to round edges in moderns styles, but it's definitely a stylistic choice.

            3 votes
      2. unknown user
        Link Parent
        Especially with the invite friends one, the "correct" is incorrect. I hate it when Skip buttons are de-emphasised or hidden. That is a bad first impression which says "I am trying to fool you into...

        Especially with the invite friends one, the "correct" is incorrect. I hate it when Skip buttons are de-emphasised or hidden. That is a bad first impression which says "I am trying to fool you into things here, because you are too lazy and or stupid to glance and find that skip button". Hostile.

        I also disagree on the fender jazzmaster pic in the ecommerce example. I'd rather see more of the pic than a close up in my face.

        This is more like an appreciation of the current apple desing language plus usual social media and ecommerce app deceiving tactics.

        10 votes
      3. balooga
        Link Parent
        Fair enough, "less correct" is not the same as "incorrect." Still, I'm not sure that I agree with the insistence of some of these, particularly at the harder difficulty, that one pixel more/less...

        Fair enough, "less correct" is not the same as "incorrect." Still, I'm not sure that I agree with the insistence of some of these, particularly at the harder difficulty, that one pixel more/less padding within an element is necessarily better. Don't get me wrong, most of the instruction on display here is spot-on. I just think there's a bit of minutiae mixed in that's too arbitrary to pass judgment on.

        6 votes
  2. [6]
    Gaywallet
    Link
    It's neat, but some of these choices, especially as you hit medium and hard level were basically "find the tiny fuckup" which was annoying to see text roughly 3px off center in such a small window...

    It's neat, but some of these choices, especially as you hit medium and hard level were basically "find the tiny fuckup" which was annoying to see text roughly 3px off center in such a small window and no easy way to compare 1 image to the other DIRECTLY ON TOP of each other like you can after you choose an option, which would greatly reduce the difficulty of finding waldo.

    Also, some of the choices are entirely stylistic, such as "how thick should the line be".

    This is a great tool though and I plan on showing it to my colleagues, as it might help to get them to think the same way I do, as the resident visual design expert.

    16 votes
    1. [5]
      Diff
      (edited )
      Link Parent
      Definitely agree with you on your first point there. This plays less like "decide which design is better" and more like "really obscure spot the pixel differences." I really don't think anyone can...

      Definitely agree with you on your first point there. This plays less like "decide which design is better" and more like "really obscure spot the pixel differences." I really don't think anyone can be expected to spot this without being able to overlay anything.

      13 votes
      1. [4]
        Arbybear
        Link Parent
        Anecdotal, but I could see that one.

        Anecdotal, but I could see that one.

        1. [3]
          cfabbro
          (edited )
          Link Parent
          Do you mean you could spot the difference as @Diff is presenting it in that mp4, where it's bouncing back and forth between them? Because I don't think anyone has trouble with that. Or do you mean...

          Do you mean you could spot the difference as @Diff is presenting it in that mp4, where it's bouncing back and forth between them? Because I don't think anyone has trouble with that.

          Or do you mean you could actually spot the difference even when initially asked on the site to pick the "most correct" one where they are simply side-by-side still images with no back-forth comparison animation? Because that is much harder, if not impossible IMO, to do. And if you could, that's actually pretty impressive.

          3 votes
          1. unknown user
            Link Parent
            You think wrong :) It took me a pretty long time to work out what was changing.

            Because I don't think anyone has trouble with that.

            You think wrong :) It took me a pretty long time to work out what was changing.

            2 votes
          2. Arbybear
            Link Parent
            I noticed on the site. I think I noticed the difference by looking at the spacing between the border of the circles and the edge of the icons.

            I noticed on the site. I think I noticed the difference by looking at the spacing between the border of the circles and the edge of the icons.

            1 vote