How to make links look like links?

3 Jun 2008 - 6:01pm
6 years ago
6 replies
637 reads
Katie Albers
2005

It's been my experience that the best (that is to say, most readily
identified by users and least subject to confusion with other text)
way to distinguish a link among text is to underline it. I don't
really see "It looks messy" as a legitimate design concern if the
goal is to provide information. The underlining makes a very clear
"The information about this can be found if you select this text link"

I've also seen and tested a variety of other methods -- putting the
links in a different color (tests out as harder to locate which text
is linked) or a different typeface or type treatment (bold, or
italic) and those have shown the fame problems.

I wouldn't even contemplate hover-based link finding. That relies on
the user knowing that he basically has to swipe his pointer over the
screen until he finds the text that's been linked. Why on earth would
he bother?

Katie
At 1:11 PM -0500 6/3/08, Huang, Yong wrote:

Hello, folks,

>We are currently working on an informational website, some pages of
>which contain a large amount of mixed text and links. We were discussing
>how to make links look like links among plain text. It will be messy if
>we blue underscore all links... We talked about hover underscore. I
>personally don't like this hovering over thing. If users don't feel like
>that is the link, how will they hover over it???
>
>The only thumb rule in my mind is as long as we make the links look like
>links and users don't have to wonder if it is a link before they click
>it, it is a good design. Does anyone has been in the similar situation
>and how did you solve the problem? Using color contrast an option?
>
>Thank y'all ^_^
>
>Yong

--

------------------
Katie Albers
User Experience Strategy & Project Management
katie at firstthought.com

Comments

3 Jun 2008 - 6:27pm
Vytas Gaizutis
2008

Look at this very page, on the right. The blue discussion headings are pretty clearly links (and very discoverable as such). However, look over at the name of the person in the actual posts. It's merely bolder text and there is no affordance that it's a link. A color that is distinctive from body text is essential.

I feel it's unnecessary to use an explicit underscore for links at this point in time. The convention over recent years has shifted. Providing the link on hover, in addition to the clearly different color, should be more than enough.

In addition, a text-dense page full of underscores increases visual noise, which in itself is detrimental to easily perceiving the forest from the trees. If you decide to use underscores, be very wary of using sufficient line spacing. That should help mitigate the noise factor.

3 Jun 2008 - 7:15pm
Juan Lanus
2005

As I read this, and without having tried it ... a suggestion.
Well, some users are more prone to mousing than others, for example kids.
The idea is to set the content, if possible, in a container (for example, a
div).
Then to highlight all the links when the user is mousing over the container,
all the links inside the container at once.
Depending on the relative size of the container, this feature might greatly
reduce the risk that the user didn't notice the links, without the
distracting affect of the links interspersed into text intended to be read.
The user can read the text in a single swoop and after grab the mouse and
get into the links.
--
Juan Lanus

3 Jun 2008 - 7:43pm
Nathanael Boehm
2008

It shouldn't just be colour contrast but also brightness contrast. Using HSB
instead of RGB mode is useful for this. I recently put together a 12 hue x 4
brightness levels (48 colours in total) scheme for a site that heavily
relies on colour/contrast as an aid for identifying screens and screen
components - but using the HSB approach helped keep consistency of contrast
where required and meant I didn't need to come up with 48 individual
colours. I digress. But if you find that underlines on links make reading
the text difficult then you can use bottom borders on the links instead of
applying underline text decoration. That way you can change the colour of
the underline so it doesn't have to neccessarily match the link colour. Use
wisely.

--
Nathanael Boehm
:: http://www.purecaffeine.com
:: nboehm at purecaffeine.com
:: Canberra, Australia
:: 0409 288 464

On Wed, Jun 4, 2008 at 10:15 AM, Juan Lanus <juan.lanus at gmail.com> wrote:

> As I read this, and without having tried it ... a suggestion.
> Well, some users are more prone to mousing than others, for example kids.
> The idea is to set the content, if possible, in a container (for example, a
> div).
> Then to highlight all the links when the user is mousing over the
> container,
> all the links inside the container at once.
> Depending on the relative size of the container, this feature might greatly
> reduce the risk that the user didn't notice the links, without the
> distracting affect of the links interspersed into text intended to be read.
> The user can read the text in a single swoop and after grab the mouse and
> get into the links.
> --
> Juan Lanus
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Nathanael Boehm
:: http://www.purecaffeine.com
:: nboehm at purecaffeine.com
:: Canberra, Australia
:: 0409 288 464

4 Jun 2008 - 7:34am
vlad
2008

What about not underlining, keeping the standard blue color (like Wikipedia
does) and
a:before{
content:"*";
}

Or using a tiny image, like a bullet? How would this work?

--
http://nomorestories.com/

12 Jun 2008 - 11:45am
Anonymous

Hello,

Here is what I think links look like links:
- A button always look like link
- Underline blue letters look like link (ex : www.amazon.com)
- Blue letter only could also look like link (ex : www.ebay.com)
- Underlined letter only could too look like link (ex: http://www.poynter.org)

Now contexte could also make a "non-link" look like link:
- Menu bar items look like link and don't need to be underlined blue
or to look like a button.
- Items in an e-commerce store could be "naturally" esteemed as a link
(ex: http://store.apple.com/us)

I'm a little doubting about the last point but apple is doing it fine.
Do you agree with all these point? Had you tested it?

2008/6/4 vlad <vlad.fratila at gmail.com>:
>
> What about not underlining, keeping the standard blue color (like Wikipedia
> does) and
> a:before{
> content:"*";
> }
>
> Or using a tiny image, like a bullet? How would this work?
>

13 Jun 2008 - 3:31am
Jens Meiert
2004

> The only thumb rule in my mind is as long as we make the links look like
> links and users don't have to wonder if it is a link before they click
> it, it is a good design. Does anyone has been in the similar situation
> and how did you solve the problem? Using color contrast an option?

Links do usually look like links when they're underlined, and that is
a well-established convention. Another convention means that some
sections of a document (like navigation menus) are exempt from this
rule as most users know them to include links as well.

Even though there are people (including Jared Spool [1]) basically
arguing for non-underlined links in the content section as well, I do
recommend to underline links and not only to use different colors or
hover effects.

[1] http://www.uie.com/brainsparks/2006/07/05/do-links-need-underlines/

--
Jens Meiert
http://meiert.com/en/

Syndicate content Get the feed