Web Design... Monday?

February 4, 2019 10:17 PM

Can't Unsee - Web/Frontend Design Challenge The premise is simple: Pick which image is the right one. Don't pick the flawed one. But the difficulty ramps up nicely. Great way to practice discerning mocks from outcome. By Alex Frantic
posted by CrystalDave (62 comments total)

I gave it a try and I don't get it :(

What does "correct" mean in this context?
posted by Vesihiisi at 10:20 PM on February 4, 2019 [5 favorites]

Correct means the one with proper design (layout, margins, usage of icons, etc). It got tedious really fast.
posted by Foci for Analysis at 10:31 PM on February 4, 2019 [7 favorites]

6930. It's fun. Some are pretty sneaky.
posted by scrowdid at 10:36 PM on February 4, 2019 [1 favorite]

For some of these it's basically impossible to know what's "correct" unless you've seen the real world version IMO (like, both of those separator line lengths seem reasonable to me? this is probably why I'm not a designer). I kinda want to see the listing for that '72 Telecaster thinline for real now though.
posted by btfreek at 10:37 PM on February 4, 2019 [5 favorites]

I've quibbled about a few of these, but I just hit one where color used give semantic information was the "correct" answer and that's a big no-no due to a not-insignificant percentage of the population with color perception issues.
posted by figurant at 10:44 PM on February 4, 2019 [25 favorites]

was it giving the semantic information or reinforcing the semantic information? If it's the one for destructive actions are red, then you don't need the color to interpret the action of the button - the icon will suffice for that. But adding the semantic color reinforces that, and worse than that the bad mockup uses the a color that is semantically the opposite, if I recall right, which could lead to confusion.
posted by vibratory manner of working at 10:48 PM on February 4, 2019 [2 favorites]

6630 Completed in 00:13:11. I feel pretty good about that considering I'm a bit color blind.
posted by dagosto at 11:07 PM on February 4, 2019

For someone who's seen UI designs from the past 4 decades, but has never used whatever apps these are from, most of this test is really alien. Some line width is "correct"? Maybe in your office in February 2019, pal.
posted by zompist at 11:08 PM on February 4, 2019 [19 favorites]

> If it's the one for destructive actions are red, then you don't need the color to interpret the action of the button - the icon will suffice for that.

This is where I tripped up too, but maybe I can learn a thing here. What about the icon implied it was a destructive action so I could infer it should have been red?
posted by adamt at 11:17 PM on February 4, 2019 [4 favorites]

Oh no, you've done it, you've unleashed the basilisk from five posts down.
posted by Pyry at 11:22 PM on February 4, 2019 [5 favorites]

Protip: Cross your eyes until left and right overlap and fuse together and the differences will often jump out in 3D.
posted by M-x shell at 11:40 PM on February 4, 2019 [4 favorites]

It gets easier once you realize that the correct version doesn't change. So something like icon color, which I figure is entirely in the realm of design fad, still has a correct answer, because hopefully you have already seen the correct version.

This test makes me suspect that an intentionally glitchy, "incorrect" design might have a certain humanity or something. It's a little bit like a poorly cut rubylith effect in the era of digital prepress (or really bad color registration, which you still sometimes see, but it's nowhere near as common as it used to be)
posted by surlyben at 11:49 PM on February 4, 2019

This is bullshit from the word go. the very first non-tutorial comparison for me was a sales listing image for a '72 Fender Thinline. The "correct" image presented the midsection of the guitar's body, cropped and enlarged, to fill the space. I am an actual buyer of vintage guitars, and what I WANT, what engages me, is an image of the guitar that presents as much visual information as I can assess, specifically in order to NOT CLICK INTO BULLSHIT. A cropped image, while it follows rules about hiding information in order to increase clickthroughs, is what hate in the the world and strive to avoid. So the seller has not engaged me, and I developed mistrust with regard to the platform.

In conclusion, take a hike, Alex, and do it with the anti-usability horse you rode in on.
posted by mwhybark at 11:59 PM on February 4, 2019 [29 favorites]

I aced this at speed run speeds on a crappy phone, but I grew up hand kerning and pasting text in a print shop. But at least five of them I got right just because it looked wrong so I just clicked the one that looked less wrong and I didn't know why until after comparing them.

After a certain number of hours in design work things just pop out to your eye as wrong or unpolished, and that's about the same point in time that junk mail and crappy websites start to irrationally irritate you.

And now? I find it really irritating I can't seem to get two independent vector paths with pairs of acute, opposing miters to match up at their points with reliable precision even though I created the opposing pairs of miters cutting them out of vector A with a trim operation from vector B, short of using actual CAD software.
posted by loquacious at 12:00 AM on February 5, 2019 [4 favorites]

color used give semantic information was the "correct" answer and that's a big no-no due to a not-insignificant percentage of the population with color perception issues.

as noted, bullshit from the word go. skip this nonsense, it's ill-considered at best and far from worthy of your time.
posted by mwhybark at 12:01 AM on February 5, 2019 [1 favorite]

7130, in 19 minutes, I used the cross-eyes trick, and a few of them were still insanely subtle.

The cropped guitar one, as mentioned above, was the only one that seemed arbitrary to me, the rest, whether I got them correctly or not, seemed fair.
posted by fnerg at 12:18 AM on February 5, 2019

7180 in 15min. This was fun if only because I've spent a good chunk of my career trying to figure out what the hell designers want me to do and what the terms they throw around like everyday words mean. And I kinda get some of it now. At least until new design trends come in. I've seen a lot of different buttons over the years. I've seen some shit!

There's definitely a few I just picked the one that looked "right" and after compared and it was something like icon alignment or the circles were misshapen in the "wrong" one but I never could have pointed that out specifically.

Those of you wondering what's "right," it's current design trends + consistency. It's not right like you're a bad person if you don't like/get it. It's "right" like it'll get you a design job I guess.

I think the phone is a "destructive" action because it takes you away from the current view/app. The other actions presumably keep you there looking at the thing.
posted by DyRE at 12:39 AM on February 5, 2019 [2 favorites]

This is bullshit from the word go.

I had the same fender guitar problem! I've agreed with most of the other answers, but at some deep level this all rankles me because it assumes that the "correct" answer is the thing that we have been trained to think is prettier - design that has been served from the context and specifics of its use.
posted by Going To Maine at 12:40 AM on February 5, 2019 [1 favorite]

Or, more problematically: design that has been deemed correct because it is common and blessed by Apple, not because it works.
posted by Going To Maine at 12:41 AM on February 5, 2019 [10 favorites]

6980 which I’m pretty happy about given that I’m not a UI or web designer. I just get annoyed about this stuff as a hobby, I guess
posted by aubilenon at 12:55 AM on February 5, 2019

6080, but I'm seconding the bullshit call. The very first slide has a typo in the correct slide, but somewhere down towards medium/hard level, all of a sudden typos matter.
posted by romakimmy at 1:00 AM on February 5, 2019 [2 favorites]

It is perhaps telling that Alex Frantic works at Facebook. He has a certain interest in the big three's consensus look and feel, or is it a minimum scoring in the middle of it and soaking it up.
posted by Going To Maine at 1:08 AM on February 5, 2019 [1 favorite]

This would all be much easier to swallow if it instead of "correct" it said something like, I don't know, "consistent with Apple's iOS interface style guidelines" (which I assume exist, since these images look exactly like iOS apps and not nearly as much like interfaces on other platforms). Hopefully that's just because of an oversight, and not a limited design worldview or some kind of parochial sense of superiority.
posted by a car full of lions at 1:56 AM on February 5, 2019 [9 favorites]

The test does assume we're all familiar with those interfaces, doesn't it. It'd have been nice to see, before the test, examples of the 'correct' (by which the test means 'intended') designs.
posted by Fraxas at 2:03 AM on February 5, 2019 [1 favorite]

Omg, a car full of lions, thank you! I've never used IOS so I guess that's why it mostly looks arbitrary to me.
posted by Vesihiisi at 2:04 AM on February 5, 2019

For everyone "calling bullshit": It's not about picking which one is better as much as which one fits with the design language of each platform, respectively: Apple's Human Interface Guidelines and Google's Material Design.

As an app developer I did pretty well, but found iOS way easier. Guess what my personal phone is.
posted by flippant at 2:22 AM on February 5, 2019 [3 favorites]

Here's the thing, though: if you're an interface designer, one of the things you're expected to know is what everyone else is doing, so you don't arbitrarily change semantics, because arbitrarily changing semantics genuinely trips up people who use your interface and then use someone else's interface. You can see why this is necessary when you look at open-source, where nothing is consistent, the interface is whatever the programmer preferred, and nothing's in the same goddamn place unless they're following Windows conventions.

Platform guidelines exist to force everyone to shoot at the same clear target instead of inferring from what everyone else is doing.
posted by Merus at 2:30 AM on February 5, 2019 [8 favorites]

7530 in 15 minutes. I fully acknowledge I spend way too much time obsessing over this stuff when I do UI design.

As an aside, I once had the opportunity to do one of those secret lab things at Cupertino, and it was there that I learned just how Apple manages to make its UI and animations so polished. It's not genius or even necessarily skill, it's just spending way, way, WAY more time than anyone would think is reasonable on getting it 'right', a bit like how magicians do their work. I was kind of like, holy shit, in the amount of time we spent on this UI, we could've made a new feature and fixed a bunch of bugs ¯\_(ツ)_/¯ It was very relieving to me, I'll say that.
posted by adrianhon at 2:50 AM on February 5, 2019 [4 favorites]

5530 in 9:33 and I don't own any Apple products. There was never a point where I didn't see it, but guessing what Steve Job's rule was felt like an exercise in iPhone self-fellating.
posted by Nanukthedog at 2:58 AM on February 5, 2019

The text bubble width one was totally wrong. You only get a text bubble twice as wide as the single word in it if you type a bunch of spaces after it.

I mean unless they changed that in an update.
posted by Mister Moofoo at 3:20 AM on February 5, 2019

And like 6670 in just under 12 minutes but I probably just guessed on the last ten.
posted by Mister Moofoo at 3:21 AM on February 5, 2019

The red phone icon tripped me up, because that's the color for hanging up a call, and there was no way for me to know if there was a call going on. I'm not in a call, and seeing as this is a cell phone, and no one uses these for that anyway, I assumed no call. So no way red can be right.

Similarly, the one with the color dot, and the "2 hr ago" line. I thought we were using green for "online now"? When did we switch to blue?

Also, both of those are broken, for the aforementioned accessibility issues.

Also also, the rounded corners being right thing us like someone never fought in the IE6 trenches. Noobs, taking their rounded corners and alpha transparencies for granted.
posted by mrgoat at 4:17 AM on February 5, 2019 [2 favorites]

This is a test for UI design, not usability. The two overlap a lot but I think this test actually does a nice job of showing that there is a tension between the two, which is the challenge of UX design.
I enjoyed it but couldn’t finish as I have a sleeping baby on me that was about to wake. But it did make me look forward to going back to work!
posted by like_neon at 4:32 AM on February 5, 2019 [2 favorites]

To me, the downward-facing phone was a pretty clear indicator for "hang up" (mimicking the action of returning a landline to its cradle) so it made sense that the icon should be Red.

But yeah, definitely wish this had some more background about why things like a certain line width or rounded box corners are "correct".
posted by firechicago at 4:51 AM on February 5, 2019 [2 favorites]

I used to think that anyone could design webs. Boy oh boy, was I wrong!
posted by james33 at 5:02 AM on February 5, 2019

Fender '72 Telecaster Thinline
Fender ’72 Telecaster Thinline
posted by oulipian at 5:11 AM on February 5, 2019 [8 favorites]

Re: why it matters if the line is slightly thicker in once versus the other--

In modern design, a thicker line is often used as a progress indicator that something is loading. You don't want to subtly give the impression that the user should wait for something to load when they should not.

Any one of these subtle things alone probably doesn't make a huge difference, but the fact that designers use a consistent set of design patterns is what allows us to walk into a library or office and use their computers without opening up a manual And learning from scratch what that company intends their icons to mean.

It's also why so many people do walk into a library and need help doing things that we think are simple, like sending an email. They are not yet seeped in the conventions.
posted by tofu_crouton at 5:16 AM on February 5, 2019 [1 favorite]

Metafilter: design that has been deemed correct because it is common and blessed by Apple, not because it works.


Sorry, it had to be said.
posted by evilDoug at 6:29 AM on February 5, 2019

That was fun! Even in those cases where the 'correct' answer was a bit arbitrary, trying to spot the difference between the two images was a good challenge.
posted by Kilter at 6:37 AM on February 5, 2019

I like the fact that the quiz interface was a little clunky.
posted by Tell Me No Lies at 6:41 AM on February 5, 2019 [5 favorites]

H e n r i L i r i a n i
posted by adiabatic at 7:14 AM on February 5, 2019 [4 favorites]

I like the fact that the quiz interface was a little clunky.

somebody should make a quiz about choosing the right kind of quiz interface
posted by a car full of lions at 7:19 AM on February 5, 2019

Totally agree that the cropped Fender guitar photo is wrong, completely wrong. If you're buying a guitar, you want to see all of at a first glance.

And yeah, the phone icon color needs context. But most of them are pretty interesting in terms of seeing how subtle changes can affect things.

But damn it, people want to see the whole guitar
posted by Brandon Blatcher at 7:21 AM on February 5, 2019 [1 favorite]

Well, I got in the middle four thousands in 49 minutes. I was feeling even more inadequate than usual until I remembered I opened the tab before I left for the coffee shop, so apparently “accurate timing” or “working program” != “web design bullshit”. Not surprising.

I almost threw up in my mouth when someone mentioned that the UIX geniuses aren’t into changing semantics at random. That is ALL THEY DO. My frigging phone and pad are filled with mystery-cult bullshit that changes arbitrarily over time: “wave three fingers over the bull and Mithas’ resolution will change,” “quadruple-touch on the wrinkled nub to jump to the Control Pod!”

There is Something That Happens to the pad sometimes and leaves me looking at magnified pixels. I just hard reboot it because there is no way to, like, search online to see how to fix it while it’s happening. Seems like an actual easy to use interface would have a universal “help” thingie that would take me to an unzoomed crib sheet for the Mystic UI.

If I wanted an arcane pile of mysterious crap I’d use EMACS. Oh, wait. I do use EMACS and it has A BUILT-IN MANUAL! Jeeze, I have to go breathe into a paper bag for a while...
posted by Gilgamesh's Chauffeur at 8:17 AM on February 5, 2019 [3 favorites]

While picking all those ”correct” answers, it irritated me that the apostrophe on that ’72 Telecaster was always wrong ('72). The guy who did this is obviously not a typographer. My score? 6530, with several lucky guesses.
posted by Termite at 8:18 AM on February 5, 2019 [1 favorite]

I got mad after the very first one, which had two buttons, "Invite Friends" and "Skip," on a white background. In the first option, both buttons are blue rounded rectangles with white text. In the other option, the "Skip" button is just plain text, with dark text on a white background, and doesn't look like a button at all. Apparently the second one was "correct?" Why? Shouldn't buttons look like buttons? Shouldn't it be obvious that "skip" is a choice you have? The "correct" answer felt a lot like a dark pattern, so it felt unsurprising when I saw that the creator works at Facebook.
posted by valrus at 8:32 AM on February 5, 2019 [6 favorites]

oulipian: "Fender '72 Telecaster Thinline
Fender ’72 Telecaster Thinline"

$750, same as in town

[p.s. I see what you 'did´ there]
posted by chavenet at 8:54 AM on February 5, 2019 [2 favorites]

Oh man, this reminded me of work. In the absence of well-defined design standards, creating mockups feels a lot like going “ketchup... catsup” and eventually you pick the slightly more rounded corners or the slightly bluer shade of green and send it off and the client glances at the thumbnail for half a second and is like “cool, let’s go with that one.”

There are a lot of rules to design, and there are a lot of ways to make something elegant, compelling, easy to use. And then there are a lot of teeny bits that don’t make much of a difference either way but you still get hung up on trying to figure out which way is “right.”
posted by Metroid Baby at 9:08 AM on February 5, 2019 [3 favorites]

Yeah, this seems more like a design shibboleth test than a design test. Like, there's no general guideline saying "rounded corners are better," that's just following iOS conventions (which, despite Apple's insistence otherwise, are NOT web design conventions). If this was pitched as an iOS design test, then sure.
posted by chrominance at 9:17 AM on February 5, 2019 [1 favorite]

color used give semantic information was the "correct" answer and that's a big no-no due to a not-insignificant percentage of the population with color perception issues.

Color perception issues aren't a reason to not provide semantic information with color. They're a reason to not provide semantic information ONLY with color, sure. But just as traffic lights provide both color and position, so should buttons like that provide multiple ways to communicate that information.

And if you can't, or even if you can but you aren't able to communicate quite as well what something does, that's where various accessibility features come in, like the "distinguish without color" option in OSX or Discord's color-blind mode. Even Discord's color-blind mode, for example, preserves the usual colors of the active/idle/unavailable statuses; it just adds distinctive marks to those status icons. Making sure that things are still accessible for people without red/green color vision is important, but it doesn't override all other considerations. If there was another color that indicated "danger" just as well, then obviously that would be the best choice, but there isn't.
posted by Sequence at 10:33 AM on February 5, 2019 [2 favorites]

I think the search box with 'Search' in it was where I nearly threw my browsing device across the room.

Apparently it shouldn't have been low contrast. I think it should have been low contrast as 'Search' was clearly a label for the box, not the actual contents as entered by the user.
posted by edd at 11:55 AM on February 5, 2019

Apparently it shouldn't have been low contrast. I think it should have been low contrast as 'Search' was clearly a label for the box, not the actual contents as entered by the user.

Eh, low contrast placeholders annoy me. Placeholders shouldn't be full contrast, sure, but at least medium or so or else they can be super hard to read.
posted by kmz at 2:42 PM on February 5, 2019

The worst placeholder I found stays in the edit box when you edit, so you click in there and start typing and then wonder why "ExaMeatFiltermple" returns nothing.
posted by M-x shell at 3:33 PM on February 5, 2019 [1 favorite]

Shouldn't it say "Select the design that is more correct", if it's only giving you pairs to choose between?
posted by Earthtopus at 4:50 PM on February 5, 2019

6930 in I don’t know how many minutes, but honestly, quite a few of them were like “What’s the standard in your style guide?” coin flips. Obviously, consistent padding and kerning and type weight matter, but things like “the 1px line separator vs. the 2px line separator”? There’s no right answer there.
posted by Autumnheart at 5:16 PM on February 5, 2019

7130, 19 minutes, crossviewer. But I'm somewhat colorblind and the variants of the on-call phone one is what I missed most often. It was kinda fun though.

I aced all the keming-related ones.
posted by glonous keming at 7:13 PM on February 5, 2019 [1 favorite]

I stopped after being told that an ugly-as-fuck button with a change from all caps to mixed case in the middle of its text was, in fact, Correct, followed by being told that two absolutely identical images had different padding on the text boxes.
posted by egypturnash at 8:16 PM on February 5, 2019

6430 in 10:15

soon after I missed munber number typo I crapped out

disclaimer : built web layouts to match or improve graphic designs professionally for ~3 years

in creating new innovative comps (comprehensive static mock-ups), the designers I worked with would gauge by "feel" - this approach helped when the difference did not stand out

not familiar with cross-vision technique but taking a break and taking a fresh look one-by-one is useful (samples were too close together in this app; yeah, their layout skills could be improved)
posted by gkr at 7:15 PM on February 6, 2019

@valrus, yes that technique is used to favor the author's choice, usually Accept/OK not Cancel/Exit
posted by gkr at 7:19 PM on February 6, 2019

I worry about inclusive usability, and enjoy getting things pixel perfect, but I do always wonder about things like border radii and decoration alignment - if the only people who can even tell something is off are people with design experience, what's the point? Yeah, this jpeg is ridiculously low resolution for this print size, but nobody even notices apart from me.
posted by lucidium at 5:11 AM on February 7, 2019

Gilgamesh's Chauffeur: There is Something That Happens to the pad sometimes and leaves me looking at magnified pixels.

The pad interpreted something you did as a three-finger-hit which magnified the screen. Tap it with three fingers slightly spaced apart and it should zoom out again.
posted by Deoridhe at 12:33 PM on February 7, 2019

This is amazing. I can spend hours on the website. Being an interaction designerI am obsessed and I am OCD with details in a design. When developing click-thru prototypes for products I take into account these key details to enhance the experience of my users.

Some of the cards shown in the game can vary by styleguides and the design system, but many of them really apply in general for a better UX.

For e.g. padding and margins can be very specific to a styleguide or design system but having a red destructive button to cut the call is universal and we are kind of wired to pay attention and makes perfect sense to alert the user that it is going to STOP the call very much like physical things like the RED STOP sign, RED STOP on the treadmill, you cannot (may be you could, if you want to!) have a GREEN or BLUE button to stop because green means to move forward or doing something positive but the action coming out of it is negative or the opposite.


Nice job Henri! 😊
posted by Vidu at 5:42 AM on February 9, 2019