Did you not see that big button? – User Test

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 Website

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.

Post a Job on Jobs in Digital

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 Link versus Graphic Button

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?

Published by

Gavin

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

70 thoughts on “Did you not see that big button? – User Test”

  1. IMO, the problem with the button is that it contains a price…

    Users will instinctively veer away from links/buttons etc that indicate that payment is required – even if they’re on a site where they know that payment is required at some point.

    I reckon drop the price from the button, and people will start using it. πŸ™‚

    1. Hey Mark, thanks for the comment. Dropping the price from the image is something we will seriously look at. Once we’ve made some changes I’ll do another write-up with the results.

      1. Thanks Tim, that is the overwhelming feeling now. I’ve since taken the prices off the banner, and even just removing that makes it look more welcoming(ish).

  2. Interesting results there Gav. I’m curious though as to why you haven’t removed the button? Most quick & dirty tests type reading I’ve done suggests that 6 to 8 users will pick up most problems.

    Have you tried changing it a green (for example) button to see what happened?

    Finally how about adding some sort of arrow etc to the button as perhaps it’s perceived to be a banner at present which users tend to be more blind to. Just a thought.

    Rich

    1. Hi Rich, I haven’t removed it as it didn’t cause any actual issues throughout the tests apart from only 10% clicked on it. The majority of the issues which people found were fixed going through the tests and I will detail these at a later date.

      Within the design I had actually created a green version of the button which I will no doubt test at some point. I think what Lee says below is quite a good way about defining the actual action ‘Click here to…’ we’ll see how things progress.

  3. Nice post Gav.

    However, have you ever thought that the ‘button’ doesn’t look like a button to most users? Personally when I first saw it I felt it looked more like a graphic tagline.

    I think something as simple as increasing the radius on the rounded corners (clichΓ© but effective) or defining an actual call to action (‘Click here to…’) might nail the problem.

    Lee

    1. Thanks Lee. I’d not thought about it not looking like a button to be honest. I suppose I had been staring at it for so long I couldn’t see the wood for the trees hence writing this email and receiving a fantastic amount of feedback. I’ll certainly look into defining the call to action.

    2. I was going to give the same hint: it does not look like a button to me (at least it’s not that clear).

    3. I agree with Lee. When I first saw it, it didn’t appear to be a button to me, but part of the header graphics…

    1. Whilst I’d definitely need to test this, I’m just not sure Rachel. People were missing the ‘button’ altogether, would be an interesting test and I’d probably do it when changing the colour to see if it had the desired result.

  4. I think the button looks more like an informative banner graphic than an actual button which could be the issue.
    Nice post though, always good to keep user testing in mind.

  5. Hi Gavin,
    Great post we had a similar experience with a recent user testing session. It shows you what we (designers) think might not always work for the user. Test test test.

  6. I feel that the pricing text on the big red button makes me have to think too much: it clutters the decision process and makes it harder to be sure that is the correct place to go to post a job.

    I wonder if your test results might differ if you tried doing the test again with only the words “Post a Job” on the big red button?

  7. To be completely honest, I’d hit the big button. I mean, it’s really big, much more easier to click on it than to search for a tiny text link…

  8. Pingback: UI is a weird thing.... | DESIGNfromWITHIN
  9. a lot of users have come to associate bright, attention-grabbing buttons with scams and banner ads, so it’s understandable that people tend to unconsciously tune them out after a while. Also, I’d have mistaken that button for an image header at first glance, and the pound signs would have been enough to scare me off after that.

  10. I’d say that the ‘button’ doesn’t look like a button, and as it doesn’t contain a clear CTA (call to action) the users see it as a banner and it becomes background noise.

    I’d be interested in the results of an MVT test using different button colours, CTA’s, hover feedback and the inclusion of a ‘Β»’ or similar to signify that if i click this i will be taken to another page.

  11. I agree with the above. The ‘button’ looks more like an advert or statement because of the text and prices. Perhaps all it needs is a little more gradient depth, larger corner radius or an icon to show it as button.

  12. IMO the big red button feels too integrated with the columns and looks like a header.

    Very interesting read.

  13. I’m also wondering if they didn’t click it because with the price it looks like a banner advert, so they know how much the jobs cost – but also because they’re aware of all the links are – they’re happy to click on those.

    I wonder if you’d asked that question straight away how many people would of hit the big red button.

    1. Interesting. The price being there might be one of the secondary issues behind the actual button not looking like a button.

      Good feedback Martin, thanks.

  14. The big red button looks nothing like a button.

    I think the other comments nailed this one: you could replace price with call to action, change the design so it looks like a button and consider the colour so it appears less dangerous.

    Interesting article.

  15. Agree with above. Great post.

    To add, the amount of text, not just price, takes the distinctiveness of it being a button. ‘Post a job’ is enough. put price below, and/or even make the button smaller. Similar to ‘submit comment’ button below.

    *didn’t read all comments, might have been said*

  16. Really interesting, and massive props for sharing πŸ™‚

    My gut says your big red button’s in the wrong place. I think you might be falling foul of ad blindness. but it’s amazing when you see it in action like this.

    IMHO the right place for your button is at the end of the narrative, where there’s a need for a next action – so, where those partner logos are on the front page. (and in the right hand column, when you’re a level deeper)

    1. If we don’t share we don’t learn Tim, in my honest opinion. Excellent theory on the button placement. We’ll see what happens with the other tests and see if this could be a positive change.

  17. I’m with Becky on this. The button is distinctly non-button like. Especially to an “ordinary users” to whom a button is a small box at the end of a form. Large colourful boxes would more often than not be an informational or advertising banner for them, I would think.

  18. Great post! I agree with a lot of the users that the button doesn’t really look “buttony.” I’d also add that the context of the button is wrong. Te placement of the button, in the center of the main navigation, further makes it appear to be a call to action, not a button. I would bet that putting that same button in the middle of the page above the “permanent positions” column would result in more clicks.

  19. This is just a thought, based on no research at all – but perhaps your big red button was TOO consistent with the feel of the site, to the point where it felt contiguous, like it was just part of the design or background or something

  20. I don’t know it’s a button. I spend lots of time browsing internet and I dont expect a button to be like this. It looks like a logo or a do not click warning.

    I think this also happen to http://bundlehunt.com. The interface is so futuristic, I don’t know where to click.

  21. This is very interesting indeed! I agree with Becky on this point too. However I think its less to do with the design of the button and more to do with it’s position. It’s in quite an unconventional place for a button, above copy, centered, very close to the main nav. I myself had a gut reaction against all logic when I saw it of “is that a button or a graphic” just due to it being where it is.

    Along with the pricing mentioned by Mark, these issues are what probably add up to a user totally discounting it as a clickable button.

    I was also very interested to see that the person who had the most trouble with the site was the only user who clicked. This seems to back up my idea that the unconventional position of the button puts people off. More savvy users are more conditioned so they went for the navigation links because they know that they definitely work. However the 8th user responded better to the button because they weren’t as used to going for the top right links, in my opinion.

    All just speculation I know, but there you have it.

  22. It’s what I call “header blindness” (although I’m sure I didn’t coin the phrase!). After recognising the logo and hence knowing they are in the right place, a users attention will jump to ‘the content’ which on most sites is under the header. Your button is obviously above that hence the problem…

    It does surprise me that the red didn’t catch their attention though! I always thought that you can break some rules by attracting attention with colour – it seems I’m wrong!

  23. Quite possibly the button is so big it actually looks like a header graphic.

    I don’t think the price on it helps as it looks like by clicking on it I have to make a payment.

    What you have done makes sense to me but Im trying to look from a users perspective.

    Goodluck πŸ™‚

  24. I agree with a lot of the comments above – the big red button just didn’t look like a button to me, but more like a title / information panel. No change on hover, and more text that we usually see in a button compound could also have an effect.

    Perhaps because of the muted colours on the bottom half of the page, and the little “hide” link, I think the red button looks like the title for the white panel.

    The W3C recommends not using colour alone to denote a link, so often links will have underlines or some visual clue (arrows, speech bubbles) for the user that they can click on that element. If your test subjects are used to using other sites that follow this convention, that could be why they’re missing the link. And perhaps person 8 is less used to websites, and therefore less conditioned to what a link *should* look like (according to the W3C).

    Interesting to hear your opinion of sliverback. Good luck with the next round of testing (and I love the eyetracker idea)!

  25. I think, that this button doesn’t look like a button… It looks rather like a title label for the section below.

  26. I probably wouldn’t have clicked on the big red button – it doesn’t look clickable to me. It looks like a graphic.

    We went through this when designing the website for my new startup, http://www.wanderid.com. The site is very simple, so we were confident that usability would be a breeze. There are only a few things you can do! We did testing and our users didn’t do anything we expected. We went through three revision cycles and endless pulled hair to make something we thought was totally obvious usable to our target audience.

  27. I think the Big red button doesn’t look like a button at all. I’m not at all surprised few clicked it.

  28. I’d be curious to see what would have happened if you never had a text link to ‘post a job’ and see if they then clicked the red box. Seeing as it would be the only option left.

    Also, I agree with the comments about it not looking anything like a button. For one, it’s bog, and no true visual queues exist to say ‘hey I’m a button’, like more rounded corners, roll-over effect (depress or color change) and no prominant drop shadow. These all hinder the button visual you want to achieve (IMO).

    1. Hi Rod, very valid points. I’ve thought about removing the button altogether and adding in a text link. Just from watching the users it seemed they all wanted and approached text-links more than buttons etc.

  29. I think, the red button looks like an advert / banner. Thats, why i couldn’t realize the big red button πŸ˜‰ But another point related to the website: the font is really hard to read under FF3.6.10 and Chrome 6.0.472.63. The contrast is very low. You should check it via borwsershots or something related.

  30. It seems that the big red button lacks context. Nothing surrounding the button suggests that it is a CTA. The text link in the context of nav bar makes much more sense to the user.

    The big red button look more like an ad than CTA – similar to the ad “Made by designer WooTheme” graphic on this page.

    People scanned out things they think it is an Ad. That is my 2 cents.

Comments are closed.