Add a table of contents
Many people want to browse a list of headlines and jump straight to the stories that interest them most. This isn’t unreasonable but, to get to my point, probably won’t be implemented.
Today’s Guardian focuses on a particular way to read the news. This isn’t to say it’s the best way, or the only way, but the site is not trying to please a huge number of people. It would be possible to add features that allow for slightly different ways of reading the newspaper but every small addition would impair what is currently the only way of reading it. I want the site to do one thing very well.
If I’m honest, when I was first planning the site, I was going to put a list of headlines on the front page, and got as far as writing the code to do so. But I realised this was importing one of the features from news websites which I dislike, and which I discussed last week: browsing headlines and having to decide from those few words whether each is worth reading. I knew that I would read fewer articles if I had to make these decisions up front. I found I read more articles, or even just parts of articles, if I had to flick through everything. I want to browse the articles, not the articles’ titles. The content, not the metadata.
There are a lot of “I”s in that paragraph. This is because I was designing something that was perfect for my use, in the hope it would also be perfect for a few other people. Unlike a large company, I have the luxury of not caring about the size of the site’s audience. Do one thing, and do it well, even if only for a handful of people.
So, if you want a table of contents, I’d suggest using the Guardian’s daily list as the least bad option at the moment.
Navigate to articles with the sparkline/scrubber
I’m not sure what to call that bit at the top of the page but many of you want to be able to drag the marker along it to jump to different articles. Which is understandable — it feels as if that’s how it should work.
I first added that line about half-way through the development process. (Which, incidentally, was about six days of work: two to get the basics working and four to experiment, iterate and refine.) Initially it was simply a straight line with a marker to show the reader’s position.
One thing that newspapers do very well, which is a little harder online, is give a good sense of the relative importance of each article. You can see this at a glance: Where is the story in the paper? Is the story long? What size is the headline? Are there several articles grouped together about the same story?
News websites can do some of this, possibly better than Today’s Guardian does, by how stories are placed on the front page.
I only had two measures available to indicate the importance of an article: its position in the newspaper and its length. I was thinking of indicating the latter, somehow, on a table of contents, but when I decided against featuring such a list I realised I could use this data in that top bar.
Hence, the sparkline quality. To make the position marker visible with the new format I made it taller, taller than the largest article marker, and this suddenly makes it feel more grabbable. Now it’s big enough to feel like a piece of interface, rather than be merely illustrative.
So, should it be more of a navigation feature, allowing you to jump to specific articles? I’m not quite sure. I’m not sure how one would know where to jump to. Yes, it could be used to jump to an article, but which article? How do you know where you want to go in advance, what you’re clicking on or dragging towards? Maybe it’s more of an exploratory device: you drag to the middle of the Main Section, see what’s there, drag a little back and forth, peek at more articles, find something you like. Rather than zipping through every article one-by-one-by-one.
This is feasible, although could be very fiddly, even with the precision of a mouse pointer rather than a finger on an iPad — each article link would be only two pixels across.
Another suggestion was to break the sections up a little more, letting the reader jump straight to “national news” or “letters”. While this would be useful and usable, I don’t think the contents of the Guardian, and the data about each article, would allow for such clear segmentation. Unless I rearranged the order of articles…
In short: I’m still pondering this one and how to make it work best, if at all. Let me know if you have any thoughts.
Make the navigation more obvious
A few people think that the left/right navigation isn’t obvious enough. Which is fair enough; it’s purposely obscure.
On most websites, websites that need to work for as large an audience as possible, I’d endeavour to make navigation as clear as it can be. This isn’t one of those websites. My primary aim was to make it a good place to read stuff and I decided that keeping navigation out of the way as much as possible would aid this.
This is a trade-off: things are more confusing when you first arrive but, once you’ve spent a few seconds working them out, you don’t need to be told again. A few seconds’ possible confusion in return for long-term, distraction-free reading.
It helps that the navigation in question is simple — nothing more than left and right. Although some initial discovery is required, there’s essentially only a single mechanic to discover.
It’s also a very selfish decision. I get annoyed by inconsistent and un-obvious interfaces on some other websites, especially if they’ve been uniquely made in Flash (sites belonging to illustrators seem particularly confusing) but I hoped that the potential pay-off is worth the initial investment in this case.
On the iPad, iPhone, etc., however, the navigation is even more obscure and, often, entirely off-screen. I’m working on making the site work better on such devices, and updates will be announced on @todaysguardian.
So, that’s all for now. All the criticism I’ve seen so far has been entirely constructive and friendly. This has been an unusually pleasant and positive experience of the internet’s massed voices, so thanks for your thoughts, suggestions and kind words.