Timeline Widget on C-Span

If you haven't seen it, C-Span has a "Debate Hub" web site. Now whether you're interested in the presidential debates or not, if you're interested in good software their site is interesting. Or at least the debate timeline widget is interesting. The image below is linked to a larger version.

The timeline widget shows the time for the debate stretched out horizontally and marked at minute intervals like a ruler. At the top is a black bar showing the current topic and underneath are red, blue and gold bars showing where the moderator or each of the debaters are speaking. Clicking on any of the bars displays a "baloon" widget showing the transcript of what the person said with links to view video. Clicking outside the bars and holding the mouse button down allows you to drag the timeline left or right to scroll forward or back through the debate (and there's a note in the bottom left corner to let you know about that).

One of the things that's interesting about the timeline widget is that it's done entirely with HTML and JavaScript. It's the kind of tool that lately would be described as AJAX. From a technical perspective it's pretty impressive - the scrolling is pretty darn seamless, etc. The more I looked at it however, the more I realized that this is a usability train-wreck. While the technical achievement is pretty solid, the user interface needs A LOT of work.

So what did they do right? It's at least visually appealing and the track is pretty clean to look at and they included a legend in the bottom right corner to indicate which colors represent which speakers. After that, it starts going downhill.

Dragging: The idea of being able to drag the timeline isn't so bad. But the execution is poor. I started dragging the timeline to the left because I wanted to see all the topics listed on the black bar at the top. So I dragged... and dragged... and dragged... and dragged some more... Page after page after page, just to get a "summary" of what's in the timeline.

From looking at the visual you have no sense of placement within the timeline. The minute markers are only labeled with numbers and probably should have been labelled "10min - 11min - 12min", etc. But that's minor and not really the issue. I can see from the increasing numbers on the ruler that the left side starts at minute 10 or whatever and I can ballpark from that how many "pages" have come before the position where I am now (the earlier part of the debate). But that does nothing to tell me how many pages are to the right (the later part of the debate). Even just having a label in the top right corner that says "60min" or whatever would help, because although they may assume that everyone knows how long the debates last, not everyone is that observant (or involved).

This was the first big thing I noticed about the timeline. More than anything else it really needs a horizontal scrollbar to indicate where you are in the timeline. I can think of a couple examples of other applications where a modified scroll-bar also provides some additional information, for example in this case, it might include markers at the beginning of each debate topic, allowing you to jump immediately to that topic without the need to scroll. But even without that, just a plain-old browser scrollbar would allow me to see my position in the timeline and move through it more easily. Plus a scrollbar wouldn't require additional instructions (in the lower left corner) to indicate that I can drag it, because I'm already familiar with the scrollbar interface.

Something else they don't tell you is that you can use the mouse-wheel (in FireFox at least, not sure about IE), to scroll the timeline. This actually makes moving through the timeline slightly easier than dragging... however, because the mouse-wheel is also used to scroll the browser window, this interferes with existing behavior. If I'm scrolling down the page to see what's on the page, I'm suddenly stopped when I hit the timeline (which takes up the whole width of the page, so there's no dodging it). I then have to switch gears, grab the scroll baron the right of my browser window and pull it down to get past the timeline widget if I want to see what's below. So in this case, while using the mouse wheel is a little easier than dragging, it would probably be better for the mouse-wheel to not activate scrolling here. I think this might be an unexpected side-effect of their CSS rather than a planned feature, since they tell you to drag but don't mention the wheel.

Labels: Oh my god... there aren't any... Well, okay, there are a few... but not many. So looking at the timeline I can see that Obama started talking just after 10 minutes because there's a blue bar... But what was he saying? If I mouse over that blue bar, all I get is the little hand icon. There are no tool tips to indicate what I'll see if I click. What would be really nice would be a simple "title" attribute on the bar so that when I hover the mouse over it, I can see "Obama: I agree that blah blah...". The title may not let me see a huge amount of text, but it would give me enough of a synopsis to know if I wanted to click the bar to see the whole thing.

That may sound picky on my part but it's not. Once you've clicked on the bar the content appears in a big obtrusive word bubble, with an x in the upper right corner to hide it. Of course if you just click anywhere else in the timeline, to drag it again for example, then the word bubble goes away automatically. The problem is not that it's hard to get rid of, but that non-tech savvy users (your grandmother for example) aren't likely to realize that they don't have to click that little x in the upper right to make it go away. Which makes the whole experience somewhat cumbersome for those less savvy users, who, honestly are the people we should be most concerned with supporting.

The black bars at the top also stretch for rather long periods, so if you happen to be in the middle of a black bar somewhere, you have no idea what the current topic is. Personally I'd like to see an area at the top where there's a label with a little arrow pointing down saying "Relations with Russia". That way as I scroll, the label changes when the arrow passes across into the next section. So I can always see the topic being discussed at the point where the arrow rests in the upper right corner. That would be an excellent accompaniment to the scroll bar. Even in failing that, again, just a simple "title" so that when I hover my mouse pointer over the black bar I can see the topic without having to click it to display the word bubble.

I think I may have forgotten a thing or two that I wanted to mention. If I remember I'll probably come back and update this entry. For now I think this will suffice. Hopefully if you ever find yourself working on a similar kind of vertically scrolling application (maybe another timeline), this will help you avoid making these same mistakes and instead make it really intuitive and a pleasure to use. :)