Consistency, underlines and much more

1. On the face of it, the link, that very straight forward
<a href=”domain.com”>Link</a>
Looks incredible simple to get right but there are
some experienced web teams that make very basic
mistakes.
1

2. Episode 27: So you think you know everything about
the simple hyperlink?
2

3. Overview
✓ The link is what glues the web together.
✓ Imagine a web without links for a second - not a pleasant place.
✓ Without links the web would be a very different world.
✓ Links are so easy to implement that they are often overlooked by designers and site
3
owners.
✓ Anyone, even without web experience can use the hyperlink with under 15 minutes
of training. However it’s not as easy as it looks!
View Full video at www.webpayload.com

4. Make links look clickable
✓ Links need to stand out and say “Hey I’m a link click me”
✓ This is a big issue with accessibility as we will see.
4

5. Make links look clickable
✓ A good to to see if your links are clickable is to take the colour out and blur the
5
design and see if they then stand out.

6. So... Underline links within content
✓ And never underline content that is not a link
✓ It will look clickable, although isn’t and will disrupt the confidence of the site with
6
your users.
View Full video at www.webpayload.com

7. Use border-bottom instead of text-decoration
✓ Extra tip if you leave out the colour of the border then it will inherit from the colour
of the text - making updating easier
✓ So: a{ color:#f00; border-bottom:1px solid}
✓ Sometimes i like to make the colour different, lighter grey.
✓ The main thing is though that an underline is there.
7

8. Increase the length of links
✓ Good description what they are clicking on - better for SEO
✓ Easier to click. Imagine tapping the top “here” on a mobile device.
✓ 7-12 words are optimal.
8

9. Be consistent
✓ Don’t use different words and phrases for the same links.
View Full video at www.webpayload.com
9

10. Be consistent
✓ Think carefully about your links
✓ If a visitor clicks on a link titled Dogs Grooming they are very likely to click the
back button of they come across a page that doesn’t talk about dog grooming or
similar content.
✓ Your links and page titles should be identical or match very closely.
✓ The first thing a visitor looks for will be the page title - to confirm they are at the
right destination. If not they are out of there and will hit the back button.
✓ Too many experiences like this on your site and they will be off. Even 1 mistake
like this by you can cause a higher bounce exit for that page.
10
✓ Be consistent.

11. Don’t put links beside each other
✓ Hard to tell that they are different links. Harder on mobile. (Click areas)
✓ Solution - to list in bullet points or put more standard text around each link.
11

12. So navigation links need to be underlined too?
✓ No they don’t as it looks like navigation with the healthy amount of spacing around
12
the navigation areas.
✓ It looks like navigation, they look like links - very different from embedded links
within content.

13. Resources
http://www.uis.edu/webservices/wp-content/uploads/sites/8/2013/02/Designing_for_Scent.pdf
13
http://sixrevisions.com/usability/hyperlink-design/
View Full video at www.webpayload.com