The video transcription is below. You can get the best practices and gist of the learning even without the images in the video…

So here I have the American Red Cross website, and I'm looking at a page about the blood donation process. Let's look at the links on this page. So here we have one that jumps out to me right away "basic eligibility." I love how when I hover over it, there is an underline.

Longer Links May Have Better Information Scent

One thing that's interesting, though, is "basic eligibility" doesn't have a lot of meaning for me. If I click in here, it says, OK, so we're talking about "requirements by donation type." So I'm talking about basic eligibility requirements. I think even...Oops, there's a pop-up, sometimes that's great. Sometimes not so great, right?

Sometimes even just saying "basic eligibility requirements" would have better information scent than saying "basic eligibility."

A lot of the other links on this page work pretty well. Here's one on the blood donor app. I would actually even include "download the" in the link itself. I think that whole thing would then pop out, and I think that would be really great.

Don't Make the Links Too Long

Here is the Surfrider Foundation. They do really interesting work. This is another non-profit organization. And you can see their links do a really nice job of popping out. I think they're dark enough to be accessible. You always have to double-check that in some kind of color contrast checker. This is a free website color checker I use.

You can see, though, that this link is really long. It starts to lose its effectiveness when most of the sentence is the link. This is a great length link here in the middle.

Avoid Saying "Here"— Bad Information Scent

Here's a link that just says "here." Instead of saying "More on specific goals" and just highlighting "here," I would actually make the entire item a link.

Don't Forget Accessibility

I also really wish when I hovered that something happened here to show that these are links. Otherwise, if it's color alone, it's typically not accessible.

I like this link here, it says "actively encouraging new members." It looks like there must be some new members of this California by the Biodiversity Network, and I could learn more about it. Surfrider has some things they could change about their links to make them even better.

Make Sure Links Stand Out

Our last example is from the Shed Aquarium. I believe it is located in Chicago and wow, it clearly has some very cute animals like this otter. And you can see their links here.

They have an underline which I think is really important because they're going with a navy color for their links. They could definitely be a little bit missed with the black regular text. So I like how they have this underlined, and I also would love it if the color would change when I was over it. But I have to say at least the underline really makes it clear what is a link.

They also seem to be doing a pretty good job of making sure it's not just like one word. These seem to be meaningful information-rich links and that we know will help your users.

Better Information Scent Leads to More Clicks

So just keep in mind that you want to have information-rich links. You want them to be very clear so that the user can make a good decision about whether that is a good link for them to click on or not. We don't want them to be guessing. We know that uncertainty tends to lead people not to click on things. So we want to be very clear on what you will get should you click on this link.

Keep Learning!

Want to learn more UX best practices? Here are 3 free UX lessons you can watch immediately after signing up. These classes are created for busy, non-tech people who need to make better apps and websites.

Prefer to read? Here’s the video transcript about links on websites:

Here are some things I want you to keep in mind.

First off, links need to have really good information scent. You might be wondering, "What the heck is that?"

Information scent refers to the visual and textual clues that suggest what information the link may lead to.

That's why things like "Click Here" aren't great because they don't provide good information scent. (Plus that's not helpful to anyone using a screenreader either.) Somebody needs to have a sense of what they're going to get if they click on a link.

Help USERS Make INFORMED DECISIONS

Here are some examples of information-rich links using descriptive text. This language is pretty clear about what you're going to get if you click on it.

"Meet our interim program director," is probably going to be either some kind of video or some kind of article about this new person.
"Newest animal babies" - that totally makes me want to click on it, I don't know about you.
Here it's very clearly an article about "4 signs of alcohol abuse."

These are the types of links that we want. These descriptive links will have a lot of meaning for people. This will help them make an informed decision about whether they want to click.

Words to Avoid

Here are the words you want to be careful with:

“Click here”
“Read more”
“Learn more”
“More”

These words are really vague. If I come across those on a website, and links like this will catch my eye, I still don't know what exactly I'm going to be getting into.

Should I click on these links? As much as possible, avoid using these vague words without context. If I have to use them, they need to be very closely related visually to whatever the item is.

For example, it's some beginning of the article and you get to continue the article, you can read more. So at least I know, OK, I'm continuing with this same article, that sort of thing. Otherwise what happens is these words pop out to me on a page as links, but then I have to kind of sit around and wonder what they're connected to.

Be aware that it's always better to have good information scent. It's better to be more clear about what somebody is going to get when they click on the link.

Link Length

The best practice I've seen based on research would be having a length of three to seven words. When it gets beyond seven words, it feels too long, but sometimes one word isn't enough. So here is the best practice to aim for on your links.

Here are some information-rich links that are better and longer than if I just wrote, "Learn more."

“Learn more tips to stay healthy”
“Read about our newest program”
“Top tips for better eating here”

These will help the user make good choices about whether this link is worth clicking on it from their perspective. Great UX helps people make informed choices.

Color

Let's talk about color now. Color is fun to talk about and you can definitely have variety with your colors before your links. They definitely need to be accessible. So that means there needs to be a good color contrast between the color and the background.

So, for example, I've seen websites that have chosen orange as a color for links. That is not accessible on a white background. So you want to be sure to check color contrast.

I use a color checker called the Web AIM color checker. There are other ones you can find online. Use whichever one because you definitely want your links to be accessible.

Underlined Links

There's a good argument that links probably should be underlined, right, because not everybody sees colors in the same way. And if a link is underlined, it's very clear that this is a link.

If you don't want to underline from the get go, you would want to change that on. But, you could change the color as well as add an underline.

Visited Links

You may use another color to show visited links. Then it's very clear that, hey, this is a link after somebody has visited a page on your website. This is especially important if it's a larger site with a lot of content. Visited links may be in purple or whatever other color might be helpful. This is for the user to know, "Oh, I've already explored that area of the website in those pages."

So you can have fun with links, but just be sure they are accessible. We want to make sure we have great links that are information-rich that people want to click on.

Want to learn more about UX, check out Birdcall courses for nonprofit and small business websites.