Introducing the Techmeme Underliner

Click here to download Techmeme Re-Underliner for Chrome


The love that dare not speak its name:

I once estimated that Gabe Rivera’s Techmeme sites were responsible for three quarters of my daily non-search-directed page views.  His web sites are a perfect mirror for my dominant interests: Techmeme (Tech and StartUps), WeSmirch (Pop Culture), memeorandum (Politics) and Mediagazer (Publishing).  Every year or so, I bump into Gabe at an industry event, tell him how much I still love his sites and give him my latest theory on how he heuristically clusters his content, which makes him laugh at me.  And every time I open a new tab in Chrome, this is what I see:

The magic of Techmeme

I would guess that 99% of Techmeme’s visits are single-page sessions.  Most people come to the home page then immediately click back out.  I would also guess that Techmeme drives at least two outbound links for each visit, meaning that it is a traffic amplifier – it’s not uncommon to leave the site with a dozen tabs open. Further, it allows you to keep up with the entire internet industry with a single page view, because Techmeme is one of the most information-dense sites on the web (this is important for the rest of this article).

Each content cluster provides multiple forms of information.  The tentpole story tends to have a super clear headline, like “Dutch ISPs Refuse To Block The Pirate Bay” or “That Was Fast: Betaworks Returns All Capital… And Then Some” or “Macworld finds its footing as a ‘hardcore consumer lifestyle event’“.  And by looking at the number of associated content sources, you know how relevant the article is.  And by looking at the *specific* sources, you can determine to whom the article is relevant — names like Reuters, TechCrunch, Hacker News, USA Today and Laughing Squid all confer a certain amount of context.

And the truly amazing thing is that this takes seconds to grok. In the time it takes you to scan your eyes across a cluster, you essentially know what’s happened and how important it is to whom.  A user can scan from the top to the bottom of Techmeme’s home page in 30 seconds and fundamentally take the pulse of the tech industry.

This is all made possible by an extremely information-dense, yet supremely parseable design.

Aaaaand then Techmeme effed it up :)

Techmeme rolled out a more polished look late last week to much fanfare. In an article touting how it is no longer the ugliest site on the web, Gabe focuses on all the aesthetic improvement.  These improvements boil down to: removal of link underlines and less contrast between link color and text color.  The response has been generally positive, and from an aesthetic point of view, I agree.  Techmeme *is* significantly less harsh to view.  It looks nicer.

In its previous form, Techmeme was a jangled mass of blue and black with thin horizontal lines all over the place.  Without a doubt, Techmeme caused eye strain because all the elements were distinct.  With the redesign, everything looks the same — the text is a dark grey and links are muted blue and magenta. The underlines are gone.  It all fuses together in a pleasing mass of text that is impossible to parse without significantly more cognitive load than before.

Let’s take a look at some examples:

Techmeme's Original Design

Techmeme's New Design

As stated before, the headlines are one of the most important part of Techmeme’s home page.  With a dozen or so words, parseable in microseconds, you know exactly what’s happened.  But in the new design, the link color is almost the same color as the followup text.  In many of the clusters, it’s also the same size.  And, of course, there’s no underline.

The human brain is exceptionally good at groking short bursts of text about a single idea.  You’re essentially in pattern matching mode. The brain’s pattern matching capabilities have reached incredible speeds over the last several million years.

As soon as you increase the number of words beyond a dozen or so, you engage a completely different section of the brain, one that deals with contextualization.  Now, you’re simultaneously trying to determine what happened and what it means to you.  What formerly took an instant and happened automatically now requires real brainpower.

Techmeme's Original Design

Techmeme's New Design

Techmeme uses a fairly unique display paradigm, showing dozens of source names in dense paragraphs, with several on each line.  And make no mistake, these aren’t simply navigational links.  They contain incredible amounts of context.  As long as you can separate the sources.

Notice how much easier it is to parse the sources in the original design? The underline is almost magic in its ability to separate web site names into logical elements, whereas the comma is so small to essentially be unnoticed, leaving only spaces. The spaces in between names are almost exactly the same width as those *inside” the names.  Once again, it does wonders for making the page feel more inviting, completely at the expense of understanding.

No design in a vacuum

Gabe has said that he removed the underlines to reduce eye strain.  And on a traditional content site, I’d completely back him.  When you’re trying to keep a user engaged over several articles and page views, you don’t want the page aesthetics actively driving users away.  But that’s not how Techmeme works.  Users come for a single page, 15 to 30 seconds at a time.

So the eye-strain argument is a bit of a red herring.  It doesn’t matter, at least not beyond general aesthetics.  And while improving aesthetics for its own sake is a noble goal, it should never come at the expense of user interactions.

A solution for Chrome users

I’m hoping that Gabe will revert back some of these changes over time.  But in the meantime, if you visit Techmeme with Chome, I’ve created an extension that reverts the link styles back to their original format.  If you use Firefox or Safari or IE, hit me up with an email or shout out on Twitter (@bpm140).  If enough people ask for a specific platform, I’ll see if I can get something rolled out.

Click here to download Techmeme Re-Underliner for Chrome


{ 1 comment… read it below or add one }

Rafael Fischmann January 30, 2012 at 5:53 am

AWESOME, congrats! I love how it also makes it much easier to differentiate visited links. Thank you.


Leave a Comment