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.