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.
Affordance
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.
The Hyperlink
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 Minesweeper
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.
Chris Rourke is Managing Director of User Vision and a guest blogger at Econsultancy.
Recommended reports
Effective Web Design
The Effective Web Design guide has been created to provide you with a steer on all the key aspects of website design, ranging from conception and design, through to subjects such as usability and search engine optimisation. It is intended as a single point of reference covering best practice approaches for all the topics that anyone involved with website design needs.
Template Files for Web Projects
Need help with web project management but don't know where to start? Econsultancy has created more than 40 individual best-practice template documents as downloadable files that you can customise to suit any web projects you’re working on.
Director at Userfocus Ltd
12:38PM on 21st August 2009
Nice article Chris.
A quick method we've used to test web pages for 'clickability' is to simply print out a screenshot of the page and ask participants to circle the things they think they can click on. This helps us discover if objects or links have the correct affordance.
The LATimes home page would have foxed me on this test as it seems that virtually EVERYTHING is cickable on the page, which I wouldn't have expected.
2:13PM on 21st August 2009
Good article, Chris. A related point: I know we're both Twitter fans, but its rise has been accompanied by an irritating trend towards meaningless link text. I'm guessing it considered and rejected the provision of an insert-link-button in its interface. Consequently we're all slaves to Bit.ly.
Head of SEO at Unique Digital
3:58PM on 21st August 2009
People will revert to what they first learned in navigation. The back button will get used a lot more and bounce will become a bigger issue. No obvious hyperlinks? Bye bye visitor.
12:01AM on 22nd August 2009
Agreed with Julian Grainger that hidden links will turn users away from pages rather than directing them through. No one wants to play a point-and-click game when they're trying to get information quickly. Possibly sidebar links could offer a happy medium?
3:01AM on 22nd August 2009
As a high school English teacher teaching at a top California technology high school, I can tell you that this new trend will NOT be a problem for the younger generations who will only know of the news in an online format. My 15- and 16-year-old students love nothing more than to mouse over a page to see what happens (what changes color? what gets a sudden underline? what is clickable/linkable, what isn't?). It's how they explore and discover, and they find it fun to be surprised. It actually holds their interest rather than causes them to bounce off the site. They don't need underines or blue text to figure out it's a link. As a mid-forty year-old, neither do I.
This clean new look of the L.A. Time's is wonderful on the eye and extremely navigable for any seasoned internet user. After all, every news reader is conditioned to look past the headlines for the story. It's not like people who go to latimes.com are going to think "gee, a one-sentence story... hmm... guess that's all there is). Your concerns are totally over-rated.
3:09AM on 22nd August 2009
I agree with your post. The conept of not highlighting links in anyway is unwise.
Firstly, I would make the assumption that the designers are "hiding" the links in an effort to not distract the reader from the content. (or possibly to get them more engaged in the content)
Minimalist designs work well with print newspapers, but online, links are a part of the content. Well chosen links should enhance the article by providing further information or relevant studies or statistics.
By not highlighting links, you are detracting from your readers experience. As others have mentioned, this is a quick way to lose readers.
Another thing i have noticed on other newspaper websites, is the tendency to cut and paste articles from the print newspaper and not add any links or further information into the article. The web offers much more than print, Journalists should be making the most of the ability to add extra photos, video and comments to their online articles.
9:43AM on 22nd August 2009
I'm with Melissa above. 1--i always found it redundant to see blue face font AND underline. one or the other is what the style books always taught. 2--It's not like it's a hunt and peck game. One's mouse is already hovering over most of the hyperinks (eg, headline) in the very typical drill down user action. The cleaner, the whiter, the better !! IMHO. Just so long as you don't force users on a mega drill down (find the needle in haystack) journey.
9:43AM on 22nd August 2009
I'm with Melissa above. 1--i always found it redundant to see blue face font AND underline. one or the other is what the style books always taught. 2--It's not like it's a hunt and peck game. One's mouse is already hovering over most of the hyperinks (eg, headline) in the very typical drill down user action. The cleaner, the whiter, the better !! IMHO. Just so long as you don't force users on a mega drill down (find the needle in haystack) journey.
9:44AM on 22nd August 2009
I'm with Melissa above. 1--i always found it redundant to see blue face font AND underline. one or the other is what the style books always taught. 2--It's not like it's a hunt and peck game. One's mouse is already hovering over most of the hyperinks (eg, headline) in the very typical drill down user action. The cleaner, the whiter, the better !! IMHO. Just so long as you don't force users on a mega drill down (find the needle in haystack) journey.
9:45AM on 22nd August 2009
I'm with Melissa above. 1--i always found it redundant to see blue face font AND underline. one or the other is what the style books always taught. 2--It's not like it's a hunt and peck game. One's mouse is already hovering over most of the hyperinks (eg, headline) in the very typical drill down user action. The cleaner, the whiter, the better !! IMHO. Just so long as you don't force users on a mega drill down (find the needle in haystack) journey.
1:33PM on 22nd August 2009
nice article! actually, it is not a problem! too many designers around the world still making design and it is their choice not or do to this thing. but in the other way, it is troublesome finding links.
2:32PM on 22nd August 2009
People know that a news portal is about linking to content. They know they have to click on a headline or any teaser element to get to the article.
Why are we indicating hyperlinks, only to let people know where to click. So what if they know already?
I agree that disppointing users is driving them away from your site but as David mentioned already basically everything on LATimes and npr's homepages is clickable so I just don't see the risk to frustrate users.
We shouldn`t forget another very important aspect in creating affordance and this is consistency. It's virtually impossible to mark hyperlinks consistently over an entire news portal without making it look either cluttered or boring.
Talking about consistency, both LATimes and npr use blue hyperlinks on the article pages.
In my experience designing a news portal is not about principles, it's about what works and what not.
Managing Director at User Vision
5:10PM on 22nd August 2009
Thanks for your interest and opinions on this topic everyone.
For able-bodied tech-savvy teenagers at a technology high school, sweeping a mouse around a page is easy and the discovery of links / non links can be fun for them. That is certainly a valid user group and context of use, however there are many others where mystery links become a problem.
For example a person using a latop trackpad mouse on a train bouncing and swerving at 140 MPH or a person with cerebral palsey who awkwardly pushes and pulls at a joystick to move a cursor around a page will find the task of discovering links far less appealing. For them a clear visual cue of the target (the link) is useful to have before starting the mini-task of checking it is a link and then clicking it.
Certainly links need not be underlined or blue (as I mentioned links have evolved) especially if the link is in a clearly recognised navigation area of the page. Here certain conventions help us - most sites have navigation in the left and or top of the page demarked somehow with bordering lines and or shading. These are also in the same place on every page making it clear they are the 'handholds' for the site - the navigation.
The content area of the page is often less clearly defined or consistent, certainly varying between sites and even in different sections of the LA Times itself. As a result some extra work (guessing, thinking & mousing) has to be done by the user to check those things they think are links actually are. It is relatively quick work, perhaps subconscious, but nonetheless it is probably not what the user came there to do.
A publisher like the LA times has enough knowledge in their web team to apply page spacing & layout principles to help achieve a generally good design even with the hidden links. It is a news portal and as Paul alluded there are certain navigating behaviors we have come to expect on these.
However other site designers may not apply it with such skill, and in the goal of achieving a 'clean' page design obscure the links to the point they are not recognised as links.
The biggest danger will be if these are applied to the embedded links so they become indistinguishable from the surrounding page text. This does happen and I know of multinational company sites that do this. The user is seemingly expected to move their mouse over all page text - the minesweeping action.
Good embedded links help users - for example see an article in the NY Times where the distinct embedded links let the user drill down into specific related topics which they can understand from their context in the main article.
Many usability tests have proven that clearly visible links (distinguished by a different colour and / or underlining) helps not only in achieving tasks but in building the user sense of control.
The upside of providing visually identifiable links outweighs the downside of having another colour (not necessarily blue or underlined) on the page.
Finally, now we are looking closely at links, it is worth considering the visited link property that changes the link colour. Especially for links in a list (such as related stories) a change in the link colour once the destinatoin page has been visited can help the user distinguish what they have read and what not. Again the LA Times does not apply that proprty. The BBC and the new York Times sites do (subtle but useful variations in their link colours). Another article perhaps.
10:21AM on 24th August 2009
one last point - last time I checked the newspapers needed more page views not less so hiding the links is only going to lead to a decrease in page views.
End result: I think the LA Times will backtrack once they check their results.
11:06AM on 24th August 2009
I feel quite torn on this subject. On one hand I understand the benefits of making links clear and obvious - the benefit of them changing colour once they've been clicked on can be useful - but only really for certain sites.
However, the internet is evolving and we have a generation who have now never known life without it. They have an extra layer of intuitively when it comes to navigation and surfing, that some of us older people don't have! For sites like the LA Times, because we're so used to reading the news online, it's quite obvious (to me anyway) where the links are likely to be.
I do like the design of the LA Times site, and I think that we'll be seeing more of this type, whether we like it or not. It's just evolution.
11:40AM on 24th August 2009
The talk about mousing over and "discovering" links in a serendipitous fashion - no one has mentioned that some people cannot use the mouse. Perhaps screen reader users will discover the list of links through announcements on the screen reader, but there are also those who use the keyboard exclusively - for various reasons. A quick glance makes it look like there are no links, so they don't tab. Just another perspective...
I am also annoyed by news articles who do NOT include links when they should - for example, URLs to sites they reference in the article. I find them through Google, if motivated enough, but why can't they provide this service. Therefore, if I saw an article with no visible links, I would assume poor service once again. With news articles, I am too busy to try mousing over an article for potential hidden links. I move on.
BTW out of curiosity, I tried to discover whether the Readability tool would turn "invisible" links into visible links. I could not find articles on LA Times or NPR to test this idea.
Managing Director at User Vision
5:35PM on 24th August 2009
Regarding the lack of mousing over links, thats somethng I am quite aware of and was alluding to with the example of someone CP using a joystick to to their disability. Have also worked with many that use switches, tabbing voice activation like Dragon and of course screen readers in navigating sites, I agree that is a major drawback. Very interesting about the readability tool. I am sure that the user can apply their own CSS styles to highlight links regardless of the way they naturally look, but that is a pretty severe workaround for the user and one that almost none would know how to implement easily.
1:14PM on 28th August 2009
One thing I have not seen mentioned is AB testing (also known as bucket testing, or multivariant testing). In this practice, one puts out a design variation, such as black vs blue links to a percentatage of the total userbase. You can learn a lot of assumptions are false. This is not one of them. Sites that use hyperlinks that can't be visually scanned are losing 2-50% of their traffic (it varies widely because there are other affordances, like being in a navigation bar.)
In the case of headers, a recent test I did of adding blue hyperrlink to a header (innoculously called "see more") brought another 100K pageviews to the linkedin-to page. While newspapaers are struggling to make money on every single page view, they are cutting their own throats if they do not test this critical decision. An ad-based site cannot afford to loose traffic.
7:32PM on 14th September 2009
The hyperlink in my opinion does not have to meet the standards and always definetly wear blue. I think that like everything else on the internet, hyperlinks are just as easy to use when made more interactive. It takes the idea of the hyperlink to a new level. Now certain words on an article will not stand out in the article, taking the audiences attention away from the original story. Now if they user wants to know more about a certain word or idea, he then can just pick out of the entire paragraph what he would want to know more about and be able to get it hyperlinked to a relevent webpage. The idea is innovative and dramatically changes the design styles of webpages, its a good thing!
2:53AM on 14th January 2010
I'm agree that Los Angeles news site is overly "black and white" in the links. However, there's nothing wrong to use any colors other than the standard blue links in navigation bars. Eventually, the new design trend will be the standard now is just the time like getting rid of old IE5 and 6 users.
90% of the business person I met said a mobile phone does not need many functions, all they need is receiving call. Now, most of them are using Blackberry will more than thounsand of buttons (including apps button and links).
This post is nothing but conservative rant.