Users expect things to work from what they see

I always use my Mum as an example of a general internet user. If I don’t think my Mum could use something then it’s probably wrong for most people.

If you’ve ever been involved in User Testing, live or remote by using something like What Users Do, you’ll notice a few things;

  1. They’re not like You and I.
  2. They do everything different to You and I.
  3. You’ll want to sit on your hands whilst watching them go through the required tasks as you’ll want to try and point them in the ‘right’ and ‘better’ direction of how they use a computer, let alone their general internet usage.
A user looks at something on a screen and expects it to do what it says.
  • Log In = Log in to the website
  • Sign Up = Sign up to the website
  • Log Out = Log out of the website
  • Save = Save information
  • Go back = Go back to the previous screen or action they were doing.
Tesco Failed

I found out this morning from randomly looking to do my grocery shopping online that one of the largest grocery shopping retailers ‘Tesco‘ failed on this first hand. As you’ll see from the below, they have a ‘Sign In’ button however when clicking on it, you can’t sign in. It simply produces a drop down navigation for the areas of the website which is not the action a user requires, nor the information they need to complete the action. To sign in, you have to go through to a section to then sign in by another means.

Tesco Your UX is Broken

It takes nothing for a user to become confused by something, it takes nothing to lose a customer because of something not working or confusion as how something works.

Let’s not make things difficult for people using what we build. They’re looking to get from A to B in the most seamless way possible, let us help them do that by not missing things like Tesco.

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
  • 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.


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?

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.