Pre-training for Ad-hoc Retrieval: Hyperlink is Also You Need
So you think you everything about the simple hyperlink?
-
Upload
john-macpherson -
Category
Design
-
view
116 -
download
0
description
Transcript of So you think you everything about the simple hyperlink?
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.
2
Episode 27: So you think you know everything about the simple hyperlink?
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 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.
5
Make links look clickable
✓ A good to to see if your links are clickable is to take the colour out and blur the 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 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.
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.
9
Be consistent
✓ Don’t use different words and phrases for the same links.
View Full video at www.webpayload.com
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.
✓ 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.
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 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
http://sixrevisions.com/usability/hyperlink-design/
View Full video at www.webpayload.com