Or, The strange case of the chocolate milk that wasn't
Audience: Web designers, marketers
Take a quick look below. What do you see?
Two half-gallon containers of chocolate milk, right? So what?
Except one of them is NOT chocolate milk.
The one on the left is actually vanilla almond milk, but you could hardly be blamed for thinking otherwise. For good reason, brown has long been associated with chocolate milk packaging. In our relatively short experience with buying almond milk, the bottles or cartons have always been white or cream colored. Then along came this one.
Imagine your frustration had you accidentally grabbed a carton of this particular vanilla almond milk thinking it was chocolate milk (almond or otherwise). With luck, you’d notice your mistake right away, put it back, then go about trying to find what you had intended to grab in the first place, mildly perturbed that the packaging wasn’t clearer.
If you manage a website, you have many opportunities to reduce confusion for your users. In a way, the links on your site are little packages beckoning your users to pluck them from the digital shelf, so to speak. But are your links clear? Do they look like links? Do their labels make it clear what you’re getting by clicking them? Or are they like the carton of almond milk masquerading as chocolate milk?
Make your links look like links and your text look like text
You’d think this should be simple, but apparently not. Way back when, unvisited links were blue and underlined. Then they gave us the means to change link styling. Unfortunately, people took advantage of it to the detriment of millions of users.
I still see too many cases of links that are impossible to distinguish from surrounding text, leaving me to guess what’s a link and what’s not. More rarely you’ll see non-linked text that looks like a link, either because it’s colored or underlined, or both. I’m not sure which of these cases is the bigger no-no, but I am sure they should be avoided.
Maybe I’m old school. And to be sure, many of today’s users probably never knew a web where all we had was blue, underlined links. But you’ll see on shallwedigital.com that I chose blue and underlined for my standard link styling. The blue I chose is a specific blue that is part of my brand’s color palette, and I think it works well despite not being true blue (#0000ff). And while I’m not arguing that you should make YOUR links blue and underlined, I’m not arguing against it, either.
At a minimum, links should be colored and underlined. It’s common nowadays to see links that are colored only, but that may not work for the millions of people with some form of color blindness. Only by using multiple signifiers can we be confident users will recognize what’s a link and what’s not.
Note that my recommendations for link styling are primarily for body copy. In headers (including main menu), footers, and left nav, users should be accustomed to the elements being links. That said, take care if you have non-linked text in these areas and make sure linked and non-linked text are easily distinguished.
Click here to make your link less usable
The absolute worst link label in the history of the web is “click here.” It tells users absolutely nothing. Why should I click on that link? Where will I go if I click on it?
Aside from that, a well-styled link should be self-evident, and a well-labeled link should be enough enticement for users to click it without explicitly saying “Click here.”
Another pitfall of the “click here” labeling is that it is almost always placed in a sentence like so: “Click here to do something cool.” Why not just drop “click here” and have your link label be “Do something cool”? You’ve just dropped three words from the label and reduced the amount of time users must spend in order to figure out what the link does.
“Click here to do something cool”
“Do something cool”
We know users are busy and often scan pages. What if your page were littered with links labeled “Click here”? How easy do you think it would be, while quickly scanning down a page, to find a specific link if every link were labeled “Click here”? Probably as easy as trying to find a carton of chocolate milk when some of the selections look like chocolate milk but are actually vanilla almond milk!
This is especially salient for accessibility purposes. Screen reader users will hear their screen reader announce a succession of “click here” links like so:
“Click here.”
“Click here.”
“Click here”
And so on.
Look below to read the wrap-up
Look below to Read the wrap-up
Read The wrap-up
See what I did there?
The bottom line is, style and label your links clearly. Don’t make users guess where the links are and what they do. Make it simple for your users and they’ll reward you in kind.
In part 2 of this series, I’ll continue my discussion of poor link labels and alternatives you can try in order to make sure your link labels fulfill their promise and don’t disappoint users.