A slightly disturbing new trend seems to be happening in the world of interface design, requiring people to move their mouse around to tell what is a link and what is not.
When you start messing around with the basic building block of the web – the hyperlink – trouble is sure to follow.
Two recently redesigned websites – the LA Times and National Public Radio (NPR) - are featuring a new clean style on their pages that seems to be emulating the visual style of an actual newspaper. All the text in black and white, with no underlining or different colour text for hyperlinks.
At first this may seem like a good idea. After all they are emulating the offline metaphor of a newspaper page in its truest sense, which usually leads to the desired effect of users recognising and relating to what they see (tabs being the most obvious example of that).
However in doing so they have undermined the key visual anchor of the hyperlink. As these images show there is no distinction between the presentation of normal text and hyperlinks.
At least the NPR seems to try to indicate the hyperlinks through a different font…
See also the screencast to see it in action.
This issue has been getting a degree of attention in the usability / HCI community since it challenges some long held practices in interface design.
One of the key concepts of human computer interaction is that of affordance, basically whatever you are interacting with should give a clue as to how you interact with it. This concept was a key basis for Don Norman’s popular book The Psychology of Everyday Things. A button on a website looks like you push it because it has a 3D drop shadow. A pull handle on a door somehow says “pull” even without a little sign on it.
A hyperlink should be the same. It needs to say “click me”, and without using the words ‘click here’, for various SEO and accessibility reasons. It should also give a strong indication of what you will get on the destination page.
A short history of the hyperlink is perhaps needed. In the earliest days of the web, we will all recall the blue underlined hyperlink, and the advice back then was to make your link blue and underlined. Like Yahoo! in fact:
Then people realised that for necessarily link-heavy pages like news landing pages, having everything underlined and blue was more of a hindrance than a help. And after all there are more colours in the crayon box, some of which match up with the corporate style, so why not use those?
Accepted wisdom was to just make the hyperlinks recognisable, even if they were different colours than the text or gave feedback on hover through underlining or a different colour again. For example back in 2002 the BBC among others used a subtle difference in their headlines and hyperlinks.
The new design of having the hyperlinks look exactly the same as the non link text (until mouseover when a line appears) requires the user to guess what is a link and what is not, and then validate their suspicion by mousing over the page to discover the actual links.
This type of guessing game is not what users like, and I have seen in countless usability tests users failing to perform tasks correctly through failing to recognise the clickable elements of the page they are looking at, whether it is too-subtle hyperlinks or clickable images graphically camouflaged among other images and therefore overlooked.
As we boldly march into the more abstract aspects of interacting with websites (consider rich internet applications and social media), it is important that we don’t forget about some of the basic aspects of interface design to make the things we click look clickable. It also will support accessibility – just consider those that have limited mobility. We often test with people using specially adapted controls such as joysticks and switches, for whom precise control of the mouse movement is very awkward. Those with visual impairment may benefit if they apply different CSS styles to the browser, but this is not widely applied even among such users.
Perhaps this is only a trend that is taking hold among media companies, but I certainly will be looking out for it on other sites.
What do you think? Are non-underlined links that are the same colour as other non-link text the latest example of ‘clean’ interface design, or should links be kept distinct? If you have seen other examples of clear or unclear link design, please provide those.