Michael Gaigg: Über UI/UX Design

Design Guidelines: Links

Posted by Michael Gaigg

"If links were married they'd get divorced all the time! That's because they can't keep their promise." (Gerry McGovern)

What Gerry means is that what links say they will do and what they actually do are total opposites. How many times have I believed, clicked and followed a link that promised me to 'Download this or that' just to find another page describing this piece of software. There I had to muddle through even more links just to find another 'Download version' link that yet again takes me to another page acknowledging the terms and conditions. The story could go on and on.

Remember: Good links are like magnets - they drive users to them.

With that in mind, here are the

Design Guidelines for Links

1. Color and underline link text (exceptions include lists of links like a navigation menu)
2. Reserve underlining for links (do not underline text that is not a link)
3. Use different colors for visited and unvisited links (e.g. shades of blue)
4. Avoid using color for text unless it is a link and never use blue for non-text links (even if your links are not blue)
5. Avoid changing the font style on mouse over
6. Avoid tiny text for links
7. Use appropriate spacing between links or use a clear separator
8. Use links primarily for navigation between pages
9. Link text must be describe the target as short and precise (clear call to action) as possible AND hold this promise!

Best Practices

See my blog entry for Best Practices for accessible Content

References:

• Nielsen, J. (2007, 05 14). Command Links. Alertbox: http://www.useit.com/alertbox/command-links.html
• Nielsen, J. (2004, 05 10). Guidelines for Visualizing Links. http://www.useit.com/alertbox/20040510.html