Mark writes...
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.
