Now posts ↓

Tuesday 22 May 2007

Must links always be blue?



Following a discussion with a colleague, I was sent back to review a usability basic: must links always be blue and underlined? Can't they be some other colour?

A good place to start is usability.gov and in their latest newsletter they ask Should All Links be Underlined?'.

Pointing to the basics, the potential for user misunderstanding when you stray from 'norms', they say:

For example, your users will wonder:
  • Is the text clickable?
  • Or is it just being emphasized?

However there are some obvious exceptions.

Besides visual clutter, there are times when underlined links may not be appropriate, such as in left navigation and in tabbed navigation. In a long list, especially bulleted ones, the overwhelming amount of text and underlining hampers readability. The visual clutter may be especially rampant on home pages that are link and text heavy, as well as on index pages and launch pages.


Jakob Nielsen adds that:

  • Blue underlined text universally means 'click here', anything else can mean something else to a user.
  • The main issue is luminance, such as the difference with visited link colour: the standard purple colour is duller than standard blue.
  • The universal consideration though is 'is it usable?' — you don't actually know until you test pages.

Given the above:

"Shades of blue provide the strongest signal for links, but other colors work almost as well."

The issue is consistency.

Plus I think the blue helps break up text and draw interest to text. It makes content appear richer.

You know it's a link at a glance and any other choice would need to be tested to ensure your design isn't making it harder for users.

Common things are like if page titles use the same font size, face and color as links — users won't all know if it is clickable or a page title or heading.

Experts in content like Nick Usbourne say:

We like standard blue or:

#0000CC is a little darker

#000099 is a littler darker than that

Both clearly look like “links”

For visited you can use the same color (standard blue), standard purple or something like:

#666633

#551A8B


These colour choices also 'degrade' well — another usability basic which is particularly relevant when you have an audience which includes a % with dial-up/ancient machinery running with 256 colours.




No comments:

Post a Comment