4 ms·

I actually just got done running an A/B analytics test on a large website (>100k viewers/day). Statistics say you're right, least about the buttons. ;) The cli

by Nadya 9y ago

I actually just got done running an A/B analytics test on a large website (>100k viewers/day). Statistics say you're right, least about the buttons. ;) 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. Several pieces of the advice given on that article are proven to be bad ideas for most websites if you track your users. What "feels" right and what is right are often two different things. If you're ever making a change because you think it will perform better you better be tracking the statistics. Often times you'll find out you were wrong. Another, similar, example is that a client had a button they wanted to "draw attention to" so wanted to inverse the :hover background color with the normal background color so that it would stand out from other buttons. It looked different - but hurt engagement because it no longer looked like every other button on the site. E: This was meant to be a response to cpburns2009, the parent of the comment I responded to. Thanks to metalliqaz for pointing that out.

metalliqaz 9y ago
Replied to the wrong comment?
- Nadya 9y ago
  Yes, this was meant to be a response to cpburns2009, woops. Was in a rush and originally posted it as a parent level comment, deleted, then reposted under what I thought was the right thread. Looks like I still need more coffee.
hammock 9y 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?
- Nadya 9y ago
  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 https://codepen.io/anon/pen/GQdeBO
  - madeofpalk 9y ago
    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.
    - Nadya 9y ago
      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.
      - madeofpalk 9y ago
        > 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.

by Nadya 9y ago

metalliqaz 9y ago

Replied to the wrong comment?

Nadya 9y ago
Yes, this was meant to be a response to cpburns2009, woops. Was in a rush and originally posted it as a parent level comment, deleted, then reposted under what I thought was the right thread. Looks like I still need more coffee.

hammock 9y 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?

Nadya 9y ago
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 https://codepen.io/anon/pen/GQdeBO
- madeofpalk 9y ago
  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.
  - Nadya 9y ago
    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.
    - madeofpalk 9y ago
      > 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.