Hacker News new | ask | show | jobs
by hammock 3046 days ago
>The client wanted a "button" without a background color because it looked bad to have two buttons side by side. My company told them that was a bad idea based on data, so we added tracking to their site and A/B tested their home page. Button with a background color had 40% more conversions than the "button" they wanted without the background color.

Of course it did, it looked more like a button! But at what cost? It sounds like this button was not the primary action. So how many clicks were lost from the primary action - how much usability was lost from the page?

1 comments

It was a primary button on the hero image in the standard "Header/Subheader/Call to Action" format. It was basically the only thing they wanted users to interact with.

>Of course it did, it looked more like a button!

And buttons without the look of a button are just called links. Links without visual distinction may as well be invisible. Like the infamous "black text link with no underline in the body of a paragraph of black text".

https://codepen.io/anon/pen/GQdeBO

Designing is just like coding. You've got to be pragmatic about knowing when and where to use the tools in your belt.

You might have your little favourite programming trick, but a good programmer will know when and where to use it - you don't want to use a map function everywhere.

Note that the article's point about buttons isn't prescriptive and doesn't say "always do buttons like this". Instead, it talks about a common specific use case and talks about how you can improve the situation. It's up to you to take that information inboard and judge where to use it. It sounds like the specific example you cited was a good time to not follow this approach.

It's form over function and I'd be shocked if anyone ever shares statistics where making the button more difficult to see increased user interaction with it or made it easier for users to do other tasks by "getting the button out of the way".

The only time I'd use a 'button' without a background color is something I don't actually want the user to use. For example, a 'delete' option on their profile or the 'unsubscribe' link in a newsletter.

But I'm not user hostile so I'd still make those options easy to find for users who wish to use them instead of trying to pad my "user retention rate" or whatever numbers the marketers are trying to make look good.

> The only time I'd use a 'button' without a background color is something I don't actually want the user to use.

Yes! You've got it! That's exactly what the article says!

And that's what I'm saying - good design is learning these tricks and identifying when and where to use them. It's not form over function, but how the form influences the function.

As a programmer if I don't want the user to use it I don't expose it to the user at all. If I want the user to be able to use it I'm not going to intentionally make it difficult to do so. That's not good design - that's bad UI and bad UX and is a dark pattern used by manipulative marketers who don't care about providing a good experience to end users. But then we get to argue over what "good design" means. Since manipulative design that is good at being manipulative is obviously good design by definition.

I think good design should benefit the user. Making "opting out" easy is providing a good user experience. If the user is wanting to "opt out" the answer isn't to make it difficult to opt out - it's to fix the reason that is causing your user to want to opt out to begin with.

>It was basically the only thing they wanted users to interact with.

Then why did they put another button side-by-side of it?

My bad, I misread and thought you had referenced my first example (button/no background) but you had referenced the button/button example.

The button/button was for a search. They wanted to draw attention to the 2nd button that sorted the results alphabetically. Why wasn't the alphabetical sort the default? Well... doctors are all very bothered about who gets shown above who - so the list of doctors has to be sorted randomly to please the doctors. The hospital doesn't want to piss off the doctors but also wanted to make it easier for users to search. They wanted to draw attention to the button that would sort the list alphabetically by changing the color of the button to stand out more.

I'm positive doctor names would look like Yellowbook pages back in the day with "AAAble AAApplebottoms" just so they could be the first shown. You'd think users being able to find their doctor would take priority over the order the doctors are shown in, but apparently not.

I work in Healthcare. The only thing that irritates doctors more than listing them alphabetically is forgetting one of their various titles. Dropping the "MD" after their name is a cardinal sin.

"Primary actions should be obvious. Solid, high contrast background colors work great here."

If you made the primary action a button without a background than you did not do what was suggested in this article.