Your links should be obvious

In a previous post I advised you to let your hyperlinks shine. This is because your links should be obviously visible on the page. When we’re looking at a web page, we shouldn’t need to guess if text is linked or not  We also shouldn’t need to spend a lot of  effort seeking out our options.

If links are obvious, we don’t need to be told that we can click them. It’s just patronising.

It’s not a call-to-action

Defenders of ‘click here’ links argue that it’s a call-to-action and these are good. Calls-to-action can be helpful, but ‘click here’ isn’t a good call-to-action. Here are some good examples of calls-to-action:

• Get a quote
• Open an account
• Sign-up now

They are good because they tell us why we should click them. ‘Click here’ is an operational instruction rather than a call-to-action.

It doesn’t tell us where we’re going?

We often read link text on websites without reading any of the text around it. If we’re on a page and we’re just looking for the link we need, we ignore everything that isn’t a link. So ‘Click here’ tells us nothing. If the link we’re looking for says ‘click here’ instead of ‘get a quote’ we might never click it.

It smothers trigger words

So if ‘click here’ on its own is bad, what about ‘click here to get a quote’ or whatever? Well, this is slightly better. At least the text tells us what the link does. We know where we’re going to go if we click it. But finding it on the page could be easier.

The words ‘click here to’ are smothering your trigger words. When we’re scanning a page for links, it takes longer to recognise a link when the helpful words are at the back. If lots of links begin with ‘Click here’ then it can be very difficult to find the link we want.

Good link text is front-loaded, so the most important words are at the front. This makes the link easier to find.

Banner ads

I’ve heard talk that the words ‘click here’ have been statistically proven to increase click-through rates in banner advertisements. I can’t comment on this because it’s not really part of my expertise. It might be true. However nobody has ever been able to show me the research itself. If you know where this research exists, please put a link to it in the comments for this article.

What do you think?

Am I wrong or do you agree with me? Whatever your opinion, please leave a comment and let me know what you think.

Using 1,2,3 links is often a result of lazy web design. In many cases, it’s the web equivalent of asking your users to rake through bargain bins. They don’t know what’s in each bin, they have to rummage through them in order to find out.

Often however, 1,2,3 links are the most appropriate option. I recommend applying a little thought before using them in your designs.

What are 1,2,3 links?

When I say 1,2,3 links I mean the links that allow you to navigate through a long list of pages (also called pagination links). This approach was made popular by search engines like Google (I’ll come back to that in a bit). You start on page 1 and in order to find what you’re looking you have to click 2, then 3, then 4 and so on.

What’s wrong with 1,2,3 links?

These links hide content. There’s no way of knowing what’s behind each of the links until you click them, so you have to either click through every link or start guessing. This can cause problems for users, especially when there are a lot of pages to look through.

I’ve chosen Hotmail as an example because I’ve struggled with this feature on a few occasions. The image below illustrates the problem.

Listing by date

These links appear at the bottom-right of the web interface for Hotmail. It allows me to scroll through past mails. However the mails are sorted by date. Let’s pretend I’m trying to find an email that was sent to me in April? Which number do I click?

If the results are listed by date then the links should be provided by date rather than as 1,2,3 links as they are here.

Listing alphabetically

So let’s say I decide to sort my emails by the name of the person who sent the email instead. If my friend Stuart sent me the email I’m looking for, then I need to get to S. I’m still forced to use the 1,2,3 links. After some painstaking guesswork I might end up at the emails from senders beginning with S on page 48. This issue renders the ‘Sort by sender’ function practically useless, unless you’re looking for that email from Aardvark Electrical Supplies.

It’s not just Microsoft

It’s not just Microsoft that falls into the 1,2,3 trap. Plenty of big websites do it, basically because it’s technically easier to achieve. The image below shows the Radio 4 page on BBC iPlayer. The 7 long pages of programmes are listed alphabetically, but the links that take you through the pages are 1,2,3 links. So which page is Secret Lives on?

So which page is Secret Lives on?

When to use 1,2,3 links

You can use 1,2,3 links when there isn’t a lot to look through or when your users actually want to look at the content of each page, one after the other.

With search results

1,2,3 links work well on search results. If the search is any good then the results will be in order of relevance. The 1,2,3 link just help the user go through each page. There should be no need for them to jump straight to page 9. If they are on page 9 it is because the user has tried pages 1 to 8 already.

When there are only a few pages

If you have 3 short pages, then it might be easier to use 1,2,3 links than categorising the pages in some way. If the pages are long then try to categorise them instead.

Alternatives to 1,2,3 links

There are plenty of alternatives to using 1,2,3 links. The method you choose depends on the context.

Chronological and alphabetical order

If you are listing alphabetically then you can substitute 1,2,3 for A-D, E-H or Aa-Am, An-Az if you have a huge list. It’s often trickier to achieve but not impossible. Likewise date order links can be provided as date ranges or using a calendar.

Categorisation

In some cases you don’t have to provide linear pages at all. If I’m looking for a new pair of shoes and I know I want brown leather shoes with laces I should be able to choose these options within product categorisation options. I then don’t need to wade through the pages of shoes I know I don’t want.

One big page

There are occasions when it’s better to show everything on one big page. If the website I’m using to buy shoes has lots of shoes I might end up with a lot of options even after filtering for brown leather shoes with laces. In this case it’s better to just give me one big page of shoes, than ask me to click through half a dozen pages. I can then click on the ones that catch my eye rather than have them hidden behind 1,2,3 links.

Think about the context of use

Whenever you’re considering 1,2,3 links, think about the context in which they will be used. There’s a good chance that it’s not the ideal approach.

What do you think?

If you have an opinion on this, I’d love to hear it.

Allow your users to quickly understand what their options are on each page and they are less likely to miss the content they want. Some websites have subtle or camouflaged links that might look nice, but they don’t really help.

Making the most of your trigger words

In a previous post, I explained the concept of trigger words. Using trigger words on your links will pull users to the content they want. Of course your trigger words are of little use if nobody sees them.

It’s something I’ve seen a bit of in testing. In one instance a participant said “It would be good if there were more charts available” without seeing the ‘more charts’ link below the chart they were looking at. The link had the same visual property as normal text, only with a small arrow to the left of it.

Users don’t read all of the text on a page. So don’t make them work too hard to find their options.

Avoiding conflicts

Avoid using the same properties of your common hyperlink properties on anything that isn’t a link. I suggest choosing a colour for your links that is not used for anything else. On my site it’s pink. Everything on the website that is pink can be clicked.

Some websites make the mistake of using the same colour for both links and sub-headings. In such cases it’s possible to mistake links for headings and vice versa.

Don’t underline text that isn’t a link either. People will think it is a link and try to click it. Emphasise words using emboldening instead. Of course you then need to avoid using plain bold text as your hyperlink property. You can then use emboldened text to improve the scanability of your text without affecting the visibility of hyperlinks.

An arrow is not enough

In my earlier example I mentioned the link text that went unnoticed had an arrow to the left of it. Arrows can help tidy up the appearance of your links. But the arrow alone is often not enough to indicate a hyperlink. So if you’re going to use an arrow then make sure you indicate the link in some other way as well.

The quick test

Good links catch user attention. Bad links wait for the user to read them and then presume that they must be a link. You can check the visibility of your links by blurring your eyes a little when looking at the page. Can you see where the links are? If so, you have visible links.

Let your hyperlinks shine (not literally, that would be silly) and you allow your users to make better progress through your site.

• A cheap rip-off from the iPod (sorry I couldn’t help myself)
• A gaming console
• A new Roy of the Rovers sketch about a football playing robot

I’m sure you can think of a few of your own. It will take Channel 4 a bit less effort to get people to understand their offering. Meanwhile if you speak to a few of your less tech-savvy (licence-paying) friends and family, you’ll find that some of them aren’t sure what iPlayer is. The BBC now has to spend a lot more of your money explaining the concept.

[A previous post that I wrote about images on catch up TV gets most of its referrals from the search term "Silent Witness Catch up". I've added a little comment on that post to help those people on their way.]

So what’s this got to do with your website?

A lot of people who haven’t used iPlayer yet will think it’s a great invention. They’ve seen the adverts, they just didn’t understand what it was. So to them, the concept is hidden behind the name.

Have a look around your own website for links and headings that don’t make instant sense to someone with little experience of them. Your users will not click all the links that don’t make sense to them just to find out what they are. Instead they will just ignore the links that don’t make sense. If they need to read a paragraph before the heading makes sense, then the heading is not doing its job.

Intranets are full of these bad links

Intranets are a haven for this type of mistake. In the corporate world, Item 1 on the agenda for the steering group of any new initiative is to think of a bizarre name to ‘brand’ the concept. This is the name that will make it totally unfindable on the intranet. So the employee looking for the company’s flexible working policy will miss the link to ‘Super-Flexo’ or whatever it ends up being called.

“But we’ve communicated it, so people will understand it” is the common response from the project team. Well BBC have ‘communicated’ the iPlayer and lots of people still don’t know what it is.

Describe first, name second

On your website / intranet you should use links and headings that are descriptive before introducing the name the organisation has decided to give it. In a perfect world the name would be descriptive in the first place. But getting your colleagues to think in this way is easier said than done. After all iPlayer is a cooler sounding name than Watch Online, even if it is unhelpful.

Use trigger words

The thing that makes Watch Online such a good name is that it is probably a trigger word. I’d love to hear that Channel 4 found these words in their search logs and decided to use it as the name for the service. However I think it’s probably more to do with them also making archive clips available. Something that Scottish Television did some time ago. They just didn’t choose such a good name.

Disclaimer: I don’t hate BBC iPlayer

I’m actually a very big fan of both the BBC and the iPlayer I just think it has a silly name. If we were comparing interfaces rather than names then iPlayer would win easily.

The importance of vocabulary

It’s important to use the same words as your users on your website. They often use different words from you and probably recognise a fraction of the terms and abbreviations you use on a daily basis.

This is not only important for writing passages of text but also for way finding on your site. Good links and headers use the same words that users are thinking when they need to use them. Trigger words and Customer Carewords are based on this fact. “Words drive action” as Gerry McGovern puts it.

Trigger words

In 2004 Jared Spool wrote about trigger words. He argued that users were more likely to find what they are looking for when a site used exactly the same words they use to describe their goals. These words trigger a response because they match the words in users’ heads.

Finding your site’s trigger words

Trigger words can be found by talking to users. One suggestion Jared made was to find trigger words during usability testing. You can identify them by asking target users to describe their needs and goals before they have seen the website. You can then compare the words they use to the equivalents used on the website.

You can also use your search logs to find trigger words. Spool found that in tests, people were more likely to use site search when the website did not use the trigger words. When they used site search they typed the same trigger words they had mentioned before they had seen the site.

Customer Carewords

Gerry McGovern discusses Customer Carewords in his book Killer Web Content. (It’s a good book but the formatting of the text makes it difficult to read in places.) Customer Carewords is Gerry McGovern’s methodology for finding two things:

• The things that are most important to a website’s users.
• The words they use to describe those things.

The methodology for doing this is fairly simple. Create a long list of potential carewords and ask lots of your target users to choose the ten things that are most important to them. OK it’s slightly more involved than this. But I need to condense an entire chapter into one sentence. The list you provide them with contains lots of alternative terms for the same things. So you could have a hundred or so items in total.

In your results you find that a small number of potential carewords are chosen far more frequently than the other words. McGovern argues that 5% of your website delivers 25% of it’s value. This 5% surfaces in the Customer Carewords methodology and he calls it the ‘Long Neck’.

So what’s the difference?

The first difference between the two concepts is that trigger words do not help you prioritise, they just give you the correct words to use. However this isn’t what I’m trying to compare. I’m sure Jared Spool understands task priorities and uses other techniques to find them. I want to compare carewords to the trigger words.

User-generated versus user-selected

For me the trigger words are slightly stronger than the carewords. This is because they are generated by the user. They are found by inspecting search logs or through open discussion during usability tests. The words are a by-product of a conversation or a site search. No suggestions are made and the user is unaffected by the fact that you are noting the words they use. They don’t know it’s happening.

Customer Carewords however are selected from a list of pre-defined terms. I think that this can have an impact on the words chosen. McGovern himself admits as much in his book. In one study he carried out on a travel site, ‘special offers’ received twice as high a score as ‘deals’. So by his methodology ‘special offers’ was the strongest careword. However he found that there were 76,238 internet searches made monthly in the U.S. for ‘vacation deals’ or ‘travel deals’. In the same period there were just 46 searches for ‘vacation special offers’ or ‘travel special offers’.

It seems to me that if you place importance on the words by specifically asking for them, you influence the results. In a discussion, the respondents from McGovern’s study may have innocently said ‘deals’ numerous times. But when asked to choose a word, they chose ‘special offers’. So ‘deals’ is the trigger word and ‘special offers’ are the carewords.

So why did this happen? McGovern’s response is “the words people search with may not always be those they like to see when they visit a website“. This is based on the actual respondents’ justifications for their actions. My opinion is that their own justification can be biased by ego.

Interestingly McGovern leaves this question unanswered. He doesn’t say which option was the one he took. Perhaps he chose the trigger word?

Customer Care Trigger Words

I think you can merge both exercises and just prioritise the words that users provide spontaneously. So you override carewords that are contradicted by trigger words.

Carrying out Gerry McGovern’s Customer Carewords methodology will help you find out what’s important on your website. You can then cross-check your customer carewords against their trigger word equivelants. Check your search logs and note the words that usability testing participants use by interviewing them before they see the website. If the trigger words don’t match the carewords then use the trigger words.

Doing so will let you know what information your users prioritise. You’ll also be able to use their vocabulary when providing it.

Sub-headers help users decide whether to stay

Your web pages will not be read word for word. In many cases your user is looking for a single piece of information. He’s actually still navigating. If he sees a page of text without sub-headers he may do one of three things:

• If he’s on the right page he might:
  • spend longer than necessary trying to find the information he needs
  • lose the scent, decide he’s on the wrong page and leave.
• If he’s on the wrong page he might take a long time working this out.

Sub-headers will help him make quick decisions in all three of these cases.

A good sub-header describes the text below it

A page with well-named sub-headers will help users find the paragraph they need. This is because they summarise the text below them. So a user scanning the page will quickly read the sub-headers and stop at the one they need. Either this or they quickly realise the page does not have what they need.

Sub-headers help screen readers

Screen readers like JAWS allow their user the ability to navigate through a page via the identified headers in the HTML. In these instances your sub-headers literally are navigation. People using such software will have a better experience if you spend some time thinking about your sub-headers.

It’s also a good reason for using the proper HTML code for your headers.

Try writing your sub-headers first

A good way to focus your writing is to jot down the key questions your user has when reading the page. You can then use these questions as sub-headers and then write your copy underneath each. If you begin to stray off the topic of the sub-header then it might be unnecessary text. Consider removing it or writing another sub-heading.

Improve further with bold text

You can make your paragraph even easier to understand by using bold text on the important words within the paragraph. This way your user can find the answer to their question even more easily.

Introducing trigger words

I’ve used the term ‘trigger images’ because they work in a very similar way to Jared Spool’s trigger words. He suggests using the exact words your users are thinking about so that they pull a trigger in users’ heads.

Trigger images

TV catch-up sites like BBC iPlayer and ITV Catch-up (a much better name than iPlayer by the way) can often have many programmes listed on any one page. Most people scan through the page looking for something they want to watch. They will not read every programme title. So the images help them quickly find something.

When done well, the images pull a trigger of recognition in the users mind. This can be recognition of someone or something they like or it could help them when looking for a specific programme. It only really works when the images mean something to the user instantly.

BBC iPlayer

Catch-up websites often get this wrong. I know that creating these images is quite an overhead but a little extra thought could improve usability. Here is a example from BBC iPlayer that shows both good and bad practice.

The image for Heroes is obvious but Silent Witness is not.

The central characters from ‘Heroes’ make it easy to find for those who watch it. However the ‘Silent Witness’ image is less obvious. One of the central characters is featured but she is turning away from the camera and both the characters heads are small.

People who want to watch ‘Silent Witness’ are still going to be able to find it. But they will be able to do so easier if a better image is used. People who are just browsing may overlook ‘Silent Witness’.

ITV Catch-up

ITV Catch-up has both good and bad examples as well

The example above shows that ITV are guilty of the same thing. Let’s take the X-Factor image for instance. They’ve used the central characters, the judges, but they are difficult to recognise. Their heads are very small and the image is quite heavily compressed, so it’s pixelated. Corrie and Emmerdale are a bit better though.

Guidelines

A simple set of guidelines could help the issue:

• If the images are pixelated, then reduce the compression so that they aren’t.
• Use something recognisable like a main character or celebrity guest. It isn’t important for the user to understand the scene, just the subject or characters.
• Make the face or object clear by cropping the image before shrinking it. The important bit will then be large enough to recognise.

The subject of the image should then be easily recognisable. If it still isn’t, then consider using a different image. I’ve had a go at the X Factor image as an example. Much better isn’t it?

Some cropping improves the image

If you don’t watch ‘The X Factor’ then this image might mean nothing to you. But those who do, will find this image easier to recognise than 4 tiny heads.