A user fails to recognize native unstyled buttons in the browser. Something amazing has happened that every website has replaced buttons with custom styled widgets and users never see real buttons anymore. There was a time when users would recognize a button, even if it didn’t say “click me!”, because it looked like a button.
Original title: I can’t even.
JWZ’s angry dickhead schtick is pretty funny when he’s right. I recognized those as buttons immediately. I bet lots of people did, honestly. But what I didn’t recognize is what clicking them would do.
Do they add just the corresponding tickets in the row you click? Then why do you have all the possible ticket options prepopulated with a 1?
Do they add all the tickets to your cart? Why not just have one “order” button?
I had a guess but I had to pull up the ordering page to see if I was right. I will say it’s not nearly as confusing if you pull up a show that doesn’t have multiple ordering tiers - but this looks like another JWZ “I’m right and everyone else is a moron” special.
[Comment from banned user removed]
[Comment removed by author]
Honestly, I stared at that screenshot for a good 20 seconds before I realized that those were buttons at all…
I couldn’t see it from the screenshot either so I clicked on the DNA Lounge shop page and figured it out, but still I think the UI is pretty awful.
Making fun of people for not being able to use your shitty UI is a rather dickish thing, in my opinion.
So that’s the part I find most interesting. jwz types <button> into his html and the user agent renders something which apparently is not recognizable as a button. Is jwz responsible for that?
If I ran across that form, and given the overall styling and color scheme, I could see myself thinking that the person who made that page didn’t know what they were doing, and either styled labels to look like buttons, used button-looking images as kinda-labels, or had somehow confused buttons with labels….because why would there be so many buttons?
Regardless, I would still have tried to click on them anyway, just to see what happened.
From the captioning is not obvious what these buttons do, and that’s something jwz could certainly do something about. But instead of improving better make fun of your potential customers, I guess?
If it’s not jwz’s fault, but the user agents, is the user responsible?
I would love the story if jwz would have just stated his amazement without insulting the client.
Does it really matter if you don’t know what the button does? It’s obvious you can’t buy tickets by not clicking a button. I think the Sherlock Holmes principle applies. When all other options are eliminated, the one that’s left is correct.
So there’s some confusion over which button to click. But why would anyone click the button for any tier other than the one they want? Again, you’ve got five buttons, four of which cannot possibly be the right one, so what does that suggest about the remaining button.
It’s not exactly how I’d design the form (I’d at least add the word “buy” to the label), but it’s actually pretty good at reducing friction. Lots of people probably only want one ticket, so it’s all filled in and ready for them to click a single button.
I think this kind of reasoning is why people hate programmers.
You need to appreciate that people still see this when they look at a computer. Reading takes some time, building a mental model takes time, and all this effort builds some fatigue that if too great will cause the user to fall back on panic. They know it won’t delete all their files, but puzzling things is hard work for someone who doesn’t do it every day. They might abort and leave. Sometimes they might ask for help and you can write a funny blog post about how stupid your users are.
Honestly, programmers are so mad sometimes. You want “good clean specifications” that cover every detail unambiguously, but you are also quick to defend interfaces like this that are an 11 on the autism scale.
Here’s a good trick: Just add a comment. Try to document the process, the whole process. If writing your comment is tortured or difficult, it is probably a bad interface:
This is pretty hard, so we know it is a bad interface. We might be able to fix it by inventing stories. This requires empathy, so sometimes spitballing with a friend can help “How do I order two of each type?” Why would anyone want that? Certainly people will want to be with their group! “Maybe I’m ordering for a friend?” Hmm….
Or just look at Amazon. Amazon sells tonnes of stuff, so copying their interface is probably the smarter thing to do. Especially if you don’t want to think about it much. Also: People know how to use Amazon.
You don’t know what lots of people will do unless you watch them: You can’t even ask them, because users lie. I think Knuth had something to say about optimising for some behaviour when you don’t even know what’s going on yet.
[Comment from banned user removed]
Really? You think a button labeled “general admission” is equally likely to close the browser window as buy a ticket?
[Comment from banned user removed]
It might do nothing at all. It might make a popup with more information. I’ve seen both, and a normal user has much fewer expectations than we do.
It’s why buttons are labeled with verbs, not just nouns.
I wanted to jump on board and enjoy a good rant. I really did. But I side with the customer on this one. Buttons should have an action on them like submit or buy. I’m sad the customer couldn’t figure out how to place an order, but the customer’s complaint is 100% valid.
Now I’m going to click the “post” button, not the “an entry on lobste.rs” button.
I agree, my first reaction was “yep, that’s about the worst UI I’ve ever seen, what the hell is going on here?” It was equally shocking to me that JWZ and the rest were actually taking the opposite view, that somehow the user was dumb for not understanding this completely awful UI.
I’m sorry, but the user is right. It doesn’t really matter what the button looks like, the UI is so different to any other ticket UI I have ever seen. What if you want to buy a collection of tickets in different categories?
The difference from expectations is key here I think. The normal setup of a form like this, especially with those number fields there, is that you change the numbers to your liking, and then at the bottom there’s a big verb button, like Buy or Checkout. The user appears to be confused that the expected verb-button at the bottom of the list is missing. Perhaps they could’ve deduced what is really going on, but it’s not a totally ridiculous thing to be confused by, if you aren’t a techie.
As much as I’ve loved much of jwz’s previous work, to me this is so clearly a UX fail that I’m kinda sad he doesn’t realize he’s the problem here :(
Sure there is lots of buttons here. But what happens:
You can’t have it both ways. Conventions are more than just using <button> and <submit> tags, they’re adhering to expectations people have from years of learned history on how these things are meant to work.
Maybe those buttons weren’t seen as buttons because the text on them are item descriptions rather than something obviously actionable. Looks like an absolutely terrible UI to me. I side with the user on this one.
Hate to copy someone else’s comment, but this one by Deadprogrammer from the original post hit the nail on the head for me:
If someone can’t figure out how to place an order on your site, it’s your fault, not theirs. If I’d seen that form, my initial thought would be that the CSS hadn’t loaded correctly (and not because of the unstyled buttons, but because the form looks incomplete)…
PS: Do we need a
jwztag so that people can filter on these hairballs he keeps coughing up? :)While it’s tempting to attribute stories like this to some wider cause like “OMG users are the dumbest” or “Modern trends in web design are ruining everything”, I think the more likely explanation is that this is just a particularly dramatic single failure from mostly reliable systems operating at scale. In this case, “mostly reliable systems” = humans and “at scale” = all of the ticket ordering operations performed by humans on DNA’s website.
I suspect the user’s inability to recognize the buttons on that page is probably one of those persistent one-off errors people make at times. This is a user who’s at least competent enough to know what version of browser he’s using, whether or not he can upgrade it, the OS he’s running, and that all of that stuff should be included in a bug report. (I’m starting to like this guy.) So maybe he’s not a total bozo. Maybe he’s been trained by modern web design that buttons look different.
My ability to maintain gainful employment as a software engineer, and the seeming good-will of my co-workers leads me to believe that I am also not a total bozo, or not significantly more so than the average person, at least. However, yesterday when migrating a service to a new deployment pipeline, I was unable to figure out why I was seeing consistent health check failures in the new pipeline, but not the old. When I finally asked for help from the devs working on the new pipeline, one of them pointed out what I’d failed to notice: that the new deployment was using a different type of health check than the old one, and the instances weren’t getting enough time to come up. I went back and looked at the service’s deployment config and asked “How’d that change? I didn’t update that.” After looking at the configuration for the 3rd time I finally saw the extremely obvious “health_check: ELB” line, at about the same time the chat room pointed it out to me. For whatever reason, it seems like I was just blind to the letters “ELB” all afternoon, until somebody pointed it out to me.
Almost every developer I talk to has a similar story somewhere: the obvious typo they couldn’t see until someone pointed it out to them, the misspelled variable they looked at a dozen times without recognizing.
I suspect what we’re seeing here is a similar scenario - this user just fell into an incorrect way of viewing the page, and couldn’t bootstrap himself out of it without some help. He just had the poor fortune of asking for help from someone who decided to “I can’t even” his mistake on the internet.
Perhaps we can look at another example which I consider worse UI. It’s quite similar, but even using the process of elimination I had trouble knowing what to do.
http://www.tedunangst.com/flak/images/twitterubuntu.jpg
So here we see that I have four buttons labeled F152, F147, ubuntu, and F150. They don’t really even look like buttons, but I’m savvy enough to figure that out.
Which button do I click? I know I don’t want ubuntu, so we can rule that out.
That leaves three options. I watch CNN, so I’m familiar with the Twitter platform and I expect there are buttons for reply, retweet, and report to SJW authorities. I just don’t know which button is which.
I can peer about for a while, but there’s no eliminating any more buttons. I’ve got three buttons, not even a 50/50 chance. Maybe if I could eliminate two other options so that at least I’m down to one button that either replies or does something else, I’d take my chances. But I can’t even make it that far.
Wait, you do realize that that’s not how the “F152, F147, Ubuntu [maybe], and F150” buttons are meant to be displayed right? I think those are meant to be something like icons from probably a web font that isn’t loading on your machine for some reason. This web-font as an icon thing may considered an anti-pattern, but I wouldn’t call that Twitter UI to be the intended UI to be displayed.
Perhaps not, but it’s my user agent, not the site agent. For that matter, it could be a screen reader. How is F152 pronounced? A <button> tag with even a bad label works better than this.
From looking at the DOM, it appears Twitter includes a non-visible
spanwith the text “Reply” for screen readers to use. In fact, there’s no text around that node other than “Reply”. The glyph is applied via CSS.