Top 10 Ways to Turn Hyperlinks into Hyper-Clicks by Mark
June 03, 2008 in Interaction Design, Implementation with 15 Comments
Hyperlinks are the most important part of the Web, hands down. They are addresses, destinations to every corner of the Web, and let's face it: people love to travel. Links are the easiest and most understood technology ever to grace the Internet. People understand links—clicking them, typing them, and sharing them.
Still, with all that experience, many designers and developers struggle with creating great, functional links. Improving your hyperlinks is a quick and easy way to help boost your site's usability, ensuring that visitors can navigate it quickly and accurately. 37Signals even wrote a blog post on larger links and how they naturally perform better than smaller ones. While that seems obvious, many people don't take into account what that really means for their links.
So, we've put together our top 10 ways to turn your website's hyperlinks into hyper-clicks, most referenced from recognized leaders like Jakob Neilsen and others through studies and observations.
1. Increase the "hit area" on your links, especially in your navigation.
By adding some padding to the links, you can increase their usability by enlarging the clickable areas to include near-miss clicks. In navigation (like the image above), picking up those nearby clicks that may have missed the hit area saves readers time and fends off frustration. Having links that are easy to use—easy to click—is just downright intuitive.
2. Underline links, but nothing else.
By default, every browser displays links with underlines. People are accustomed to seeing links with underlines and associate an underline with a link. Add underlines to your links, but don't underline anything else to avoid confusion.
3. Use hover and visited link states.
While underlines signal a link for visitors, a change in color or the underline on mouseover confirms that they can click on the link. A visited state on your links should show visitors where they have gone already, saving them time and clicks. This also allows them to focus their attention and worthwhile clicks on links they haven't yet visited.
4. Use the title attribute.
Ever moused over a link and see that little popup that tells you a little more about the link? That's controlled by applying the title attribute to links. Simply put, it adds SEO benefit to your links and can provide additional context to visitors who like to know about links.
5. Use one color, and try to make it blue.
Once again, all browsers (IE6, IE7, Firefox, Safari, Opera, etc) render links blue and underlined by default. The precedent was set years ago by our browsers and still holds true today: blue text within a body of black text signals a link. Links need to stand out because visitors don't read everything.
People want to find your links, so help them out. Andy Rutledge also offers up some advice on choosing a color other than blue for hyperlinks, how different text decoration (underline, background, etc) affects links, and how color blindness plays into your decisions.
6. Add visual cues to grab attention.
A simple link that says "Download PDF" is not as powerful as having that same link with a PDF icon on it's left. It's attention-getting and lets visitors know without actually reading that the link will lead to a PDF.
To get started, Poolie Studios has a great collection of free Web icons for you to pump up those links.
7. Tell visitors where they are in your navigation.
Along the same lines as hover and visited link states, add an active state to the current page in your navigation. This shows visitors where they are within your site and provides context for the content that follows on the page.
8. Links, inside and out.
Links to other pages on your website and to external websites are very beneficial to your SEO and help guide traffic to your site. More importantly, they will help to create inbound links from those you link to. Things like trackbacks and pingbacks help to show activity across the Web on people's websites, typically blogs. Search engines in turn see those connections and may in turn boost your page rank.
9. Use human-friendly URLs.
If it's good for people, it's good for Google. Using a URL structure that is easy to remember and speak aloud is a great way to ensure visitors use your links outside the Web. Flickr has one of the best examples of a great URL scheme: www.flickr.com/photos/markdotto/ is easy to type, read, and share with others.
As people learn your URL scheme based on the links they've clicked, they will be able to easily pass along URLS, making them all the more powerful.
10. Use better content within your links.
Encourage visitors to click on your links by using linked text that just begs to be clicked. "People associate branding with a logo" is a much better link than just "branding" because it adds more controversy, increases the size of the link, and makes a statement.
Hyperlinks are great, but to really make them stand out and perform well, they need some attention and consideration. People want to browse your site, but if you make that difficult for them, chances are your traffic will go down. Simple tools like hyperlinks are low-hanging fruit that help you grow easier and really put a successful website over the top.
So turn your hyperlinks into hyper-clicks by giving them a little extra love. Take that extra step and put a title attribute on, entice visitors with a juicy piece of linked text, or add some extra padding to your links.
15 Comments
Bryan says:
Excellent post Mark. Your attention to small details like hyperlinks will make a huge difference in the website performance for businesses. Keep on preaching.
Jessica says:
I'll have to apply these to my site, though I think I got a few of them down already. :)
Mark says:
Sounds great, Jessica! Things like hyperlinks are an easy way to help iterate through a design. Constantly improving your site has benefits for you and your visitors and gives you a unique opportunity to do a lot of good for everyone involved.
Jessica says:
Yeah, I still haven't added META tags to the site which is a horrid thing to ignore since I'm probably losing out on a lot of search traffic because of it. But alas, I have to have a real job to pay the bills still. ;)
Mark says:
Hah, well there's no time like the present. Little fixes like this are quick wins that take ~5 minutes to do. Your homepage is a great example for Societe: make the entire image clickable for the Amber Sulligan interview rather than the upper right corner. GIGANTIC click area, and people like clicking images :).
Jessica says:
YES! I can just expand the div over it. I've been thinking of adding a twitter too on the about page and a blog somewhere. Or maybe just a blog. Either way I'm sure they'll both be in the next release of the mag (7/1). Thanks for the tips. :)
john says:
I think it's pretty funny that you state links should stand out from text, but on my monitor, the only thing that tells me there are links on your page are the underlines (and their not blue) ;)
Alex Lover says:
Hi, thanks for this useful SEO tips :)
Mark says:
John: You're spot on about that one. We're addressing this is our redesign right now. Trust me when I say this: blue text links are here to stay.
Smukkekim says:
|People are accustomed to seeing links with underlines and associate an underline with a link.| This assumption/assertion seems to be part of EVERY single article about links... I think it's nonsense... the text-decoration:none-css-"trick" has been around for so long - AND used for so long, that most people are NOT used to hyperlinks being underlined anymore - they are used to hyperlinks being bold/different color/different size/different font/different... etc... In other words - there is no longer any particular link-style that people are "used to"... Or... So I think...
sunny beach says:
A handy guide with some worthwhile tips. The iconize thing is very useful.
However, I disagree on the comment about making links blue in all cases. As long as the link is a different colour to the standard text it will be fine, as sometimes, blue just really doesn't fit with a website scheme, even if it is "traditional"
keith says:
Great article. I struggle to keep links blue and underlined because it doesn't seem to jive with so many designs. I think so long as the links are underlined and a uniform color throughout the site it will be clear to the user what they need to click on. I disagree with Smukkekim, what I'm "used to" is still something underlined to delineate a link.
Bryan says:
sunny beach and keith- I agree that blue is not necessary, the underline is more important. I think Jacob captures quite well in his article: http://www.useit.com/alertbox/20040510.html
Ryan says:
Smukkekim: It depends on what type of links you're referring to. For instance, links used in the header / navigation are often not underlined and the vast majority of users have become used to that, but links that are intermixed in your copy or other dense areas of information actually perform better when they're underlined.
A very simple way to test that out is by running a couple tests in Crazyegg. Over time, you will notice that any of the links that have been underlined will statistically perform better than if they were not underlined.
Jeremy says:
Ryan's right: Use what's familiar to people across most of the web and you'll be OK. Links in navigation such as headers and vertical lists read as links even when they aren't underlined. (In fact, removing the underlines in those cases may improve readability by removing clutter in a link-dense area.) But large content blocks are where you always want to underline those links.
Add your comment...