I can't even.

This is what we have to deal with, you guys. This is what the world has come to.

From: Someone whose email address contains both the words "expert" and "support"
Subject: Cannot order tickets online - missing buttons?
To: orders@dnalounge.com

Hi there, I'm on a desktop browser to order 2 tix for tomorrow's Odd Salon. I don't see any button for "Buy Now" or "Add to Cart" or similar.

All the DNA phone numbers are non working or lead to voice mails.

Here's what I see for that ticket ordering. Apparently my friend can complete the purchase but can't you fix this? I'm on desktop browser: Chrome Version 49.0.2623.112 (64-bit) on Mac, can't upgrade browser any further than what it is now. Don't have ordering apps on mobile, only desktop.

I could describe that NASCAR nightmare as a lot of things, but "insufficient buttons" is not one of them.

Also note the cherry on top: this person called all of the DNA phone numbers. Because that's how that works.


Update: Christ on a pogo stick, people. If you think this was me asking you geniuses for your web design advice, let me assure you that I was not.

Tags: , , ,

55 Responses:

  1. Jason says:

    You know this guy can't find a hyperlink unless it's the words "click here"

  2. These dummies are the reason why UX/UI Designers have jobs... because people are dumb and you have to make things super obvious because people are DUMB.

  3. These dummies are the reason why UX/UI Designers have jobs... because people are dumb and you have to make things super obvious because people are DUMB.

  4. Dave Polaschek says:

    To be fair, there is no "buy now" or "add to cart" button.

  5. How does this person know their version of chrome but NOT know what a button is?

  6. Erica Mulkey says:

    I've made similar brain-farts before, but I've always assumed it was me, not a website that countless other people use every day with a very popular browser

  7. John Adams says:

    There's two ways to look at this.

    1) The user is a fucking moron, and fuck them, that fucking dumb fuck.

    2) The site just lost a sale / has lost sales in the past because the interface wasn't clear and upfront about usage.

    #2 is the reason why UX/UI people have jobs and why UX is so hard.
    People don't pay attention, they're easily confused, but they still have money and value that could be taken if things are made easier.

    It's also beyond me why the user couldn't figure this out. The site has had literally thousands of sales.

    • John: You know I'm all about separating fools from their money, but come on. How much more dumbed down could it be? None. None more dumbed.

      • Another Dave says:

        Thing is, it confused me too, because the UI looks like as if I could buy 2 of Reserved Seating and 2 of VIP Seating. Why would you have multiple txt fields otherwise?

        And coming from this assumption, it clearly misses a 'buy all the tickets you filled out above' button, because along that line of thinking, the category names right of the text field cannot possibly be buttons.

        Never mind that on second thought probably nobody needs to buy tickets in different categories.

    • John Adams says:

      I did a couple of quick checks to see if the other sites were any better.

      Ticketmater is an epic rat-hole shitshow with 5-10 clicks to get a ticket, and you don't see 'buy' until many pages in.

      BotH (which reroutes to stubmatic) has one of the worst pages, but they do have an enormous "buy" button next to their puke yellow/green and blue ticket listing. This takes you to a page of fine-print that has a big buy button after the fold.

      Slim's is eventbrite, so it's qty + big green buy button

      Popscene/Rickshaw is big 'BUY THESE TICKETS' button.

      DNA has an abbreviated "Gen. Adm" Button which might not mean anything to someone not in the industry, and a "reserved seating" button.

      I dunno, maybe increase the size of the buttons, style them in non-default browser styles (large and a contrasting color) in the calendar and move the fields around so it's more obvious?

      General Admission [ QTY ] [ BUY THIS TICKET ]
      Reserved Seating [ QTY ] [ BUY THIS TICKET ]

      I suppose it would also be interesting to see where users
      drop off in the purchase process. I think you have logs for that.

      otoh, People are stupid. I give up.

    • The change I would make is that label quantity, button setup, separating the label from the button. For accessibility you are supposed to have a label tag assigned to the input element anyway.

  8. John Adams says:

    There's two ways to look at this.

    1) The user is a fucking moron, and fuck them, that fucking dumb fuck.

    2) The site just lost a sale / has lost sales in the past because the interface wasn't clear and upfront about usage.

    #2 is the reason why UX/UI people have jobs and why UX is so hard.
    People don't pay attention, they're easily confused, but they still have money and value that could be taken if things are made easier.

    It's also beyond me why the user couldn't figure this out. The site has had literally thousands of sales.

  9. (I also feel like this person might be a UX/UI person just being an asshole, just saying)

  10. (I also feel like this person might be a UX/UI person just being an asshole, just saying)

  11. datgame says:

    It's the new style with flat buttons. They look like labels.
    Old 3d-style buttons would've been obvious.

    • jwz says:

      Um, what? That is a browser native button. Completely un-styled and un-colored specifically so that it looks like every other button in the running browser, even though it sticks out like a sore thumb.

      • Zygo says:

        Have you seen a native browser button in the wild recently? I had to make a one-line HTML page to see what they look like on this browser, uncontaminated by stylesheets--and now that I know, the knowledge is only good as long as I insist on never upgrading anything so the appearance doesn't change. I don't blame UX people for hating native buttons. They suck.

        Even the "Post Comment" button on this very page is a distinctly non-native shade of green.

        I am a bit surprised that knows-the-latest-available-version-of-the-browser guy didn't read the source to find where the buttons were. Lazy.

  12. Ryan Watkins says:

    While its easy to figure out, UX should be "Don't make me think"

    They are likely reading this like an ecommerce cart screen - as a bunch of selections and an amount "I want 2 Gen admin, 1 Reserved, 2 Upstairs ..", even though that doesnt make alot of sense, because they've seen it a bazillion times. They want a single call to action "Buy / Purchase" button underneath that list.

    I agree its a NASCAR nightmare. Yes they are buttons, no it does not read with a clear call to action to Buy. The Like/Share/Calendar buttons draw vastly more attention than the thing thats probably more important - selling a ticket.

    I'd suggest removing the "1" inputs entirely, and then just let them change the quantity on the next screen - its not like you can pick "2 General Admission" and "2 Reserved" and click anywhere that will add both types to your cart.

    And make the buttons bigger.

    And use the word "Buy" in the button label itself.

    And put Like/Share/Calendar over with the event date/time/ages, not distracting you in the "I Want to Buy" box.

    I was also going to suggest you add another huge green button under all those, thats just "Buy Tickets" that goes to a cart page with "0" for each type of ticket and nothing else - prompting them to put in the amount for the type they want. And then click "Checkout". And refresh totals as they edit. Which mean you need a way to add zero of something to your cart and have an explicit "delete" link for each.

    But I vaguely recall you once said the purchase system is brittle and may be unable to survive that.

    • jwz says:

      Adding more words doesn't help. People don't read.

      Making the thing be so huge that half of it is "below the fold" on a phone doesn't help.

      Armchair quarterbacking, in general, doesn't help. If you want to make a suggestion, and want to make that suggestion in the form of an actual mock-up that takes several different samples of events into account, then you might, might be helping. Might. Because then you might look at what you just built, realized it doesn't work, and said, "Oh yeah, I'll bet he thought of this some time in the last 15 years."

      So anyway, up top where I asked for UI design device, I ... oh wait, I didn't actually do that.

  13. David Konerding says:

    I had to stare at the UI for a while before it was clear that those were buttons, not labels. I would have figured it out eventually since there was no button labelled "Buy now", but basically, if a user like me has to use that kind of process of elimination to figure out the labels were actually buttons, there are going to be a fraction of users who can't find the button. Instead, having a clear "call-to-action" button that says "Buy" or "Proceed to checkout", really is far clearer and more standard.

    • jwz says:

      If you were using Chrome you would have known they were buttons because THAT'S WHAT BUTTONS IN CHROME, THE BROWSER YOU ARE RUNNING ON PURPOSE, LOOK LIKE.

      • David Konerding says:

        No, those don't look like buttons in chrome, for me, on any platform. Looking at the "Buy tickets" page for one of your shows, mine don't have rounded corners, and they have a drop shadow making them an obvious click target.

        The photo provided by the user looks a lot less like a button to me, it looks like a label with rounded corners, and no drop shadow. I haven't seen buttons that looked like that since... Tk on an Sun 4.0.3 X windows machine.

        • jwz says:

          Dude. They are un-styled. I know this because I'm the one who did not style them.

          • David Konerding says:

            Turns out, I had browser magnification enabled (old eyes), and at > 100% magnification, Chrome renders the button differently (rectangular, with clear drop shadow).

            At 100% magnification it looks terrible (as the user reported), but when I visit the ticket page, the button label says "Buy ticket", so it's slightly more obvious. On the page the user mentioned, it's not "Buy ticket", but the "Gen adm" and a price. I would take the feedback that the button label should be an action, not a designator.

            Pretty much everywhere on the web that I buy things from: does not use native widgets, uses clear bright buttons, actively labels the button with an action. These sorts of things make a huge difference in click thru rates, so people who want to sell things do them.

            • NT says:

              We can only imagine how far he could dilate his conversion funnel by punting on the retro color scheme.

          • Yes, but would it kill you to add a cursor change? Overall the design of this form looks like you are subconsciously trying to make some people to not give you money.

            • jwz says:

              They are native buttons. If you think native buttons aren't enough like buttons that's between you and your choice of browser and OS.

              Chrome thinks native buttons shouldn't change the cursor? Ok. I guess that's how buttons work on Chrome.

              • Jamie, let me be honest with you. You are going through life without really understanding what it's like to have an average and maybe even below average intelligence. I do, though. It's also very frustrating, but in a different way.

                I looked at the form in Safari, it is not any more usable. To me, at least. This form is incredibly unfriendly to the point of belligerence. Kind of like you. In any OS and on any browser. It's an angry form. It yells "What is this?" Literally. It does not look like any functioning order form that I've seen. It looks like a broken order form, though.

                If a whiteboard interview question married a Verizon customer support experience and had a baby that was brought up by a social network button generator -- it would be this form.

                I wrote all of that, but then I realized, damn, there's this weird trick: if one just does not monkey with button markup only a complete idiot might be confused by a web form. Also, it just might be the poor choice of browser/os. Zawinski's Law of UX is what it is.

  14. nooj says:

    What human wants to buy one of every kind of ticket available? How many levels of friendship does he have?

    "Here, come to this show, I still have room at my secondary VIP table. I'll stop by and visit a couple songs in.

    "But you? You're only good enough for Reserved Seating. Hey, at least you get to bring a friend."

  15. steve says:

    Wow. So much snark from the UI designers.

    The problem isn't that the user can't recognise buttons when he sees them. That's just patronising. It's that he is looking for a button that says BUY NOW or equivalent, and there is no such thing.

    I never would have guessed that you click the price to buy tickets. I too would look for a button called "Buy" or "Purchase" in order to buy tickets.

    We have over thirty years of GUI experience telling us that buttons should normally be verbs ("Post comment", "Edit", "Send", "Cancel", "Buy") unless they are direct responses to a question ("Yes", "No", "Okay"). What they shouldn't be is informational fields, and that's what they look like they're being used for.

    The UI depends on the user not having a clue that buttons should be commands that actually tell you what they do, and relies on them clicking anything that kinda-sorta-maybe looks even a bit relevant to what they want. Any user too cautious, timid or smart to randomly click UI elements on a web page is probably going to get stuck. The UI depends on the user not reasoning that the UI looks like a shopping cart, and so should behave like a shopping cart complete with BUY NOW button. And when one would-be customer takes the time and effort to let you know that your UI is confusing, and how do you respond? By mocking him. Nice.

  16. Korilu says:

    Obviously this is guy is not the smartest one. Nevertheless he has a point.

    There is a nasty trend that I call "flat buttons crap" that, with the nasty trend "no-underlined links idiocy", make using a browser a test of "are you up-to-date with new fashion of buttons and links"

    so, he is right, there are no buttons, there are labels surrounded by rounded boxes with with background, but anyone well informed of last trends should know they are buttons.

    God saves 3D buttons!!

  17. Rick says:

    The STUPID is EVERYWHERE. Anyone that can actually think would logically try clicking the Gen. Adm button, or whatever type of ticket they were after.
    Its not rocket science....
    No one wants to think anymore, they need to be spoon fed.

  18. George Bull says:

    There's a bunch of stuff going on here:

    1: the cursor for your buttons is not 'pointer', so the hover-state doesn't indicate they're interactive. This is the most serious failing. Yes, this may be the default. No, that's not right.

    2: There's no indication that these are--for the moment--exclusive options. I might think I am able to buy 1 of Gen Adm and 1 of VIP, but there's no path from that to purchasing them.

    3. There's no idea what the verb here is.

    Here's a better version. (CLICK HERE)

  19. DaveL says:

    Bah, this is all stupid GUI wankery, which No True Linux Person gives a crap about. What you want is:

    >buytickets -V2 -U1 -d1

    Simple, sweet and totally comprehensible, if you are RMS. The --help is only five pages long!

  20. jwzisanigger says:

    i raped your mom

  21. Hanan Cohen says:

    +1 to George Bull and title = "Click to buy this item"

    • George Bull says:

      title="Click to Add to Cart"

      ...since you're not buying them yet. That's Step #2. (3? I don't know; I'd have to drive 10 hours to get to a show.)

      Also, TIL there's no unicode glyph for 'shopping cart'; there's an emoji, yes, but that's subtly different.

  22. Elmood says:

    It's awesome that so many people care about this "problem". But I'm pretty sure jwz does not care. And I kind of think that's awesome!

  23. Dan says:

    How would a user order 2 different types of ticket? eg. 1 Gen. Adm. & 1 Reserved Seating?

  24. MarkusL says:

    I actually had to have a really long look.
    Because you don't expect that many buy buttons.
    Because you don't use the buy buttons to display information.
    Because you button should be label with the action it triggers.
    Because how am I supposed to buy tickets from multiple categories with this?

  25. Jeremy Wilson says:

    Half the reason I've been reading this blog for nearly 20 years is the "god this is terrible" posts and then the misguided "here let me fix it" responses. So entertaining.

    Attention reader: If JWZ wants your input, he asks for it. Pretty simple. The rest of the time is venting.

  26. UnlikelyLass says:

    It's also probably worth reminding folks that there is no silver bullet for dumb.

    There is no ven diagram of 'code' and 'ux' and 'ui' and 'random yahoo on the Internet' where the part labeled 'does not get it' is empty. Someone will always get it wrong, no matter how clever you are.

    • thielges says:

      True dat. I've ceased going down the line of thought "no one would ever attempt this ridiculous combination, so we don't need to code for that possibility." Wrong! Someone always tries. So now we at least generate a "not supported" message and fail safe.

      This leads to some interesting conversations with users who call requesting an enhancement. On those calls I ask the customer to explain what they are doing that requires the ridiculous feature. A few minutes into the conversation you can almost hear the lightbulb over their head turn on. Call ends and there's no follow up.

  27. Owen W. says:

    Anyone arguing to "make the buttons bigger" should rethink calling themselves a UX expert.

  28. Alasdair says:

    Choose your ticket: [Dropdown with Options] [Qty Box] ["Buy Now" Button]