{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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. 

 LA Times homepage

At least the NPR seems to try to indicate the hyperlinks through a different font...


National Public Radio site

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

Published 21 August, 2009 by Chris Rourke

Chris Rourke is Managing Director of User Vision and a contributor to Econsultancy.

23 more posts from this author

Comments (19)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

David Travis, Director at Userfocus Ltd

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.

over 7 years ago

Avatar-blank-50x50

Struan Robertson

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.

over 7 years ago

Julian Grainger

Julian Grainger, Director of Media Strategy at Unique Digital

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.

over 7 years ago

Avatar-blank-50x50

Mary Hamilton

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?

over 7 years ago

Avatar-blank-50x50

Melissa Wantz

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. 

over 7 years ago

Avatar-blank-50x50

Alistair Bull

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.

over 7 years ago

Avatar-blank-50x50

Cmdecato

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.

over 7 years ago

Avatar-blank-50x50

Cmdecato

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.

over 7 years ago

Avatar-blank-50x50

Cmdecato

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.

over 7 years ago

Avatar-blank-50x50

Cmdecato

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.

over 7 years ago

Avatar-blank-50x50

Web Consultancy

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.

over 7 years ago

Avatar-blank-50x50

Paul Wagner

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.

over 7 years ago

Avatar-blank-50x50

Riaz Kanani

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.

over 7 years ago

Avatar-blank-50x50

Victoria Walmsley

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.

over 7 years ago

Avatar-blank-50x50

Karen

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.

over 7 years ago

Chris Rourke

Chris Rourke, Managing Director at User VisionSmall Business Multi-user

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. 

over 7 years ago

Avatar-blank-50x50

christina

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.

over 7 years ago

Avatar-blank-50x50

Matt De Troia

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!

about 7 years ago

Avatar-blank-50x50

George Lew

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.

almost 7 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.