Underline or not to underline links?

If you are designer I guess all the time you ask yourself should I add underlines on links or not?

Sometimes links that are not underlined can fit better in design and that is the beginning of our dilemma.

Underline or not to underline links? The question is now.

Should we make compromise between design and usability? Can underlined links increase number of clicks and help user to easier find what he is looking for?

To track users you can use eyeTracking tools that are tracing users eye movements or you can just trace mouse click and generate heat maps.

We decided to go with second solution and use CrazzyEgg script on Web Design Beach website so we can create heat maps of home page. Heat maps will show us on what parts of website visitors are clicking and how often.

For first test we were going without underlined links on home page. Heat map was looking like this:crazyegg

For second one 8 links from web design and SEO sections are underlined. crazyegg

In this case it looks clear that underlined links can increase number of clicks and get attention to visitors. We also added arrow as a link to beach blog and you can see how many clicks are there. It is important to guide users through website and inspire them to click with call to action stuff by adding additional graphics like we did with arrow sign.

In this experiment it was also interesting how many visitors are clicking in footer links when they scroll all down the page: crazyegg

Tags: ,

Share/Save/Bookmark
Share

6 Responses to “Underline or not to underline links?”


  1. Geoserv Says:

    STUMBLED!

    Good post, I prefer to underline, as it makes it clear to the user that it is a link.


  2. Pasquale Festa Says:

    In general, underlining is a good way to go. However, what I like to do is use a font color that stands out from the plain text for links (which I leave non-underlined) and have them underline on mouse over. This helps keep the text design clean, adds enough difference to signal the text as a link, and validates the user’s assumption when they mouse over. I think it’s a good compromise between the two.


  3. Gordan Says:

    I also like to underling to point that there is a link behind text. but sometimes it makes article and text in it a little “fuzzy” because underlines are getting more attention (blue color) then regular words


  4. Joe Says:

    Great article. In situations where underlining looks too messy, I have used border-bottom instead of underline. With this technique you can make the text underlined, but at a lighter shade for example. In general though, default blue underlined text is what the society has grown up with, so that’s what they will click on instinctively.


  5. Reader Says:

    Wow! Thank you!
    I always wanted to write in my site something like that. Can I take part of your post to my site?
    Of course, I will add backlink?

    Regards, Reader


  6. seoguy Says:

    Of course (everything for backlink) :)

Leave a Reply