Zeitgeist and designing Live Articles on the Guardian app

The first Guardian news app for iPhone was well received and sold well. Designing a new version probably have felt more daunting than it did… and while I am very pleased with what we have released, there are always lessons to learn: about how features often turn out to me more complex and time consuming than you imagine. Our brief: to bring readers some great new features, Bring more of the Attention Data work to the surface, introduce landscape mode and offer some services in the sports section as well as exploring some other alerts. Here are some notes on 2 of teh new features. I intend to write a little more about it over the next few months

Attention Data (in case you wondered) describes those sections like Most Read, Most Emailed etc, which reflect the attention spent by readers on different sections or articles. At the guardian there has been some interesting work on what they’ve called Zeitgeist. I leave it to the words of Dan Cat to explain what Zeitgeist measures:

1. Visits, bounce rate, dwell, search terms and so on are provided by querying our site traffic metrics
2. “Social signals” (mentions on Twitter, etc.) come from site-specific search results powered by OneRiot’s nifty API
3. Number, recency and rate of comments on content objects are calculated from the commenting platform used across guardian.co.uk

It’s similar to Twitter’s trending. It strips out the most commonly read, and looks for spikes of interest, and does so across all sections of the site so you view of the content which is “edited” by level of interest from other users.

The proposal on improving “Trending” was to show the articles which made each topic popular. I was skeptical, but I think we found a way of accessing the articles that worked. I am always a firm believer in standing on the shoulders of those who have travelled a road before, and the way Apple implemented folders on the springboard was something of an inspiration. Getting the user to tap on a topic, and have the articles which make it hot slide out from under the cell seems to make sense.

I wanted to include a mini chart with each trending topic – Sparklines like those encouraged by Edward Tufte. Some thought that users wouldn’t understand so we left it out. I like the idea of small details whose meaning might initialially be elusive, but which offer enough clues for the inquisitive to find the meaning. I’m sure we will revisit that, if not here then elsewhere in an app.

Is there a coder in the house?

It has been a pleasure working with an in-house development team. Martin and Dean worked brilliantly – even if the production deadline meant they had to say NO to a few features (stay tuned).

One good example of the benefits of close collaboration is the treatment of Live Stories. In version 1 there was no away to read updates to live blogs, so we set out to fix this. There were many iterations of the ideas on paper before the developers started making the magic happen in the app.

Earlier versions of “Live articles”, worked on by Andy (Brockie) and me had a quite complex UI process by which a user would arrive at the story, see the picture and headline which would move out of the way to present the story. This approach put a barrier in the way of the reader reading the story, so I decided to rethink how the photo might work in the article and realised that a lead photo in a story in which the reader will rarely be at the “top” is quite pointless. It made sense to ditch the photo and focus on the article. With such little space available, this was a relief. The only problem now was how to let the user continue to see the headline, standfirst and byline AND be able to read the article. This was achieved by taking a tip from the native Mail app: hide anything you don’t need to see right now. We stuck a text control underneath the headline so if you want to see the byline you just tap that.

To help illustrate a point while debating with Andy how the article should scroll, I drew a picture of how it might function if it were a physical machine – a real world object manipulated by the user. This might seem a  bit of a long way round, but was a good way to imagine whether the UI *felt* right and believable. It doesn’t need to be possible to build it physically, even of it’s contradictory, a sense of it’s rightness in use is important.

The beauty of working with developers nearby was that when they needed to know about dimensions such as spacing of columns across the screen, or precisely how the text needed to fall I could find out how they constructed that screen and know precisely what dimensions he needed. We  spent much of the final weeks working closely with Dean and Martin modifying the functionality until it felt just right.

There will be additional enhancements to Llive articles rolled out over the next few months. They will range from some simple typographical and colour solutions for block-quotes, tweets etc, to more innovative additions, with the common aim of bringing the user a rich experience of live unfolding news. Watch this space!

As anyone can tell I am pleased with how this turned out. Any additional feature is only a success if it is used, so I’d urge tall who have it to explore the app and find some of the gems dotted around the place. I am by turns excited and concerned as I watch the events happening in Egypt, and finding the Guardian app live article a great way to keep informed about it. if only we could add pictures!

Add Your Comments

Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Your email is never published nor shared.

Ready?