Sparkicons: Can We Make Better Links?

Sparkicons: The future of linking?

Around this time last year, Mark Boulton proposed a new way of communicating information about linked content online

He called his idea sparkicons, building on Edward Tufte’s description of sparklines, and pointed to some examples on large content-rich, link-heavy sites: Wikipedia and the BBC. He also created some examples of his own.

Mark Boulton: I’m defining a Sparkicon as a small, inline icon with additional link meta data to describe either the content and/or the behaviour when the user clicks the link.

Now, a year on, I thought it’d be interesting to look at how these might work on today’s web.

Sparkicons in action on Wikipedia

Sparkicons in action on Wikipedia

A lot happens in a year. Long-form content is becoming more popular online, for example, so this idea has increasing opportunities for experimentation. On the other hand, the kinds of content formats we’re seeing are evolving too, which would add complexity to sparkicon usage.

From our perspective today, just how well could sparkicons work within text? Would they confuse users, or complement the overall message? And, the ultimate bottom line: why aren’t we seeing them used more already?

Communicating meaning

The underlying purpose of Boulton’s idea is to communicate more information about linked content than can reasonably be communicated by text alone.

It’d be nice to say that good link text should be able to tell you everything you need to know to weigh up whether you want to click on a link. But one look at the detail in the sparkicons Boulton has created reveal just how unlikely that is.

Showing, for example, that a text link leads to a video of one minute, 32 seconds’ duration, is not possible with words if, that is, you want to stick to Jakob Nielsen’s old but still valid advisory of four or five words, maximum, per text link (which I came across in this book).

Even if you did decide to include all that information, including it would likely degrade the user experience much further than would these little sparkicons.

But that’s the clincher: they’re necessarily little. They need to be, for two reasons:

  1. so as not to disrupt the flow of reading too much
  2. to indicate that the information they convey is secondary to that communicated by the text itself.

But this poses problems for users who have vision impairments (even slight ones — I have to concentrate pretty hard to work out the numbers in the “dumb cat” video duration sparkicon example Boulton provides).

So sparkicons are really only going to be useful for those with great vision. I’d go one step further and say they’re only useful for those with great vision and when the link doesn’t indicate the media format.

In the sparkicon example that shows a link to an article, the link text communicates the format of the linked media (article) so the icon itself is effectively doubling up on that communication. In that situation, you’d likely get more than a few content creators who’d remove the format from the link text, rather than removing the sparkicon.

This, I think, would degrade the user experience overall. It would certainly prioritise users with great vision over those without. In most cases, I think it’s better for the text to communicate the linked media, if possible, than to rely on an icon to do that. Why?

  • Text is more scannable.
  • It’s more likely to make sense out of context (e.g. when scanning from link to link to find the one you want).
  • Assistive technology has been developed to ensure that text still works for those with vision impairments.

A standard visual vocabulary

I get the feeling that establishing a standard visual vocabulary for sparkicons would be critical to their contribution to the user experience.

Boulton gives some great examples in his article, but even so, they could be misleading. The comments icon he gives in that article example makes me wonder. Is it linking to the article itself, or taking me to comments? Is it indicating the article’s popularity as an encouragement for me to click through? Wouldn’t I want to read the linked article before the comments?

Other types of media — videos, images — also receive comments, so perhaps there’s potential for this icon to be paired with link text that includes the word “video” or “image” as well. Similarly, an article sparkicon could present the reading time for the linked article.

Without a standard visual vocabulary for the information communicated, and its usage situations, I think things could get out of hand pretty quickly. And that, if not the icons themselves, may do a lot to degrade the reading experience. But the web is a pretty conservative place, with major trends ruled by the masses rather than edgy innovators.

We wouldn’t just need to create a standard vocabulary of sparkicons for them to work; they’d also need to be instantly understood (and ultimately accepted) by users.

What about the words?

A visual vocabulary is one thing; it’s another to create one that needs to work consistently within and around endless variations in text.

Should we create sparkicons that are intended to be applied, and work, regardless of text? Or would they be used only where certain information wasn’t communicated in the text itself? I think the first task would be a pretty big ask, and the second might defeat the purpose of sparkicons somewhat. As anyone who works with users knows, consistency is key.

Boulton makes the point that sparkicons have particular potential for mobile users who want to know what media they’re accessing (and its potential duration if, for example, it’s a video) before they tap. But again, at least the first of these issues may well be served by carefully constructed link text.

He also presents two use cases as examples, and both are lists of linked content. In those cases, the link text reflects the title of the linked media, so the sparkicon’s application goes a long way to help users understand what they’ll get if thy click this link or that one.

But in ordinary prose, including long-from content, where links are likely to be more sparse and, potentially carry more weight (that is, they’re not just giving you options for what to look at next, but are actually adding to the narrative of the piece you’re consuming) sparkicons may make less sense.

Which, of course, doesn’t mean they don’t have strong potential and a future online; it merely suggests they may serve specific purposes. What do you think? I’d love to hear your thoughts in the comments.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Alex Hall

    True, but you could use media queries to show the icons on specific widths, or I was hovering (hah) around the idea of using tooltips so that first tap of the link activates the focus state, but doesn’t follow the link.

    • ckdesign

      Using media queries is probably best, as a mobile user I really dislike popups and tooltips as it is – clicking on a link twice for the sake of improved SEO or semantics is a step in the wrong direction IMHO

  • http://sonnha123.blogspot.com/ sonnha

    I will take the time to study