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.
Reader comments (19)
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.
Director of Media Strategy 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.
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.
Log in to post a comment