Tag Archives | buttons

Did you not see that big button? – User Test

By on October 14, 2010 in Articles

Over the past few months I’ve been working on a new project. An extension of the Codeworks Connect Jobs in Digital area, to make it a stand-a-lone system. This article is a follow up on the ‘Evolution of a Button‘ article, where I detailed a user test of various buttons to end up with the most performing button when it came to design and color.

A 10 Person Test

This test was intended for a small amount of people, primarily to test the ‘call to action’ button on the homepage. I wanted to find if it was the correct colour, size and wording to ensure the user had the desired reaction. This would then enable me to either change the button or remove it completely. I chose a set of questions, so that the users could feel comfortable using the site before going for the ultimate question.

The questions were;

  • Can you go to jobsindigital.net?
  • Can you view the permanent jobs?
  • Can you search for a web design job?
  • Can you navigate back to the homepage?
  • Can you post a job?

At first I thought these questions seemed fairly simple, surely just browsing around any website was easy? It should be, I’d designed it to be easy… right?

It Wasn’t

Apart from looking over someones shoulder, I’ve never actively watched how ‘general users’ as I call them, use the internet. I ended up sitting on one hand and biting the other just so I didn’t shout WTF at the top of my voice. I figure that ‘general users’ have no logic? Or I have too much? Or everyone just does everything differently? I’ll go into the full test at a later date, it was surprising to say the least but ironed out some major problems that I didn’t even realise we had.

The Design

I’ve been calling this design ‘comfortable’ from the start. It’s not in your face and you just feel comfortable and ‘nice’ when looking at it. It was meant to restrict if not indefinitely remove problem areas, it was designed so you could browse with ease to take away any browsing problems a general user might have.

Jobs in Digital Did you not see that big button? User Test

Jobs in Digital has always helped in three areas, these being Freelance, Permanent and Graduate job vacancies. It has always been a much used service of Codeworks Connect and something which the members of Connect have always wanted.

The Test

The test was straight forward, I asked the questions, the users navigated and I made notes. The first four questions of the test were simple, they were meant to get the user navigating so I could pick up reactions of the pages they were faced with. Hat tip: Silverback, the User Testing app from the guys at Clearleft is awesome for this if you’re in the position like me to have 10 users ready to go in quick succession.

1st User Test

The first user used words like ‘nice’ and ‘I like that’… all good we were on to a winner. They navigated around the website with ease and getting ready for the last question I brought them back to the homepage before asking them to post a job. Remembering that the whole intention of having the ‘BIG RED BUTTON’ was for people to click it, I went ahead and asked them to post a job. Without a second thought they moved the cursor up, over and past the big red button and headed straight for the text link in the top right hand corner. I then asked them to fill in a few of the form fields before finishing the test.

I needed to find out why didn’t click the big red button, but wanted to word my query in the right way.

Gavin: “Just a quick question, when you navigated back to the homepage and I asked if you could post a job, you didn’t click the big red button. Was there any reason for that?

User: “Red button?”

Users Laughs

User: “Erm… honestly, I just didn’t know it was there…”

I made the notes, surely this would just be a one off.

graphic post a job Did you not see that big button? User Test

2nd User Test

Same thing happened, they moved right up and over the red button and hit the text link without a second guess. The conversation at the end of the test went something like this;

Gavin: “Just a quick question, when you navigated back to the homepage and I asked if you could post a job, you didn’t click the big red button. Was there any reason for that?

User: “I just know the links are usually up there, aren’t they there on all websites?”

I made the notes and tentatively thought this surely couldn’t be the case with every user.

3rd – 7th User Test

I couldn’t believe it, they followed the 2nd user test down to a tiny spec of detail. I seriously couldn’t figure out why anyone would not use the big red button.

The users knew where the logo was placed as they had been using it to navigate back to the homepage, so thinking the red button was a logo just couldn’t be. To miss it completely and not even know it was there or what it said took it even further.

8th User Test

The 8th test was completely different, more so because the user used the browser differently, let alone actually browsing. They clicked on links that no one else had attempted, they found difficulty generally browsing and searching. I couldn’t tell whether this was because they felt pressured being a part of the user test or something else. As I neared the end of the test and asked them the final question I could feel it in my boots that they were going to press the big red button and guess what!? They did! I jumped off my seat and party danced similar to Matt.

9th and 10th

The party dance didn’t help, there was no magical outcome to jumping off my seat, as soon as the next users sat down they missed that big red button all over again.

Conclusion

9 out of 10 users didn’t click the button yet we didn’t remove it, I need to test this on a much larger scale to see if it’s worth removing it all together so we’re now tracking on which link/button they click to post a job. Throughout the testing no major issues were found which we couldn’t fix on the fly (I’ll write about this at a later date). At the end of the day, the users thought the big red button was part of the website and much preferred to click a text link because “that’s where the links are…” Looking at the image below you can see how close the button and the link were together, it’s quite amazing how they missed the button.

text post a job Did you not see that big button? User Test

I’d like to test colour changes of the Post a Job button to see if that makes a significant difference to the click rate.

Have you done any tests on large call to action buttons and found they were ineffective?

Comments { 69 }

The Evolution of a Button

By on August 13, 2010 in Articles

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;

Buttons 1 The Evolution of a Button

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;

Buttons 2 The Evolution of a ButtonI’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.

pale buttons The Evolution of a ButtonSomething 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 buttons thin The Evolution of a ButtonAgain 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 buttons The Evolution of a ButtonSuccess!

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.

Comments { 16 }

Call To Action Buttons

By on July 15, 2010 in Articles

Firefox 300x139 Call To Action Buttons

I’m one for looking further in to design more than just the surface aesthetics. I like to know the reasons why things have been done in a certain way. I regularly ask myself questions like;

  • Is that there for a reason?
  • Would I read and take note of that text?
  • Does that color affect my decision to do something?

I’m currently working on a set of projects which are all linked. Each project is pretty epic, not because of sheer size but more because of the importance of the data they present. I’ve been asking myself the three questions above every time I sit back and look at the design. I’ve been researching persuasive text and the theories behind what text people read against text that people glance over and take no notice of. These theories are easy for me to understand as I have a huge interest in psychology and neuro-linguistic programming anyway.

Placement and content organization/structure is another area which I understand very well, if you want to read more about the subject you can find a great article on Web Designer Depot.

This leaves me with Call to Action buttons, the one area that I’m not expertly knowledged in. I’ve always wanted to be, I’ve always wanted to test designs by doing A/B testing but have never been in the situation to do so until now. Just the other day I tweeted about the subject to get some clarity from my twitter followers. I’d sat playing with the same call to action button for about an hour, working the right color in to the design I was creating. I sat back and thought, “What happens if this color doesn’t invoke the action I want?” I wanted to know if there was a specific color which converts more than any other. I was greeted with a series of links, specifically from @JohnONolan which said that the color red has a higher conversion rate. I was taken back as I would have took a wild guess that green would have been the better color as it’s usually linked with ‘go’.

Evidently there is something behind a green call-to-action button as the likes of 37Signals Basecamp website and Squarespace use green. I couldn’t even think off the top of my head who uses a red call-to-action button so went on the hunt and found Carelogger who were showcased in an article and Performable.

There is definitely something behind this red call-to-action but though, out of the tests that I could find the red button could out do the green button by anyway near to 20%. That’s a huge number of extra conversions for whatever type of service you’re offering.

I will test this myself when we launch the current project and split test against using a green / red call-to-action button, it would be great to hear your own thoughts about test you’ve done or case studies you have read. Below are a few articles which I found on the subject.

If you want to hear more about the subject in the future, be sure to follow me on Twiter.

Comments { 12 }