265 comments

[ 4.6 ms ] story [ 81.0 ms ] thread
I got a good laugh out of this for a few seconds before getting actually frustrated with it. Mostly because my bank does a lot of these terrible things.
i gave up on the second screen...
I didn't, which to me says I've been trained very well by terrible design.

If you manage to actually 'sign up' it tells you are a legend and rewards you with a Dancing Carlton gif[0].

[0] - https://knowyourmeme.com/memes/carlton-banks-dance/

Really? I couldn't seem to prove that I was human. I thought it just threw you into an infinite "prove you're human" loop at the end.
There is a vertical scroll bar. You need to check them all because they're all checks.
I scrolled down and still couldn't see the checkboxes under the last row. Maybe it also doesn't work on Firefox, because as trivial as it is to make a site that works everywhere no one does. Normally this frustrates me, but if that's the case here it kind of makes sense.
The checkboxes are actually above all of the images.

I tried scrolling down, realized I couldn't, then scrolled up to find the unfilled row at the top...

I’m pretty sure the top row of check boxes doesn’t appear until you scroll back up.
I did exactly that as well. I’m also happy that there appear to be several different captchas, as others mentioned ones I didn’t see. The best one I clicked through was “select every picture with glasses” and every picture had either eyeglasses, drinking glasses or panes of glass.
In case anybody missed the humor in this, like I did the first time round: all of the pictures denote some kind of "check". Like with the bows.

There are pictures of people checking things – a watch, and something else I can't quite see.

There are games of chess in a state of check.

There are monetary checks.

There are check boxes.

Mine was "select all checks" and had plaid cloth, chess kings in trouble, checkmarks, x marks, bank checks, etc...

The one that almost got me was the popup with the timer that said "hurry up" but instead of a "go away" box it had a "full screen" box. I don't know how you are supposed to get rid of that box, I had to inspect element->delete node to get past it.

I did manage to finish in a little over 5 minutes.

> I don't know how you are supposed to get rid of that box,

The bottom-left corner of the box says something like "©lose 2019." If you click it, it closes.

The copyright symbol at the bottom left is followed by "lose". Very insidious.

    Array.from(document.querySelectorAll('input[type=checkbox')).forEach(e => e.click)
Wait, how do you get to the second screen?
> Please click HERE to GO to the next page

The word HERE is a link, with styling and cursor set to look like normal text.

Made it to the end in 03:39. Beat me.

(Also, clarification: This was my first try.)

Ok, if you say so. Swings a baseball bat at you

I was at 7min, the last part got me. My thoughts were.. Ok, it probably just means light, so I check a few. Fails. Let me try again... Nope.

Five minutes later... what if it's all. No, it can't be that dumb. Bingo. Wow. It was that dumb.

Haha, how did you manage to pass the 4th page (image verification)?
I initially tried selecting all of the boxes, and noticed the bottom row didn't have any boxes. So I scrolled up, saw some more checkboxes, and selected those. It worked.
Gosh, now I feel special for making it in "only" 3:10... :P
Seriously? There's tons of stuff missing, at the very least a cookie banner ("we value your privacy not") and "aw, snap, we're having probs to bla blah blah" and social media icons. Also, it's known that call-to-actions must come in a group of three, and have cute vectors. See [1] on how to do a website.

[1]: https://www.reddit.com/r/web_design/comments/9pmqxb/typical_...

(comment deleted)
There is indeed a cookie banner, at least for me.
There is a big red cookie banner showing up at some point though.
I actually got a cookie banner, of course with the close button hard to find.
Yet the site of the people who made this (Bagaar) does not have a privacy banner but happily contacts Google Analytics, DoubleClick, HotJar and HubSpot.
This is pretty genius and has stuff that reddit video doesn't even try to show. Just a few:

1. Checkboxes ambiguously located.

2. Poor instructions in captchas.

3. Text field suggestions that persist when you click on the field.

4. Pointless validation on inputs

...

I'm very surprised there's no "sign up for our news letter" pop up and "hey don't go yet" when you move your mouse towards the close button.
Worst practice? Seems to be a pretty standard website ;-)
Alas, it was all terribly familiar.
This is incredible. Pleasantly surprised every 2-3 seconds by things I didn't even think of.

"Oh, it didn't mean whole email, just the first part"

"Hmm tab doesn't work"

"Oh, it didn't mean whole domain, just the first part"

"Where's .com, oh I see"

"Wait 'Next' isn't the big blue button?"

"Oh I see, that big red message means my password is good."

The 'How can we help' arrow just makes it grow slightly taller. Over and over. Heh heh heh.

And that was just the first page! This is fun, had me genuinely chuckling quite a lot.

Two that made me laugh and think were on the last page:

Choose images that contain a bow, where the images were of bows (archery), bows (ties), bows (hair ties), and bows (gesture).

But then they really got me with the checkboxes for those images. You think they're beneath the images, but they're actually above and the frame was just scrolled down. You don't realize until you get to the bottom row and don't see any checkboxes

> But then they really got me with the checkboxes for those images. You think they're beneath the images, but they're actually above and the frame was just scrolled down.

I saw that immediately, but it still got me, because I tried to scroll down, thinking the checkboxes were beneath.

The "Select All" box killed me
Same! Until I found the "Unselect All" box and was happy again.
Well, for me unselect doesn't actually work. To top it of I can't deselect some choices and no matter what it won't work. Stuck here.
Its so terrible I love it.
Instagram does something similar if it detects that you are on mobile. A huge banner advertising their app is displayed, and the [x] in the top right corner is almost impossible to hit.
Better than yelp (and some other sites I'm sure) which literally demand you install the app, ie provide little to no functionality on mobile web.
Facebook Messenger is the worst for this if you try and use the mobile site (which is otherwise quite capable).
Player.fm has the worst of those I’ve seen, I can hit collapse HN thread reliably but their comparatively huge x takes 3-4 attempts on mobile.

I loathe it so much I stopped using it entirely and just book marked my favourite podcasts like a filthy savage.

Every developer should be required to use this site daily for a month, before they can graduate. Simply using it once isn't enough ring home what you'll put your users through
It’s not the developers, do you actually think they want this?
The "CAPTCHA" at the end is so on point. What exactly is a "bow"?
We should make a website that does everything in the opposite way:

1) Require adblock

2) Banner saying the website doesn't use cookies, which goes away if you mouseover

3) If you're on mobile, show a banner saying the website doesn't have an app

4) A signup form, but when you try to focus it, it turns into a banner saying "jk this website doesn't have signup"

(comment deleted)
I like your idea, but it depends on what you see as "the opposite". There's already an opposite in existence:

1) Not complain about adblock (ie. silently allow it instead of moaning).

2) Simply don't use cookies.

3) Don't mention app (which is often just an Electron frontend anyway) in any way.

4) Allow the website to be used without signing up.

These 4 examples used to be the default back in the early days of the WWW.

I rather miss those early days. Web 1.0 is looked down on for its visual clutter (and definitely the hatred of image backgrounds and animated text was well-deserved), but Web 2.0 has just as much if not more clutter, and of a darker nature.
My kids always insisted on using the blink and marquee tags together :O
I’m not sure why the overlords of HTML had to remove blink in the first place.

I have a daily need for both tags.

The current web isn't anything like Web 2.0. Web 2.0 never happened, except in tiny isolated pockets. It's a terrible name anyway - it indicates a natural progression (which never happened), a clear improvement (which didn't materialize quickly enough for anyone important to care) and incompatibility with the past (which was never necessary since semantic components can be embedded in a normal web site). We're currently at Web √(-2) alpha-Google-2-Facebook-4-patched-0af33cd.
It boggles the mind to think of how much resources (time and money) have been spent so that control freak corporations can control my user experience from the server when I have a rich client under my control.

The whole web is backwards these days; users should’ve able to download themes for different kinds of content and the content itself should be barely human readable self-describing text with no layout instructions, only hints (like title and h1 and p)- leave it to the client to choose how to display.

I think it's extremely important that the text going around on the web be human readable and notepad editable. It really lowers the bar to start creating content rather than just consuming it.

Obviously it's a minority that do, but the potential itself has value I think.

So, I'm younger, but there was absolutely a shift in thinking from web 1.0 to 2.0 in that 2006-2008 era. You could even call it the Ajaxian era. http://ajaxian.com/

I read that blog every day and the techniques and tooling (jquery/mootools/etc) absolutely shifted the thinking that birthed our "modern" react/vue style single page app.

This is like saying that Classical -> Baroque never happened because people still paint in a Classical style.

No, what happened was that a lot of people said "web 2.0!", a bunch of other people said "AJAX!", and only the AJAX thing actually happened. Web 2.0 meant the semantic web, not the asynchronously loaded web.
For as far as i remember 'web 2.0' meant replicating Mac OS X's Aqua on the web (very poorly, of course) with gradients and shadows (not necessarily through CSS, thanks to IE6, but it helped) and unnecessary javascript everywhere.
My favourite sites are Hacker News, and similarly reddit with the old design and custom themes turned off. Functional, clean, content focused, and high - but not too high - information density. There are changes I would make to both, but there are reasons I got addicted to them.
5) High-contrast motion graphic ads right next to what you are trying to read.
maybe: 2) only works with cookies disabled for the site

otherwise:

5) works better with Javascript disabled

6) works better in Firefox than Chrome

7) doesn't work if it can read your referer

> 5) works better with Javascript disabled

Ironically, I find there's (broadly) two sorts of JS-enabled website:

- completely broken without (often just a blank canvas) - works better without than with

The most entertaining 'works better' example I've had is a site that gave me a free upgrade, because I was blocking client-side price manipulation.

Google Maps however: block canvas fingerprinting, and it's Goodbye CPU!

Google Maps uses the Canvas API to draw the map. If you disable it, what do you expect to happen?
Server side map tile rasterization like the old days, maybe
It still works (perhaps only some of the API deemed 'fingerprinty' is blocked, I don't know) - slowly - it just shoots CPU usage up and battery down.
5) Just sends you a newsletter
or is just stapled to the telephone pole on the corner
(comment deleted)
And a mandatory "Please disable javascript"
(comment deleted)
How about having the Log In dialog prominent and the Sign Up dialog more in the background.

I sign up only once, yet every website makes it hard to find the login dialog which I use way more often.

This was the most fun I've had while building a ton of anxiety
My touch screen does not click. You immediately lose.
Is it possible to get past the verification stage? It just keeps recycling the same images over and over...

Maybe I need to drink a verification can to help it along

You have to select every image. Because all of them match for some definition of whatever word you get.
Ugh, I thought there were a few in there to trick me. Like on the "check" one, there was a pen hovering over a checkbox but it was unchecked, so I didn't think that counted...
I only got through on the "bow" one, since it was very obvious that everything there was a "bow" of some kind.
I about fell off my chair laughing with how slow closing the "how can we help" popover was. If I had to write a backstory for this I'd say some dev was really proud of animating that and wanted to make sure everyone noticed it.
Right? Every new web developer that first learns how to do animations REALLY over does them.

It's like how elementary school kids write their "papers" in comic sans (and eight other fonts half-way through) and each word is a different color. Or they make a power point and every-single-dang-thing just HAS to spin into the slide.

> like how elementary school kids write their "papers" in comic sans (and eight other fonts half-way through) and each word is a different color

HA! I did that! I thought it made the essay more interesting to read, and it was a pain in the ass since I had to transfer the text by hand (ie rewrite it) in Deluxepaint on my Amiga 500, then print on our 9-needle matrix printer. Oh, how I miss the sound of that. Or do I?

Naturally, I was told by my teacher to never do it again.

Edit: I think I found the approx model: https://www.youtube.com/watch?v=A_vXA058EDY

I wonder how much of this is related to how we teach kids initially -- everything is primary colours; schools value appearance of writing above content ('it's so neat'); it's all about big gestures, no subtlety; ...?
Oh god I’ve had this happen before. At my first job our CEO was so proud of the splash screen she designed that she asked me to slow down the apps loading time by three seconds.
And it does not even being hided all the way down!
I read your comment before doing it and still laughed out loud. I think that was the first time I’ve seen a web page provide actual physical comedy.
Press "help" in that popover and you'll be shown "Please wait, there are 459 people in line".
Absolutely bloody evil. Deeply reminiscent of 90% of my web usage when I make the mistake of going anywhere other than my default 10 websites.
[SPOILER] since you have to tick all the boxes on the captcha page, this piece of code is actually faster to type in than to click everything:

    document.querySelectorAll(".icon.icon-check.checkbox__check").forEach(span => span.click())
More concise to use an attribute selector: 'input[type=checkbox]'.
IIRC, the checkboxes weren't actual checkboxes. Yet another thing you can do wrong in UI.
I LOL'd when the Terms of Service came up and was scrolling at 1px per inch.
An underappreciated portion of this section is "expand to full screen," which expands the white space to full screen but keeps the TOS frame the same size!
“Your password can have at least one cyrillic character” WTF XD
Some time ago I tried registering an account on a site where the password policy was that you couldn't use special characters and that it would discard any characters you entered after the first 15 ones.

But you know what the worst part was?

They never bothered informing you about these limitations. The site just returned a generic error.

Not supporting special characters I can kinda understand but silently discarding characters from the password the user has picked is just evil. It took me LOTS of registration attempts and password resets before I figured out what the hell was going on.

My Bank has a password character limit of 32, which actually is a 31 character limit and I was the first person to notice.
Ha, bet somebody wrote < 32 instead of <=32
> Not supporting special characters I can kinda understand

IIRC this is mostly done to prevent SQL injection attacks. In a modern system there is 0 reason not to allow any characters in the password (within whatever encoding you support).

I registered an account for some software company that was acquiring some other services, so the left hand wasn't talking to the right.

Sure enough, different parts of the site had different password requirements, and they enforced them on password change. So you could create an account on a sub-site that wasn't accepted on the main site, which was the only site with the password change page, but you couldn't enter the old password to fix it.

I think password reset did work, but I wound up creating another password that worked in one place but not another...

I once registered a password using a special character, but I could not get in. It turned out that they url encoded it, if I used %21 instead of "!" I could get into the site.
I'm guessing you're the only user who figured that out. I would definitely request a password reset.

I saw a screenshot of an error dialogue on Reddit once (so possibly fake, but still hilarious) that said something like:

"You cannot use that password, because it's already in use by user Kegstand360"

The discover card (As in discover credit cards) had a limitation of 15 characters for the password back when I first signed up for one out of college. Even back then I was using long complicated passwords. The "clever" thing is that they never told you about this. They just truncated it at 15 characters on both the sign up page and the login page. I didn't realize this for several years because their password entry field was so small.
I bet they considered putting a secondary password confirmation field on the next screen, but that might have been too cruel.
I’m surprised the back button on my browser wasn’t hijacked. Too many mainstream sites do this.
Honest question: Where do people think those cookie banners come from?

Because, they aren't a dark pattern. They aren't a sneaky way to try to juice your engagement numbers. They didn't show up everywhere because growth hackers started getting jealous of the other guy's cookie banner. They are literally required by law, or at least many lawyers interpret the law in that way. The designers at my work really didn't want to make one, and especially didn't want it added to our site.

Nobody likes them. They came from lawyers.

Cookie banners are only really required if you're doing things like using them for "personalizing ads" and the like. If your cookies just there to check if you're logged in and other essential functions, you don't need a banner.
Well said. I think a lot of people aren't aware of this.
Please tell that to my Communications department. If they believe you, I'll owe you lots of beers.

I'd guess the thinking is "Well, I don't really understand those requirements and it's hard to be sure if we meet them, safest just to put the banner on." And "Well, if we don't need it, how come all these OTHER sites have it? You really think they're all wrong and you're right? What, are you a fancy pants lawyer now?"

"Cover your ass" is the main driving force of most of America.

What about if you want to A/B test on a non-logged-in user?
E-mail them and ask them nicely to volunteer for your research study. Agency's a bitch when someone else has it, eh?
Email a non-logged-in user? No, thanks. Please respect people's privacy.
Says you. The lawyers at my company, which does absolutely nothing with ads or publishing or anything related to ads at all, say otherwise.
Truly brilliant. I confess I had to view source to figure out how to get to the second page (which I supposed is a form of UI in itself).
> Age and birth date don't match

I hate you.

It only goes back to 1901, so what are you supposed to do if you're 159 years old... Lie?
Also

>Gender and Title don’t match

I actually appreciated this error because I couldn't figure out which color was the one selected.
I have to admit I'm a little surprised the entire form wasn't cleared on a failure.
The slider that doesn't update until you let go of it is a nice touch.
My "favorite" is picking your address number by repeatedly clicking the tiny up arrow.
Ah, I had no idea what that was. I left it at 1
I was impressed that it bothered to do the math, indicating a truly hateful UI.