The Evolution of a Button

A little while ago I wrote an article about ‘Call to Action‘ buttons and how specific colors feature greatly in rates of conversion. I’m personally interested in the ‘what’ and ‘why’ areas of a persons reaction to a button. Whether it’s the size of the button, the color or the text so over the past week I’ve been designing some buttons and then testing these buttons on a range of users.

A 10 Person Test

At first, I’d not intended to start testing the buttons on people, I had simply begun a new design and was working through the admin area when I thought about what sort of button would catch someones eye or would make it easier to find and click. This is when I started calling people in from the Codeworks office to start testing the buttons.

Just Checking…

I started off the test by asking the participant to say ‘Left or Right’ the moment they saw the buttons. This test was purely to see if what I had written in my previous article was true. The buttons which I showed are below;


8 out of the 10 people in the test said ‘Right’ immediately after seeing the buttons. The one thing I didn’t test was showing the buttons without the text. I would have liked to as one of the users mentioned that they felt inclined to go with red because of the word ‘Deny’ sounding more intense.

I then showed the below image to one of the users by accident;

ButtonsI’d been playing around with an extra button for the ‘Account’ area and showed the wrong image. One of the users chose blue quicker than the other users had chosen red. This threw everything out of sync. I ended up going through the entire test again and 7 out of 10 users chose the blue account button instead of any other. I asked 4  people why they chose blue and the resounding answer was that it was more eye-catching and seemed more friendly. Great – Just what I wasn’t expecting.

I sat and looked at the buttons for a while, walked away, came back and there just wasn’t something clicking with the buttons against the design I was working on. They seemed out of place against quite a pale color scheme. I started tweaking the buttons by toning down the color and inverting the text color against the button. As well as that, I decided to add an icon to the buttons to see if the addition of a visual aid changed the response from the users and changed the type to Museo Slab. Below are the buttons I came up with.

Something you’ll notice about the above is that I changed the wording on the buttons and ultimately increased the amount of words overall. At this point of the test, something big happened. I realised that you (the designer) and your users have totally different opinions on what you think looks good. I’d go as far to say that users don’t care too much about how things look ‘nice’, they simply want something visual enough to sway them one way or another. I showed the group of testers (individually) the two images above in a stacked formation and asked them to say ‘top or bottom’ as soon as they saw them on the screen. All ten users chose the top set of buttons. After quizzing 50% of them about why they chose the top set there were two answers which kept being repeated.

  1. They didn’t stand out enough
  2. There were too many words.

Back to the drawing board for me! Visually I thought the lower set were ‘nicer’, but again the users just wanted to use the buttons, not have sex with them.

I took the feedback and reduced the wording back changing out the word ‘deny’ for ‘reject’ to see if this had a dramatic effect on the testers choice. That set of buttons is below.

Pale ButtonsAgain I showed the testers the above with the original set of icons. The reduction in text didn’t make one little bit of difference. 9/10 testers said that they’d still pick the original with the other 1 tester saying they didn’t know which they’d pick as they now liked the reduction of words. This was most definitely not a success. I still had it in my gut that the way the buttons were heading was the right way to go. I liked the new typeface as well as the inclusion of the icons.

I iterated the buttons again, taking the earlier point in to consideration about the buttons not standing out enough. The major difference now was that the newest set of buttons weren’t colored apart from the icons. After playing around with the colors again I was ready to start testing again. The below image is what the testers were shown the lower new buttons against the originally buttons from the first test.

New ButtonsSuccess!

All ten testers chose the bottom set of icons immediately as they flashed up on screen. When I quizzed about the reasons why a few points came back;

  1. They now stood out more
  2. They loved the inclusion of the icon
  3. They looked nice and they wanted to press them (When quizzed further this was down to the typeface looking better and not looking so ‘angry’.)
  4. They felt Deny was too much of a strong word and much preferred ‘Reject’.

That concluded the end of the exercise. I took the buttons, added them into the design and the final piece is now in development. This exercise for me was a big learning curve. Not just because my idea of ‘nice’ was different to the users, but the way I could quickly and easily test the reactions of testers and change the way I was designing for specific reasons. I’d recommend anyone to give it a go sometime, it’s quite exciting.. especially when you know you’re on to a winning design because of a persons reaction.

*Note – The buttons since the images in this post were made have been tweaked slightly with regards to color, gradient, border etc but most of all they look pretty much the same.

Have you done any tests like this and written an article about it? I’d love to hear about it.

Published by


Lead Interaction Designer at DigitalDWP. Organiser of Industry, The Practical Web Conference..

16 thoughts on “The Evolution of a Button”

  1. It’s interesting. I would have been inclined to put Approve on the right hand side, and Deny on the left. Had you experimented with the ordering, or just styling?

    Great post by the way, really interesting research.

    1. Hi Paul, thanks for stopping by. The order in which they were placed was at random although yes you’re right it would have been very interesting to experiment with where they were placed. Since were heading in to the build phase, I’ll do the test just before it goes live and let everyone know the results.

  2. Hey Gavin,
    Long time since I visited your site. Looks like things have changed a lot since I last came back.
    Coming to the article, I think one of the important thing here is the context. Precisely which is the button that users will be clicking more or “You want the users to click more”.
    This is something on the lines of the fact that actions like, cancel, delete etc in a web app are not always highlighted since the iser will not be looking for them and also does not end up clicking them (esp delete) by mistake.
    Nevertheless I love the idea of how a group of 10 can be enough to drive your design decisions. While ideall I would want more, but yes it works as a perfect starting point.

    1. Hi Tuhin, great to see you stopping by. You’re quite correct, there is another which I’ll be doing to take care of this when the website goes live as it will involve a lot of A/B testing on various items on the page to see what results we can glean.

  3. Really great article and intersting, simple buttons but means alot! I would also agree with Paul that the order will probably effect the outcome aswell.

  4. I love how users and hard data can spoil our ‘favourite’ designs 😉 Great that you did this, A/B testing is the way forward! It will be interesting to see how you refine this over time with ‘real’ users.

    1. Hey Dan, I honestly couldn’t believe it. I thought everyone was joking at first but alas they were swayed completely different to the way I thought they would be.

  5. Hello Gavin,

    thanks for a very interesting and helpful article.

    One of my first thoughts on the initial buttons was that the green button looked more washed out than the red button. I wonder what effect making the green button brighter would have been.

    Paul commented earlier on the order of the buttons. I’m working on a Web app that initially had save and cancel buttons. The Cancel button was on the left (cancel means going back) and the save button on the right (save means going forwards). This is the way most buttons are ordered in Mac OS. However this confused a number of Windows users as most Windows dialogue boxes have OK on the left and Cancel on the right.

    1. Hey Nick, No problem at all. I thoroughly enjoyed writing it and looking to do a lot more in the future. That’s very interesting about the Mac OS and Windows icons. With the guys in the office all on Windows machines it will be very interesting when it comes to testing.

      Thanks for stopping by.

  6. Great stuff! Getting CTA graphics right can make a huge difference to conversion rates. I’m a big fan of iterating designs and a/b testing them. Have seen conversion jump dramatically when you hit on the right designs. Nice write up!

    1. Hi Steve,

      Thanks for stopping by. Whilst this was something that needed to be launched ‘in the now’ against iterating like crazy before hand, we’ll be launching sooner rather than later and then test a lot more.


  7. Pingback: Quote/Link: Gavin Elliott

Comments are closed.