Today’s Guardian feature requests

A week after launching Today’s Guardian and writing about the thoughts behind it I’m going to discuss the three most common feature requests I’ve received.

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.

Comments

  • One thing newspapers do well is let you quickly flip through the pages to idly scan the articles. It’s a very course tool, but quite a comforting one. Usually you’ll stop at an interesting photo, or a word at the outside edge/top corner.

    As a scrubber, your sparkline could be kind of like the spine of the paper, and if each article could reflect something of that top corner scannability, rather than just be a line, you might be able to achieve some of this loveliness.

    I dunno, the first thing I thought of when I saw it was to have a small thumbnail of what each article looked like, or maybe a small section of the previous and next article visible at the sides.

    Anyway. Thoroughly rambling a bit now, but for an idea of *one* way spark/scrubbing can work, you might be interested in a site I made a while ago for visualising Last.fm histories. I loaded your scrobbles in earlier: http://scrobarcode.com/browse?user=gyford

  • I have one suggestion to improve your very elegant site, http://guardian.gyford.com/.

    Please queue up the UI events. If I press d,l, or click next five times I should end up on the 5th article. Currently, I usually land on the third article. Queueing all the events and executing the entire queue will enhance the predictability of the simple and elegant navigation.

    Cheers,
    Keith

  • I have already found that Today’s Guardian is getting me through a lot more of the paper than I had previously managed to navigate online.

    I want to be able to navigate through pages fast, using the sparkline or whatever, because I’ve found I don’t necessarily read the whole thing at once. I might get into an article or two and run out of time and return later. When I do, I then have to scroll through all the articles. I want the digital equivalent of saying “I was roughly here when I put down the paper, let’s pick up roughly here again”.

    A few other things have been interesting to me, as well. If an article isn’t available (rights, or perhaps a 404), then I am glad to know it was there but it’s striking how much I decide I don’t care about it. I guess if it were a hugely relevant headline I would chase it to the Guardian site, but otherwise I just skip on by. And the other thing is sport. I guess it’s a feature of the data from the Guardian, but I quite often struggle to tell which sport is being referred to (although, right now, it’s obviously all football). Running headers normally handle this in the paper version, I think, but otherwise you really need to know your sports to have the first clue what some of the headlines might be about.

  • I have read more of the Guardian in the last week than I have in months.

    The idea of flipping through the stories works well. I use the ‘h’ back ‘l’ forward ‘j’ up ‘k’ down for navigation. I like that it throws you to the top of the story. I find myself skipping any stories that require you going to the Guardian site as that is basically against the whole point of this.

    I do find myself clicking on the sparkline to get back to where I left off and going back to the start. Also when the ad’s are not flashing or jumping out at me I do even look at them.:) Especially as there is only one per article.

  • I like this a lot. The simplicity is quite beautiful. Where it fails me today is in not recognising the browser/platform (as far as I can see) and responding to context i.e. I want something that knows I am looking at it via Opera Mini in Blackberry and changes the ‘onkey’ to a visible next/previous link, probably floating to keep the anytime decision making that the ‘onkey’ offers.

    Quite beautiful in other regards though and delivers on the initial intention very well.

  • Peter, no plans to support Opera Mini on Blackberry at the moment I’m afraid, as I don’t have one. What is an “onkey”?

  • This is great. I really love the “feel” of it.

    I agree that a way of swiping or clicking the sparklines would be handy. You may not know where you’re going to end up, but no less so than when hitting ‘next’. I don’t think it need carry any more detail about the link destination than it does currently. In terms of usability, sparkline navigation would also make getting back to an article that is near the end of the main news section much easier, fore example if you have closed a window.

    With a physical newspaper, I will often quickly flick through the pages to get a feel for its contents before settling down to read it more methodically. It would be nice to be able to do that with this.

    Otherwise more or less flawless though! I will definitely be returning to check it changing.

  • Phil - I’m grateful for your response, I didn’t really expect one. I certainly don’t expect changes or development as part of what makes this such a delightful piece of work is the I-ness of it. You have moved the debate, done something suits you and offered it unwarranted for others. At some philosophical level I like that more than I want something tailored to my device (and anyway the front page lasts from getting on the train to going into a tunnel so I don’t require further mobile navigation at present).

    ‘Onkey’ in my non technical world is ‘on depression of the following key: “l”, take the following action: “feed next story”’.

    P

  • Good points, Phil. I would second Chris’ comment on swiping through the sparklines: “You may not know where you’re going to end up, but no less so than when hitting ‘next’.”

    If all the titles were preloaded, then as you swiped through the sparklines you could see the headlines flash (ie, in a popover) and could stop if something grabs you. That’s similar to what people want with a list of headlines, but perhaps in a way that fits the “Today’s Guardian” style better.

    I would again suggest breaking the Main Section into the subsections that the paper itself is broken up into as shown on the left here: http://www.guardian.co.uk/theguardian/mainsection (Top Stories, UK News, etc. There are 8.) Sports, G2 and Film/Music wouldn’t need to be broken down further (as they have few subsections anyway).

    Of course you don’t want to overwhelm that top part with a whole bunch of sparklines either. So here’s another idea: How about one Main Section sparkline as you have it, but the lines are a different color according to the subsection (obviously articles in the same subsection would need to be grouped together). For this to be useful, you would have to be able to swipe/jump to a particular article (as per other user’s suggestions). They wouldn’t even have to be labelled, as a regular reader would end up knowing which ones are which and jump to those. And for the user who doesn’t care, it wouldn’t clutter things up for them.

    In that case, maybe instead of breaking Main Section into 8 colors (as it is in the paper itself), how about 5: Top Stories, UK, International, Finance, all the rest (Comments, Editorial, Reviews, etc.).

  • The main difficulty with breaking the Main Section down into smaller sections is that the stories would have to be re-arranged from their current order, which is pretty much the order they appear in the newspaper. For example, the first seven stories at the moment are from UK News, Environment, Politics, World News, Sport, Politics, Business. The stories could, technically, be rearranged but I want to present the newspaper as it is, with the order of stories judged by the paper’s editors.

    To be honest, the main reason I display those sub-section names at all is because it’s an opportunity to introduce a bit more colour. They’re not very important to be, although they do, admittedly, add a touch of context to the story.

    I’m still thinking about swiping etc, but it won’t be happening very soon, whatever seems best, due to time constraints.

  • I see your point about the articles needing to be rearranged. I’ve never actually read the Guardian as a newspaper (don’t live in the UK), and have only read their content on their website. I didn’t realize that the content in the paper was so shuffled (other than on page 1 and 2)—I would have thought it was grouped by type within the rest of the paper.

  • I Love it, i felt like I was getting a proper read of the weekend paper for the first time since leaving England today when using your creation, you’re my new hero.. I made an icon for use with fluid, downloadable here: http://cl.ly/c9c6e29512f4dac1dd27

    I’ve also started collecting a few little visual tweaks to help with readability and appearance which are probably specific to my tastes, but I’ll wrap them up as a userscript at some point as long as that’s okay with you.

  • Thanks Stuart — sure, let me know your suggestions.

  • Two small suggestions
    * make the spark lines the same colour as the section header - gives you a bit more information about the structure of the paper
    * make the pictures bigger, if you can - run them the width of the column. I *like* pictures. (I am, however, guessing that they’re limited at the Guardian end.)

    It’s a lovely lovely thing Phil, good job.

  • Yes, good idea about the sparkline - I was going to see what that looked like when I come to fiddling with it next. The minimalist in me fears all those colours :)

    As for the images — you need to be at the next level of the Guardian API’s access to get larger images. But I’m still not sure about increasing the size of them, because so many seem to be generic “related” images, rather than photo journalism that’s directly related to this particular story. eg, here’s a stock photo of George Osborne, here’s a stock photo of some crisps. I’d like to highlight great, topical photojournalism, but get a bit annoyed by the genericness of some of those thumbnails, much as they brighten things up.

16 Jun 2010 at Twitter

16 Jun 2010 in Links


Warning: simplexml_load_string(): Entity: line 1: parser error : Start tag expected, '<' not found in /home/philgyford/webapps_symlinked/gyfordphil/includes/classes/LastFm.php on line 316

Warning: simplexml_load_string(): ERROR: There was a problem fetching the data. Please try again later. in /home/philgyford/webapps_symlinked/gyfordphil/includes/classes/LastFm.php on line 316

Warning: simplexml_load_string(): ^ in /home/philgyford/webapps_symlinked/gyfordphil/includes/classes/LastFm.php on line 316