Writing for UX Click Here?

First blogged by Pat Godfrey: April 2016

Writing "Click Here" as your link text copy creates one of the worst user experiences for many of our digital content consumers. Let me explain and maybe convert you from  an average link writer into a global superstar link-writing revolutionary!

Is click the right term?

Yes. We "click" on links: all of us; whether tapping, gesturing, pressing keyboard buttons, or blinking.

So why shouldn't we use, "Click here" in our links? Well, "Click here to do something..." is not really the problem. "Click here" is. Then again, "Click here..." is far from optimal link writing.

The common misunderstanding about clicking mouse buttons

Some writers will tell you that, "Click Here" is bad because it is not an inclusive description of the human computer interaction (HCI) it describes. "It is not accessible", they say, which proves to me that they don't know what, or more accurately where the "Click" occurs between our user and our interface.

The prevailing myth is that "Click" refers to the noise and hepatic feedback felt from pressing and releasing a mouse button. Crazy, I know! Of course, not everyone's HCI is via a mouse. "Click" therefore, cannot be inclusive to all of our users?

What?! Isn't it obvious that the "Click" refers to the UI button: the sound and feel of pressing on the real world buttons that gave their affordance to user interface interactions (buttons on the screen)? (Look up affordance with Wikipedia).

Image sourced from: TEM Electric Components

If you are unsure of this concept, then you really ought to read my article, "Click or Tap? Misunderstanding of Affordance". I hope to convince you there.

Everyone is wrong and Pat's right. Really?

So, we can write, "Click here..." because everyone can click? Hold your horses there partner.

Everyone who is anyone in the writing world seems to subscribe to the mouse button clicking myth. Even "W3C Quality Tips for Web-masters" got the "click" affordance wrong (now closed, by the by, but available for poor influence). By example of an accomplished and published writer on the subject, Stephanie Leary writes,Why “click here” is a terrible link, and what to write instead. Each share our aim of writing links inclusively, but each subscribe to the "mouse click" myth. It's sad, really because they give less than optimal link writing examples, too.

So, I'm taking on much of the digital writing world here then? Yup. Why not? Just because everyone else is doing something doesn't mean that it's right. Right?

Why not "Click Here?"

Let's be careful here. "Click here to do something useful" isn't necessarily bad. It's really not. It is not optimal though. To understand this, we must put ourselves in the place of our users.

Some of our users will scan through our links and hear or read only, "Click here to...", and "Click here to something else..". The problem is that this places an additional cognitive load on our user. Our user needs to work to discern between the invitation to "click" and separate this from the description of what will happen when they do click: the link transaction. It's not efficient. That's all. They know to click on a link already. The "Click here..." is additional, unnecessary, repeating noise.

So, we can write, "Click here to do something"? Yes. But it's not as useable or useful as describing only the link transaction: what happens after we click on the link. More importantly, we are not necessarily promoting a reason to click on the link at all, especially if all that repetition has turned them off further up the page. We need our links to work for us, so we need them to work for our users.

Here is an example. Our user is visually or audibly scanning our link texts:

Verdict

So, (Example 2) "Click here to..." has some merit among these examples. (Example 1) "Click here" has none.

What of Stephanie's and W3C's (Example 3) suggestion? Well, the link's context is as a UI button - a link - so we are likely navigating somewhere. And we know the topic title. But what isn't communicated is that we are going to my own content. I think that is semantically and semiotically important enough to place within the link copy? I don't want anyone to miss it, after all!

Let's look at a final example (Example 4), which is my own preference.

Links to files

Links to document files may be distrusted by some of our users; tales of hacking and viruses building a high index of suspicion. Additionally, and especially when considering metered broadband connections, our user may not want to download a 300 MB file!

Recall that our users may navigate your page by the links alone. Make them work for our users, which in turn will work for you.

Links to files

Our user needs to know three things about the file you want them to link to or to download:

1. The type of file
2. The size of the file
3. The contents of the file - the, "what's in it for me?"

For example, you can download the Streams of Bunclody Festival Flyer (PDF 6 MB) to see an example of my print and branding work.

Page links

HTML files (Web pages) are difficult to quantify meaningfully with a file size. It may be approriate to add an estimated reading time to offer an idea of their scale. For example, you can read about my preferred UX design workflow (20 min).

Indicating links to new windows or tabs

Our user will find it useful if you indicate which links will open in a new browser window or tab. AT users are informed automatically if a target="_blank" attribute is present. For other users, we can use our title attribute and add a visual indicator image unobtrusively using CSS. For example, you can read about my preferred UX design workflow (20 min) in a new window.

The "new window" image is called by the CSS automatically in links that contain the target="_blank" attribute.

a[target="_blank"]:before {
display:inline-block;
content:" ";
background:transparent url('../resources/img/icons/icon-link.png') no-repeat 0 0;
width:16px;
height:16px;
margin-left:4px;
}

Instructions in forms

Although not often written as a link, it is worth adding a note that form instructions should perhaps avoid "Click" altogether. (There's the connection.) If we must direct our user to update a form element, then we can use more meaningful language. Examples you may consider:

• Select a country.
• Place a check in the box.
• Type your name.
• Choose an option.
• Pick a date.
• Click on the tab.

Microsoft clicks too

Microsoft's Manual of Style (MMoS) is a popular reference for Writers writing interaction instructions. It's worth noting (on Page 59 of Edition 4) that they advocate the following:

Click: Use for command buttons, option buttons, and options in a list, gallery, or palette.

Microsoft clicks "command buttons". That'll include links then! - Writers Against Click, take note. You are wrong. 'Just saying. And if you are still a doubter, turn to P.60.

MMoS Kindle Edition (Sample)

Here's a sample of the MMoS with courtesy of Amazon Kindle.

Summary

Adding semantic information into the link copy enables link-scanning AT users to fully receive the link transaction as well as its context, avoid the repetition and cognitive load of, "Click here to...", and helps us to promote the destination in a more engaging, normal, and conversational way.

Using only, "Click Here" as your link copy is completely bonkers and is not conclusive to inclusive design. Bless the lazy and unknowing, eh?

Of course, our sighted users' experience depends on our user recognising where our links are...how they are styled and there's more to accessible link creation than only the link copy...and that's another story entirely. In the meantime, go revolutionise your link copy writing!

Reference this article

Godfrey, P. (Year, Month Day). Article Heading Retrieved Month Day, Year, from URL

❮ More Articles My Profile ❯