A task has two sides to consider on an intranet because both sides of the task equate to internal resources being used in order to complete the task. This story is entirely fictional, but based upon the type of things that happen all the time with corporate intranets.

If you work on one yourself you may recognise some of it.

Task delivery

On one side of the task are the people who deliver it. Let’s use the example of booking meeting rooms and an invented company called DaveTec Logisitics. Large organisations like DaveTec have numerous buildings in different towns often across several countries. In DaveTec they have a team responsible for taking room bookings in all of the company’s 82 buildings worldwide. This team is made up of a manager and 8 telephone operatives who take the room booking calls.

The manager of the room booking team has been asked to make some efficiency suggestions. His brother works at StefTec and has told him that at StefTec all room booking is handled on the corporate intranet. So the manager proposes to make such a facility available in DaveTec enabling him to halve the number of telephone operatives taking calls. The manager shows the figures to his superiors and secures some budget to have his room booking facility developed.

Task users

On the other side of the task are the users, the people trying to book meeting rooms. Before the efficiency improvement these people would call a number and book a room over the phone. Now they have to log on to the new room booking facility and do it all online.

The manager got excited and called it E-book instead of something useful. So not only has he borrowed a term that means something else, but nobody knows how to find the facility on the intranet. They don’t know they are supposed to be looking for something called E-book. It’s on the homepage of the intranet but everyone ignores it and searches for ‘Meeting rooms’ instead.

A helpline is provided manned by the 4 remaining operatives but they are only allowed to talk people through E-book rather than simply take their booking. This is to help people ‘settle in’ to the new way of doing things. In the meantime the manager gets some promotional pens and mouse mats made promoting the ‘E-book brand’

Award winner

The Directors are very happy with the manager because he has reported a dramatic improvement in efficiency. Half of his operatives have been redeployed to other roles so he has reported the cost of employing them as the efficiency improvement he is responsible for. Someone from the Communications Department hears of this ‘improvement’ and writes a very well crafted application to an industry award. Before long the manager is at a posh dinner accepting an industry award for his efficiency idea.

Meanwhile…

What nobody at DaveTec ever measured was the impact E-book had on the productivity of the people that had to use it. These people outnumbered the operatives by about 10,000 to 1 and many were more expensive to employ than the operatives. Instead of being able to just pick up the phone they had to wrestle with a badly made application that it took them 30 minutes to find. When they were at the end of their tether they then picked up the phone to talk to the telephone operatives who then walked them through the process over the phone.

In time, teams within DaveTec learned workarounds. Some didn’t bother to book the rooms and just used them pretending to have booked them. In other teams the resident computer geek would be  given the task of booking rooms for everyone in the team because he had worked out how to use E-book.

Efficiency gains?

In reality there were no efficiency gains made with the introduction of E-book. It was expensive to build and needed to be promoted so that people knew how to find it. The cost of employing 4 operatives had been removed from the manager’s budget but hundreds of people across the company had picked up a tiny fraction of their job and were being paid more to do it. Nobody was measuring this, so nobody knew.

The very purpose of booking meeting rooms was being thwarted because people were too busy to deal with the hassle of using E-book. Instead dozens of people in each of the DaveTec buildings would waste time wandering around looking for a meeting room that was free and repeat the process when they were thrown out by the people who’d actually booked the room. Nobody was measuring it, so as far as DaveTec was concerned it didn’t exist.

If only…

Unfortunately this is a common approach for large organisations and their intranets. If they’d considered the other side of the task – that of the intranet users, then they might actually have created some real efficiency gains.

What d’you think?

Do you recognise this type of behaviour or am I exaggerating? Leave a comment below and let’s have a discussion. Sorry but comments like ‘nice post, thanks’ will be trashed.

Frontloading important information

There’s an advertising sign I often see when driving down the M74 in Scotland. I’ve noticed it dozens of times but I can’t tell you what company it’s promoting because I didn’t notice the company name. The copy on the advert starts something like this

Which company was awarded the best blah blah blah…

I pass the sign at about 70 miles per hour. I’m trying to concentrate on the road and look out for signs that are pertinent to my journey. So this company doesn’t have a lot of my spare attention to play around with. It needs to make its point quickly if it wants to make it at all.

Unfortunately the (as yet unknown) company behind this sign has chosen to brag about itself in the form of a question that I presume it then answers. I haven’t gotten as far as reading the entire question, never mind getting to the answer. What it should do is create a sign that says who they are, what award they won and when they won it. This way they’d communicate the same message more effectively.

Reading on the web is very similar. Your users aren’t looking for the text where you boast about yourself, they are looking for useful stuff. If you want them to know how good you are then tell them with facts and put those facts to the front of your text.

Trigger words

When you’re driving to an unfamiliar destination you can be very dependent on road signs. But you’re unlikely to read every word on every sign. Instead you’re looking out for the names of places that you’re expecting to see. When you see a place name that works for you, you’ll stop reading and won’t see the rest of the sign.

This is how people behave when they are skimming through pages for links. If they see a link with strong trigger words, they will often click it without reading anything else on the page.

People who make websites often don’t appreciate this behaviour. Instead they create pages with the impressions that users will look around the entire page and make a reasoned decision after considering all options. Very few people actually do this.

Upper-case words can be more difficult to read

When you drive on a UK motorway, the junction signage you see uses the Kinneir-Calvert system of road sign design. This system dates back to the late 50s when road signs were inconsistent and often difficult to use.

Before the system was introduced there were no standards for UK road signs to follow. So it was left to the person creating the sign to decide how it should look. Amongst other things, the sign makers often used all upper-casing when writing out place names. The place names on the road signs were sometimes difficult to read as a result.

In the Kinneir Calvert system, place names are written as they would appear in a sentence. Each word begins with an upper-case letter with the rest of the letters in lower-case. This makes signs with several place names easier to read through.

The same is true on website navigation menus. In general it’s easier to read navigation menus when all of the options are not written out in capital letters.

Be careful with metaphors

Don’t try to be clever when choosing the wording of navigation options and hyperlinks within your copy.

On one of the cycling routes I often do, there is a sign for a bistro. It’s not immediately obvious what it’s for. The most prominent words on the sign say “Fuel up here” with an arrow pointing up the road. By “fuel up” they presumably mean with coffee and cakes. I often wondered if anyone went up that road because their car was running low on fuel.

While some metaphors such as shopping baskets can aide understanding, making up your own will often cause confusion. Your links should make sense out of the context of any metaphors you’ve decided to create on your website.

Clarity comes with sacrifices

Every time you add something to a design, you reduce the visual clarity of everything else on it.  By adding content to the site you’re making it easier for people to get lost on the site. Most websites could be better improved by removing content and features rather than adding more. This is something that many people agree with but find difficult to apply to their own website.

The video below gives a rather funny (because it’s so true) depiction of how Stop signs might look if corporations were in charge of commissioning them. This is why so many websites are full of useless junk.

Some journeys are more important

One of my favourite usability metaphors is that of Red routes (I mention them quite often). Like a road network your website has lots of possible journeys. Some of them are more important to your users and your organisation than others. Dr David Travis calls these journeys Red routes and argues that keeping these journeys clear of the clutter will improve the overall effectiveness of your website. Just as red routes that you can’t park on in UK cities allow traffic to flow more freely.

What about you?

Do you have anything you’d like to share about road signs that is also true of websites? Why not share them by commenting below.

Fine wine and screw-top bottles

Picture this. You’re having friends for dinner and want to make it a little special. You want to push the boat out and create a sense of occasion. The wine you’re going to serve is available as a screw-top  bottle as well as a traditional corked one. Which bottle do you buy?

The screw-top bottle is easier to open, but sometimes the quickest and easiest option is not always the best option for the occasion. The corked bottle will provide a better experience in this context. It adds to the luxury of the experience. This idea of luxury is often wrongly implemented on the websites of luxury brands.

The website is rarely the product

Your website is part of the brand experience. But it is not the bottle of fine wine. Instead it’s more like the conversation you had with the guy in the wine store when you were choosing it.

You want that guy to be knowledgeable, informative and helpful in answering your questions. Just like a website.

Wasting time

Luxury brands often misunderstand the type of experience we’re looking for when using their websites. If you’re spending £2,000 on a handbag, it doesn’t mean you wanted to be treated to a 30-second intro to the Gucci website before you can look at products. You still want to get to the handbag section of the site without fuss.

The luxury brand experience should be just as efficient as any other online experience. However some luxury brands believe that we are more ‘bought in’ to their brand and want the website to provide us with more than just a list of bags. To an extent this is true, we do expect a little more but that doesn’t mean we want the website to waste our time.

Anything extra that the website provides should be consistent with our goals and not be wasteful rubbish that is of no use to us.

Some years ago this issue was more evident on the web with the number of elaborate Flash-based sites that existed. They each had their own unique navigation concept that took ages to work out. Such sites tended to deliver very little in the way of content so tried to make up for it with smoke and mirrors. I’m sure there are plenty still out there today. Why not post your favourite examples in the comments section of this page?

Talking nonsense

Many luxury brands think we’ll be content with reading fluff about their products. By fluff I mean the text that uses lots of big emotive words without actually telling us anything about the product.

The most vomit-inducing example I’ve found recently comes from the Cameron House Hotel. In general the page the text comes from is well designed as I’ll discuss later. This however is their opening description of a Classic Room:

After a blissful night’s sleep you dive under the monsoon shower, while your favourite song plays out from the iPod docking station. You feel it’s a cue to sing in the shower, but resist for fear of waking the stag or the grouse in the neighbouring glen. You call concierge for a newspaper and sink back on top of the bed. That’s enough hard work for today you muse, gazing across the mirror like Great Loch before lazily napping beneath a broadsheet duvet.

Thankfully for the hotel, most people won’t get as far as reading the cringe-worthy bit about waking the stag in the neighbouring glen. They’ll skip past the text after just a few words.

This is the funniest example I could find but but not the worst. You see it’s not just marketing fluff. It’s trying to provide us with substantiated facts about the rooms. Unfortunately we’re all so used to reading fluff that we’re quick to dismiss it as such.

AGA uses this copy to explain to you why you’re spending so much on a cooker:

Your brand new AGA is made in the same way today as it has always been: by pouring molten iron into moulds. It gives the castings their characteristic surface (every one is unique) and helps AGA rise above the usual mass-produced uniformity.

While most manufacturers spray paint a cooker in seconds, it still takes us three days to apply the multiple protective coats of gleaming vitreous enamel that help ensure the working life of an AGA is measured in decades, not years.

Of course, the modern AGA contains state-of-the-art technology and is subject to rigorous quality and the latest environmental standards.

Every AGA component is individually inspected and colour checked before engineers carry out the final build-up in the customer’s kitchen, ensuring installation is as quick and hassle-free as possible.

It is hardly surprising then, that while previous generations have fallen in love with Dr Gustaf Dalén’s AGA concept, it has never been more popular than it is now.

It’s a little bit long but I didn’t gag at any point when reading it. It’s telling us that the AGA is a quality piece of kit by going into detail about the manufacturing and installation procedure. It doesn’t need to create poetry to do this, it just tells us the facts.

The need for detail

If anything, we need more detail when we’re buying a luxury brand. We want to know why we’re parting with so much cash for it. It would be a bit unfair of me to criticise the page from the Cameron House Hotel site without explaining that it’s actually one of the best examples of a hotel room page that I’ve seen.

If I’m thinking about a romantic weekend at the hotel I know I can only afford a standard room. But I want to be sure I’m still getting a luxury experience. So I want to know what’s in the room and get an idea of how big and nice it is. As you can see below, this page tells me.

A large photo of the room shows me it’s easily big enough and the bed looks big and comfy. The cheesy opening description is then followed up by a list of features that come with the room. So despite skipping past the over-indulgent text, I’m still going to find the detail. I’m pretty convinced that I’d be happy with this room.

The Gleneagles Hotel

The nearest competition to the Cameron House Hotel would probably be the Gleneagles Hotel. So let’s look at the page that discusses their classic rooms. I know that the Gleneagles Hotel is very lush, but this page doesn’t convince me of it.

There’s no attempt at poetry which is nice, but the text starts of almost apologetically “Smaller, inner-facing rooms”. This is a very negative opening. I’m sure the rooms are probably bigger than any I have stayed in, but this description doesn’t convince me of this fact. I’m beginning to feel a little like I’ll be treated as economy class already.

The text that says “the finest comforts and ultimate in relaxation” tells us nothing. I’ve got a pretty good imagination, so I can promise you that my idea of the ultimate in relaxation hasn’t come with a hotel room since Roman times. These are empty words and I want detail.

The photograph shows me the rooms are nice but I can’t see the bed or get an idea of scale. Sure I can get a panoramic image of a room if I install Quicktime Player. But I can’t be bothered. I’ve seen The Cameron House Hotel page and am favouring them already. So why should I install some software just so that I can see a picture of a room?

It’s pretty obvious that this page was originally designed to have the main photograph and the short text description only. Later they realised that people might actually want to see the room and even book it. They should have redesigned the page to do this, but instead they just slapped in some links.

Any comments?

Join the discussion and leave a comment about this article. Here are some ideas:

• Show us examples of sites for luxury brands, good or bad
• If you were to make 2 improvements to this page. What would they be?
• Make a comment about designing for luxury brands

Complicated watches

A recent article in Neuromarketing discussed when complicated is good. The author argued that people sometimes want complexity. I don’t agree with the author but that’s not really important. The problem is that his argument is based upon his own misunderstanding of the word complication when used in this context.

In the article the author explains that Blancpain uses the term complications as a marketing device to illustrate that their watches are very intricate time pieces with lots of little cogs. However in the comments section of the article, somebody points out that complications is actually a term used in horology (the science of measuring time) to mean features.

The author responds, thanking the commenter and says “instead of brilliant marketing Blancpain is merely using jargon unlikely to be understood by non-horologists? Either way, I think it works for them “.

I disagree, it doesn’t work for them and it was never brilliant marketing. I think the word complication is a hindrance to the site’s users. The author’s own misunderstanding of the site has led him to write an article with a redundant argument.

Translating for your customers

Blancpain has used the term complications because this is what it calls the features of a watch. However it would be a mistake to assume the users of the site will understand it. If the author of that article misunderstood it, what chance does a passing web user have?

Baffling people with jargon is never a good idea on a website. Especially when that jargon is used on the site’s navigation menu.

Choosing your words

If Blancpain knew their key users understood such terms (high-end watch retailers for example) then using such a word would be fine. The users would know what complications meant in this context and using such a term would be consistent with the tone of  a high-end watchmaker.

However, it’s unlikely that someone who is simply looking for an expensive watch to buy for their husband/wife will understand the term. The use of the word complication will be unhelpful to these people. In fact it’ll probably obstruct many of them from choosing a watch.

So this leaves the owner of the website with a dilemma. Do they use the industry term or a simple term like features?

Like many design decisions, there are winners and losers regardless of which decision you take. Judging by the site content, it looks like the site is aimed at the end customer. But this doesn’t mean that end customers are the primary users. It may just have been a guess on the part of the web team. The primary users could be those with a better understanding of horology speak.

If in doubt, opt for simplicity

If you’ve researched your web users then you’ll know a bit about who’s using your site, what they want and what they know. In which case you’ll know the type of language you should be using. In the absence of this information, you’re basically guessing. In which case I’d recommend choosing simple words over industry speak.

People are normally unlikely to object to simple explanations as long as they aren’t patronising. Horologists won’t care a great deal that you’ve said features instead of complications on a website like this. But the word complications is an obstruction to the watch buying public.

What would you do?

In the absence of reliable research on the users of the Blancpain website, I’d use the term watch features instead of complications . Why not leave a comment explaining the approach you’d take and why?

In this post I’m going to point out an issue in the design of a yogurt pot that the designers may not have noticed. When I walk you through the problem, it may seem obvious.

Mmmm… yogurt

The product image below is a tasty yogurt-based snack called Rumbers Oat Cluster. I often buy it with my lunch when I’m in town.

The pot is quite cutely designed (if a little over-packaged). It’s made up of plain yogurt and a dried fruit, seed and nut crumble.

Before eating the snack you need to mix it all together. So you start by separating the two pots. You peel the foil lid from the pot containing the yogurt (pictured above). Then you remove the film from the pot with the crumble (pictured below) and pour the yogurt over the crumble.

After pouring the yogurt over the crumble it’s normal to mix the two together. Well that’s what I do anyway. In order to do so you need a spoon. Luckily Rumblers Oat Clusters come with a spoon. Unfortunately that spoon disappeared underneath the crumble when you turned the bowl over. And that crumble is now underneath a layer of yoghurt.

The spoon disappeared when you turned the pot over, so it’s easy to forget about it. In a step-by-step process it’s unusual to think about Step 5 until you’ve finished Step 4. Unless you can see it, you don’t really think about the spoon until it becomes relevant (See Jakob Neilsen’s Usability Heuristics – Recognition not recall).

Good designers need usability testing

If the designers of this product walked through the process of using it they might do so without problem. This is because they designed it and know more about the product than the user.

When they walk through the process, they’d just remove the spoon after removing the film from the pot. It’s unlikely that they’d forget about the spoon because it was them who decided where the spoon went. They need to test the design to find such issues.

No amount of design talent will allow you to spot all of the issues with your designs. This is why good designers understand the benefit of usability testing.

What would you do?

It’s easy to pontificate about these things from the safety of my usability blog. But in reality it may not actually be worth fixing the issue.

Why not leave a comment telling me what you’d do and why. Would you leave it as it is or could you redesign it to make it better?

Remember to consider:

• The likely financial impact of the problem (I’m still buying them)
• The cost of production (they simply drop the spoon in before adding the crumble)
• The importance of the spoon’s visibility at purchase

I’ll try to respond to each comment. You can add links in your comment to anything that supports your argument. Just paste the URL into the comment if you wish to do so.

Avoid internal/technical language

Think carefully about the language you’re using on your form. You should adopt your user’s vocabulary instead of using any technical or industry terms. Here’s an example below from FreeAgent (a web-based accounting application).

When asking for your payment details, FreeAgent asks for your Card Verification Value. This means nothing to a lot of people. In banking it’s called a Card Verification Value or CVV number. To us normal people, it’s that 3-digit code on the back of our credit or debit card. This label might be a little clearer if it were called “3-digit security code”.

In this instance there are a couple of things that FreeAgent does to remedy the situation. By sizing the text field appropriately, many people will know what’s being asked for. They are now used to providing a 3-digit security number. Some will be happy to assume that this is what the text field is for.

We’ll talk about the other remedy a little later.

Intelligent reformatting

Your internal systems may insist on the strict formatting of some data, but this shouldn’t impact the customer. It’s your job to deal with that, not theirs.

I’ll use an example to demonstrate. When booking a flight with EasyJet, I’m asked for the payment details below. No formatting rules are specified for the card number.

Like many other people, I type in my card number as it appears on the card. The number on my card has spaces that separate the number into groups of four digits. But if I type in my number in this way, EasyJet doesn’t like it.

This is lazy programming. If the spaces can be detected by the form, then they can also be removed by the form. EasyJet should just remove the spaces for me, instead of asking me to go back and fix the problem. Don’t they want my money?

Also, see my post on validating web forms and read why JavaScript alerts are a poor mechanism for form validation.

Only ask for the information you need

Every question you ask on a form is an opportunity for something to go wrong. This is just one of the reasons to only ask for the information you need. You don’t want users dwelling on questions that don’t matter. So don’t ask them in the first place.

I recently wrote a blog post about asking people marketing questions that is related to this point.

Asking inappropriate questions can also create issues with trust. If you ask for information that users don’t want to give you, they may begin to mistrust your motives. When they begin to get suspicious of you they may abort the form completely.

Optional and required fields.

Don’t use the word ‘mandatory’ when talking to users. We say ‘mandatory fields’ because we’re geeky web types. Real people don’t. Use the word ‘required’ if you want them to know what you’re talking about.

There are 2 approaches you can take to displaying required fields.

• All fields are required unless marked as optional
• All required fields are indicated (often with a red star)

If you choose the 2nd option, the placing of the red star is very important. When people fill out web forms, they tend to look only at the questions and then the form fields. So if your star is not in the path of that eye movement, it could easily be ignored.

The three examples pictured below show a red star that is positioned in the path the user’s eye will take when reading and completing the form. So it is likely that users will notice its presence.

Good examples

The example below shows an approach where the red star is more likely to be overlooked than in previous examples. This is because the user has no reason to look there.

Bad example

Think before validating optional fields

In most cases, it’s better not to bother adding validation to optional fields. But sometimes you’ll find that it’s necessary.

It’s often better to accept that the data from optional fields will be more prone to errors. The alternative is to validate these fields and introduce the possibility of added friction to the process of completing the form.

If you’re prepared to accept no response to a question then consider also accepting an incorrect response.

Providing hints

It’s often helpful to provide little hints with some questions in order to ease understanding. Let’s go back to FreeAgent’s ‘Card Verification Value’  and see how they manage to resolve the problems that may arise from their choice of labelling.

Despite the fact that Card Verification Value means nothing to the average person, FreeAgent helps to resolve  problems by providing some additional info.

Notice that this hint isn’t hidden behind a question mark link. The advice is short, so there’s no need to hide it. Strictly speaking, this solution would be unnecessary if they’d chosen better labelling in the first place. When using this type of approach, it’s important to consider the flow of the form.

Inline validation

Validating the form while the user enters information is called ‘inline validation’. It can be a good way of helping users through a form in a less obstructive way than validating all of the answers at the end (when the user clicks submit).

However, you usually don’t need to use inline validation on every question. Inline validation can be troublesome if it isn’t implemented well. Luckily Luke Wroblewski wrote an interesting article about inline validation that saves me the bother of having to do it here.

Was this blog post useful?

If you found this useful, here’s a few things you can do:

• Read more posts on my blog
• Donate to my chosen charity
• Hire me to help you improve your website
• Follow me on Twitter
• Join the discussion by commenting below

In this post I’m going to tell you about a time when I got it wrong because I didn’t consider the flow properly.

Once upon a time…

Several years ago I was testing a web form for an event management system. Employees would use the form to confirm their attendance and notify the organisers of any dietary requirements they had and stuff like that.

There were many problems with the form but one of them was to do with reference numbers. An optional field for a reference number (referred to as the invite number I think) was causing  some problems. I can’t remember the exact details, but the question was something like the one I’ve mocked up below.

People who didn’t have an invite stalled here. Without an invite, they didn’t yet have an invite number. They could have left the field blank but many people felt uncomfortable doing so. It seemed that because the question was being asked, they thought they should have a number.

The solution

The solution the team arrived at was to put a checkbox directly below the field as shown below. It’s wasn’t my suggested approach, but it worked well in usability testing. The proximity of the checkbox to the textbox created an association that resolved the problem. Users felt happy to leave the textbox blank because they’d checked the box. They were typically delayed for less than a second while they worked this out.

I was impressed with how well this solution worked and have remembered it ever since. What I didn’t really consider was how it flowed. I just remembered that its presence gave the user permission to leave the textbox blank.

Until a few months ago…

I remembered this approach when I was advising a client a few months ago and suggested they incorporate it into one of their forms. They had two mandatory fields on one of their form. One for daytime phone number and one for an evening number (see below).

I was concerned that some people wouldn’t realise that they could put the same number in twice. So I suggested adding a check box under the evening phone number, in order to give them permission to do so. (see below).

As well as allowing permission to use the same number twice, the checkbox was supposed to save the effort of typing it a second time. If they checked the box, it would populate the evening number field with the daytime number.

In testing, nobody had a problem entering the same number twice. But everyone who did so, typed the number twice (or copied and pasted it) before noticing the check box. The form didn’t flow properly. The check box became noticeable only after it would have been useful. It didn’t cause a major problem but people realised they could’ve saved themselves some effort.

How are the two solutions different?

So why did the solution work so well for invite reference numbers, but not for phone numbers? It’s to do with the way the forms flow.

People complete forms one question at a time and their gaze doesn’t stray far from the questions and the left-hand side of the text box.

When the answer to a question is easy, they’ll just type in the answer without considering anything else on the form. This is what was happening with the field for evening phone number. They are only likely to notice things underneath the text box after they’ve finished typing a response.

But when the form asks a difficult question, they need to stop and think. The smooth flow is interrupted and they are more likely to notice things that are placed after the text box. This is what happened when people were asked for an invite number they didn’t have.

Improving both examples

Invite number

The original solution for the invite number worked very well in usability testing. So in practice I wouldn’t change it (If it ain’t broke…). However in theory the flow can be improved by adding to the question. You probably realised this yourself.

In this example, the fact that not everyone needs and invite number is communicated alongside the field label.  There’s no need to interrupt the flow. People without an invite number will simply leave it blank and go to the next question.

Evening phone number

The pictured example below shows how the user can be given ‘permission’ to enter the same number twice whilst only typing it once. Instead of placing a checkbox underneath the field for evening number, it is placed underneath the one for daytime phone number. The label on the checkbox has changed to ‘This is also my evening number’. Checking the box pre-populates the field for the evening number.

The checkbox now works in harmony with the flow of the form. Users type their daytime phone number before they see the checkbox. If their daytime number is also their evening number, then they simply check it in order to prepopulate the following textbox.

Conversation

The flow of your form is part of what Caroline Jarrett refers to as the ‘conversation’ your form has with the user. When you have a conversation with someone, that conversation has a flow. When you ask someone a question you tend to pause and wait for an answer. Think of a form field as that pause in the conversation.

When you ask someone an easy question, they will probably start answering before you’ve even finished asking. But when the question is more difficult, you can follow the question up with clarification if it’s needed.

Was this blog post useful?

If you found this useful, here’s a few things you can do:

• Read more posts on my blog
• Donate to my chosen charity
• Hire me to help you improve your website
• Follow me on Twitter
• Join the discussion by commenting below

But asking this will cost you in lost conversions and the data you gather is probably inaccurate. In this post I explain why you should avoid asking people how they heard about you on your web forms.

Added friction

It might seem like a harmless question. But there’s no such thing as a harmless question when you want people to complete your form.

The fewer questions you ask on a form, the greater the number of people will complete it. So each question you ask has a cost that it must justify. That cost is the number of people who drop out because of its inclusion.

This isn’t because your users say “Oh, I’m not answering that” and leave. Instead adding friction to a process increases the likelihood that users don’t get to the end of it.

We are are so often distracted by something else when using the internet. We’re also quite often limited by time, so it’s easy to decide to postpone the form until later when we think we don’t have time to complete it now.

By removing points of friction, you increase the likelihood that users will get through the form without interruption.

Inaccurate data

When people are completing your form, they’re happy to answer questions they feel are necessary to ask. When they’re buying something, they’ll tell you their address because you need to know it in order to make delivery. But when you ask a question that isn’t related to their request, you risk annoying them.

The accuracy of a customer’s response to this question has no impact on them personally. If they answer incorrectly, they still get what they came for. So if you’ve annoyed them, they may deliberately give you an incorrect response.  Even if you haven’t, they’ll often just pick an option at random.

You’re relying on goodwill in order to get a correct response. But you’re also testing their patience by asking the question in the first place. This puts goodwill in short supply.

Sometimes it’s just a silly question

When you have a strong brand in your industry, it’s a bit silly to ask people where they heard of you. It’s like me asking you where you heard about Coca-Cola before you bought it.

People often engage with companies having never heard of them. But most of the time they buy from or contact companies they’ve heard of through multiple channels. This makes the question very difficult to answer. When the question is difficult to answer, you’re making them think. And what does Steve Krug tell us about making users think?

You’re adding potential complications that are avoidable.

What are you doing with the answers?

When you ask this question, what are you doing with the answers? How valuable is this data to your organisation? I know several companies who ask this question and do nothing with the data they collect. They don’t realise that this data comes at a cost. If they could truly see the cost, they’d probably stop asking the question at all.

Even if you are looking at the data. How is it driving your decision making? Are you just looking at it and saying “Oh that’s interesting”? Interesting is good, but remember this question is costing you money. Is the information so interesting that you’re willing to pay for it in lost sales?

Conclusion

It’s useful to know which of your marketing efforts are leading to conversions and there are ways of obtaining this information. But asking your users when they’re trying to get through a web form isn’t the way to do it.

You can’t rely on the accuracy of the data and it’s costing you in lost conversions.

What do you think?

Do you agree? Or am I talking nonsense? Tell me what you think by adding a comment below. You can also read other articles from my blog. Here are a few suggestions:

• What difference does colour make?
• 10 tips for writing 10 tips articles
• Using address finders in web forms

I couldn’t tell a 16th century building from an 18th century one. The High Street in my home town is full of old buildings, so I couldn’t even guess.

After I’d recovered from laughing, she grudgingly explained that it was across the road from the Post Office. This was a little more helpful.

My mum often explains things in a way that only she sees them. She’s a historian, so this can include giving directions that you need an interest in period architecture to understand.

So what’s this got to do with websites?

Lots of organisations are like her. They are so engrossed in what they do, that they speak in a way that is confusing to others. Unfortunately this tends to include their customers.

Such organisations usually reflect this on their website. They tend to:

• use vocabulary that customers don’t understand
• organise information the way they see it and not how the customer does
• swamp their site with content that few people want or need
• fail to provide the content that people do need

These failings drastically affect how useful and easy-to-use the website will be.

An example – National Grid UK

Let’s use a scenario to explore this further.

Brendan is a local café owner who is losing business because of road works outside his premises being carried out by National Grid. This is a scenario a café owner told me about when I was buying lunch. I’ve changed the café owner’s name as well as the actual website involved.

Brendan wants to find out how long the works are going to take and whether he’s entitled to any compensation for loss of business. His options from the National Grid homepage are shown below.

The structure of this website is relatively organisation-centric rather than customer-centric. There isn’t a section for road works at the top level. Instead Brendan must first understand which department is carrying out the works. Brendan doesn’t care how the National Grid organises itself, he doesn’t care why they are digging up the road. He just wants to know when the work will be finished and whether he’ll be compensated for loss of business.

Road works for gas pipes are the same as road works for electricity as far as he is concerned. They both involve a big hole in the road and fewer people entering his café.

Let’s skip past a lot of Brendan’s pain and assume he eventually opts for the Gas section of the website. Here are his next options.

Again National Grid organises its content in an organisation-centric manner. This time the road works information is hidden under ‘Pipeline Projects’. National Grid sees its hole in the road as a pipeline project, the public (including Brendan) see it as road works.

This is like my mum saying “in the 16th century building” when I need her to say “across from the Post Office”. National Grid is talking from its own perspective rather than Brendan’s. As a result, Brendan can’t find what he’s looking for.

If Brendan eventually selects the links he needs, the next choice gets a little easier. Streetworks is a decent link title, but when he clicks it, he sees the page below.

This page is full of information that consumers don’t care about. National Grid care about how they scored in the recent Transport Research Laboratory report, but Brendan doesn’t. He just wants people to come and buy their lunch in his café. This page should be a pathway page to the useful content that exists deeper within the section.

Imagine you pulled up in your car to ask a man for directions. Instead of just telling you where you need to go, the man starts a lengthy explanation of the history and culture of the town you’re in. Do you care? No, you just want him to shut up and tell you where you need to go. The page shown above is that man.

The site doesn’t actually have any information about the timescales of its projects, so Brendan is out of luck. National Grid are too busy harping on about the stuff they’re proud of to give Brendan the information he needs.

Frequently Asked Questions

However, information about compensation does exist. It’s relegated to the bottom of the Frequently Asked Questions page. Here is the relevant question from the FAQ page.

Once again National Grid bores Brendan with all the background information before telling him what he needs to know. This is information that National Grid wants to say, but Brendan just wants to know if he’s eligible and how he claims compensation. Much of the rest of this text is wasteful and rather self-indulgent.

Empathy is the key to a better user experience

Unless you’re like my mum, when you’re giving someone directions you tend to stick to the information that person can deal with. You don’t introduce local nuances and you don’t try to show off about your knowledge of the local architecture. In other words you empathise with the person you’re trying to help.

Websites are the same. Your users will enjoy a better experience if your site empathises with their circumstances, knowledge and vocabulary.

What do you think?

Do you agree with me, or am I wrong? Whatever your opinion, post a comment and let’s discuss it.

Good calls-to-action

I recently wrote an article for UX Booth about Good call-to-action buttons. In it I explain that call-to-action buttons are clicked more often when they are made more prominent. Multivariate and split A/B tests have shown this to be the case.

It makes sense too. If you make one button on your page very prominent, you make it easier to notice. When it’s easier to notice, there’s less friction in that user journey. So if that button leads to the next step in your key user journey, then your website should enjoy greater success.

Restrictive colour palettes

Many brands that do business on the web have colour palettes that are restricted to just 1 or 2 colours. Their branding guidelines state that no other colours can be used.

In this article, I’m going to discuss just one example of such a company – the AA.  However there is a long list of companies who have similarly restrictive branding guidelines.

I believe that the AA could achieve a better conversion rate if only it expanded its colour palette to allow the very occasional use of a contrasting colour. I carried out a little experiment to test my theory.

The AA prominence test

I ran a test (using the Five Second Test) to check the visual prominence of the ‘Get a car insurance quote’ button. I tested 3 very similar versions of the AA homepage.

Version 1

Version 1 was the current AA homepage without any tweaks. The ‘quote’ buttons on this page don’t stand out enough. They have been made yellow because no other colour appears to be available for the designer. The buttons blend into the overall design.

Version 1

Version 2

I was worried that the design of the quote buttons wasn’t as clear as it could be. So in Version 2 I made the buttons smaller. I felt they looked more like buttons and less like a border this way. As it happened it didn’t make a difference to the test, but I wanted to be sure.

Version 2

Version 3

Version 3 was similar to Version 2. However unlike the people at the AA, I wasn’t constrained by their branding guidelines. So I changed the colour of one of the buttons and made it a shocking blue colour.

I chose this button because ‘Car insurance’ is in the top-left section and is therefore probably the most important product for the website.

Version 3

How the test works

180 participants were shown 1 of the 3 designs for just 5 seconds. This meant that each version was shown to 60 people.

During the 5 second period, the participants clicked on the page to point out the areas of the design that caught their eye. This test allowed me to find out which areas were visually the most prominent.

The results

Participants in the test clicked on various parts of the page, but the bit I was interested in was the ‘get a quote’ button for car insurance. How much of a difference would a change of colour make? Well, the results were pretty interesting.

15% of participants who saw Version 1 pointed out the quote button for car insurance. As you can see on the image below, the picture of the car was pointed out more often than the button. The red circles on the images below indicate one click from a participant.

Version 1

13% of participants who saw Version 2 pointed out the button. A very similar result to version 1. So I needn’t have worried about the shape of the button as far as the test was concerned.

Version 2

On Version 3, 35% of participants pointed out the button. This is a lot more than Version 1 or 2. In fact, more people pointed out the button in Version 3 than in Version 1 and 2 put together.

Version 3

So what does this all mean?

This test only tells us about visual prominence. It doesn’t mean that the blue button will get twice as many click-throughs as the yellow one. Instead it means that the designers at the AA could make this important button more prominent, if only they had more colours to choose from. And prominence has been shown to have a direct effect on click-through rates.

Restricting your colour palette isn’t just about conversions though. Colour is very useful for creating differentiation in a design. This can be used for creating things like:

• Headings with a clear sense of hierarchy (Heading 1,2,3 etc)
• Hyperlinks that actually look clickable
• Hyperlinked headings that look different from both normal hyperlinks and normal headings
• Bold text that isn’t mistaken for a hyperlink
• Creating clear differentiation between 2 or more page elements

Avoiding issues with these sorts of things helps to improve the overall usability of your website.

I intend to write a follow up post about the Five Second Test that discusses the benefits and limitations of this service.

What d’you think?

What’s your opinion of all this? Whether you agree or disagree, why not share your thoughts by leaving a comment.

If you liked this article, you might also enjoy:

• Let your hyperlinks shine
• Sub-headers are navigation
• Twitter, Tweetdeck and simplicity