Data Interface Iterations: Designing webtrendmap.com’s Stacks

This is a guest post by Craig Mod, who collaborated with Information Architects, to develop Web Trend Map. The site, which is largely inspired by iA’s previous work, lets you curate links with sources you trust. This post describes the multiple iterations and decisions made during the design process.

Design and development of webtrendmap.com v1.0 took three months. During this period the interaction design and interface underwent countless subtle permutations. What we ended up with is almost totally unlike what we started with. There was a lot of painful iteration. A lot of gut wrenching backtracking.

Let’s drill down and take a look at how we iterated on one key webtrendmap.com visual element: the Stack.

Stacks

Stacks are simple: each Stack represents the links of one Twitter user. A bigger Stack = more links. Despite the simplicity, the interface for these Stacks changed considerably from initial prototype to launch:

Prototype and final version (Stack v.1 and v.2):

The interaction model for Stack v.1 mouseover was:

1. display most recent link above Stack
2. move mouse up and click link to open in a new window
3. or click Stack to see next link

Here was our theory behind this model:

• you would ‘deplete’ all the Stacks on the map
• Stack states were saved in a cookie
• on followup visits, the Stack heights would represent only new links from your previous visit

The act of depleting the Stacks would be satisfying! And having a map of empty Stacks was not unlike achieving inbox zero! … So we thought.

Sadly, this theory was far removed from reality.

Some of the problems this model presented:

1. As soon as you clicked the Stack you ‘lost’ the link.
2. For Stacks with many links, you had to click dozens of times. Combine this with #1 and you have a recipe for nervous clicking. (“I don’t want to accidentally miss anything good!”)
3. Seeing only one link at a time made it extremely difficult to understand relativity between links posted before or after.

The idea of depleting Stacks and ‘zeroing out’ a map was frustrating and stressful in practice. In short: it felt like a chore. We knew we had to reconsider the model.

Stacks v1.5

The first major iterative changes were:

• Move links to side of Stack for easier mousing-over
• Show five links at a time

Stack v1.5 (Stack mouseover) and Stack v1.5 (link mouse-over):

Users could still deplete Stacks by clicking them and seeing multiple links greatly increased parsing speed and solved problems #2, and #3.

To keep visual clutter down we hid Tweet text related to links, revealing them only on mouseover.

Still, there was no intuitive way to allow reverse movement through the Stack. And any attempts to graft a system of moving up and down the Stack onto the interface felt like we were making something that should be simple, more and more unnecessarily complex.

We liked the data, but the interaction was broken.

Trending Links Sidebar

The breakthrough came in the form of a sidebar: the ‘Trending Links’ sidebar is an aggregate (based on frequency) of all the links on a map.

Adding this gave us the insight we needed to confidently state the following:

1. Depleting the Stacks and zeroing out the map was too much work for too little gain.
2. Individual user link postings weren’t (for the most part) very interesting but the aggregate of the map was.
3. The Trending Links sidebar replaced the Stacks as our main data interface.

With these points clearly in mind we were able to execute a final Stack design and interaction revision.

Stacks v2.0

The final Stack changes:

1. Expand tweet text by default
2. Remove Stack depletion functionality
3. Clicking a Stack brings you to the links overview page for that user

The Stacks started as a tiring, complicated, awkward interface to a user’s links. They became a simplified gateway to historical link data for a user. That’s a hell of a shift of functionality, and one we were able to achieve only through progressive, constant, sometimes painful iteration.

Was it worth the pain? The pain is what drives us — let’s us intuit we’re breaking down non-trivial problems. So the pain was more than worth it. The webtrendmap.com we arrived at is an order of magnitude more usable than what we started with.

As a bonus, these design iterations were responsible for the creation of the ‘Trending Links’ sidebar and individual user historical link views. Two excellent additions to the site.

We’ve cataloged more than 200,000 links in less than a month of public operation. Our roadmap for what we want to produce with this data is pretty inspiring. But you know what? It’s going to change. What we see and understand now, and what we’ll see and understand mid-production will invariably differ. And we’re fine with that — we’re iterating, and sometimes it hurts, but the end result is almost always satisfying.

Craig Mod is a developer, book designer, publisher, and professional world-wide digital hobo. He collaborates with individuals and companies in Tokyo on social media projects. Find more about Craig on his site, or follow him on Twitter.