Bullets Make Links Easier to Scan

by on 08/30/10 at 5:20 pm

A list of headlines stacked on top of each other can look like a big blob of paragraph text. I’ve noticed this when I try to scan the headlines on USA Today and LA times. It’s hard to tell which is a link. Not only that, but they’re also not using a link color that’s different from their text color. These are the biggest mistakes you can make if you want your users to read your content.

Bullets Make Links Easier to Scan

The way to make a list of links easy to distinguish is to bullet them. CNN and Yahoo News get it right by consistently bulleting lists of links. The reason bulleting works so well is because when our eyes brush-over a list of headlines the bullets act as an anchor that allows our eyes to move quickly and accurately to the beginning of the next headline and down the list with ease. Without the bullets, it makes it harder to confidently find the beginning of each headline. Bullets can also make a list of links look less overwhelming by giving users a holistic sense of how much information is actually there. This makes it easier for users to scan for the link they want.

Bullets Make Links Easier to Scan

If your text is black, you shouldn’t use black for your links otherwise users will have a hard time distinguishing them. Instead, use blue to make your links more visible. If users can see what’s a link a lot easier, there’s a higher chance they’ll click them.

This simple technique is easy to do and well worth the benefits. As a news-lover I can honestly say that I use CNN and Yahoo News much more than USA Today and LA Times. Their headlines and layout are easier to scan. When it comes to information-heavy websites, scannability is everything.


Bullets Make Links Easier to Scan Bullets Make Links Easier to Scan

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

5 Responses to “Bullets Make Links Easier to Scan”

  1. rajesh

    Aug 30th, 2010

    True. Using bullets is the easiest way to list links that can be read quickly. And for some extent, I’ve seen indenting helps too. But that requires careful usage of white space around the links.

    Another example I can come upon is – http://www.tomshardware.com/us. Some times it is hard to figure out if the headlines spawns to two lines or not.

    • anthony

      Aug 31st, 2010

      Good find! That example really shows how unscannable stacking links without bullets can be.

  2. Chris

    Sep 1st, 2010

    I always get frustrated by lists without at least some sort of bullet or noticeable line spacing. I see it all the time on free WordPress templates and it frustrates me to no end.

  3. Adam Kochanowicz

    Sep 10th, 2010

    I’ve also noticed amateur web designers like to put too much instruction around links. For instance, you don’t need to say

    “Click here to register the above items”

    (1) “Click here to…” is almost always unnecessary. Most of us can figure out what to do with a link (except possibly in the scenario described above)

    (2) “The above items” may also be unnecessary if they are the only “items” on the page.

    Instead, just write:

    “Register”

    Make it a link. If it’s too small, well…just make it big. You don’t see elevator buttons with signs next to them saying “push this button if you want to…”

  4. ReanimationXP

    Aug 24th, 2011

    I usually agree with almost everything here but I can’t say I agree with this one. In this example, the top-right links are the most clear to me.

    Bullets (or at least, these bullets) make everything look too busy, and imply that the links relate to one another, whereas a list of what are basically small paragraphs are just that.

Leave a Comment