An article on the importance of making hyperlinks stand out might seem like an exercise in stating the obvious. I would have thought so too, until I came across the portfolio site of a reputable web design firm last week and found myself playing a game of link hide-and-seek. On the site in question, headings, links, and emphasized text are all set in identical font face, size, weight, and color, making them indistinguishable. The only way for me to recognize a hyperlink was to roll my mouse over it, causing an underline to be applied to the text. If a snazzy firm of self professed web design “experts” (who I won’t name and shame) can make such an obvious user interface blunder, then perhaps it’s a topic still worthy of our attention.
Here is a recreation of the original design – I have changed the text copy and the colors for the purpose of this article, but kept the intent of the content the same:
See if you can guess which bits of text are the links. My original assumption was that everything blue is a link. After waving my mouse around like a hyperactive monkey I discovered my assumption to be wrong. In fact these are the links:
Dang, why didn’t I guess that to begin with…!
I’m not opposed to the idea of headings and links sharing the same color – it can help to create unity between the various design elements on the page – however it’s clear that some sort of visual differentiation needs to be made between links, headings, and other text on the page. A quick rethink of the text styling might result in something like this:
Headings now assume more prominence, links are easily distinguishable from other text on the page, and the words that require added emphasis bear no resemblance to links. For the average user, text styled in this manner ought to be easy to navigate and absorb.
So next time you’re styling a page, take a moment to consider your user, and make the links look like links!Tweet