All the news that fits to print

Chris Clarke
Guardian Product Design
5 min readFeb 6, 2015

--

News consumption from the perspective of time

Consuming news is not something people spend a lot of time thinking about. It’s usually in a quick and efficient manner to achieve a desired result; a need to know what’s going on in the world right now.

In the initial designs for the guardian beta site we had a problem, users weren't able to get that quick overview of what was happening.

So what does an overview of news look like to our individual reader? Well that depends on what their intent is, something we've been looking into over the last few months, resulting in the identification of three different modes of consumption — update, discover and extend.

Update — “I want to feel connected to what’s going on in the world”

Discover — “I want to be shown something new about the things I'm interested in”

And finally extend — “I want to gain a deeper understanding of a specific story”

The last two intentions can differ depending on the type of story and the time of day that it’s read and how a story may develop.

So depending on the time of day, readers will have one or several of the intentions above with the assumption being; readers tend to read short-form news during the day, and long-form when they have more time to read it. With the concept of time, combined with intent and consumption posed a very interesting question:

Could the perspective of time be the basis from which the new front page of theguardian.com is designed?

Consumption and time

So what if users allocate different amounts of time and effort to consume different types of content? For example, an “update” intention could be a short amount of a reader’s time and an “extend” intention a longer period. What if we could create a front page based on the amount of time a person expects to spend consuming content? Could that theory combine the needs of our readers and our editors into a single principle — an editor would choose a quick-to-read layout for the most important headlines of the moment, meeting a reader’s intention to consume news quickly.

Diagram by Nick Haley

Fast journalism — Slow journalism

So, if we take the concept of time, how does it manifest itself physically on the page? Our original responsive patterns were uniform in layout, creating a monotonous grid that lacked variation. If we could vary the layout, text and other visual elements, according to how quickly it could be scanned and comprehended, we could represent the “update,” “extend” and “discover” intentions through design.

“Update” would be fast journalism — a basic presentation that’s quick to consume. “Extend” would be the slower journalism — with richer visual treatments that are browsed slowly, and “discover” would sit somewhere in the middle.

Following this line of thought, it could be possible for the reader to distinguish the length and type of each story at a glance. With the overview of news being our initial goal, and “update” being our reader’s first intention, why not make the top container quick to consume, leaving more time to spend scanning the rest of the page? This theory of time and design lead to the breaking apart of our top news container, with two containers presenting a strong news agenda and really showcasing our voice and perspective — headlines, and highlights.

Headlines would be a fast layout — mostly text based, allowing for quick scanning of the news agenda. Highlights would be a slower container, with richer designs, colours and image treatments showcasing the Guardian voice and perspective. They work together to give you a strong “first impression” when you arrive on the homepage.

Taking slow, slower

This theory worked the other way too. With “extend” we could expand the design to be a rich, detailed experience enabling editors to give maximum presentation to images where they were needed, containers such as the big picture — the at the end of our front page, as well as our full bleed ‘joker’ container — showcasing our special reports and detailed reporting.

Joker container design by Sam Morris

This representation of content allowed us to have a shared understanding across editorial and product teams — a news story is written in a way which is quick and easy to consume, and visually presented in the same manner. A special report should be slower, drawing the reader in and representing the time and effort that went into writing that particular piece. Both editorial and product had the responsibility to present stories effortlessly, and time became the unifying factor as we all work towards the same goal; to provide a great experience to our readers. As with all things this piece of work was a collaborative effort, involving Cecilia Dobbs from product and Sam Morris from our design team.

This approach of tying content consumption to time has gone through many iterations since the earliest concepts in June, but the idea has remained. Hopefully readers will recognise the style change on the new website and the difference it makes to the experience. We're always tweaking and developing our ideas, but we're confident time is the key to consumption.

We hope with regular use of the new Guardian website, our readers will start to see how the approach helps them to differentiate the content they want to consume, spending less time seeking and more time reading. I recognise that this website refresh is a big change, a change from a vertical layout to a horizontal one. We're working hard to ensure that everyone still gets that great experience they consistently get from reading their news on the Guardian.

Originally posted on the Guardian Developer Blog. Thanks to Nick Haley and Cecilia Dobbs for helping edit this post. Credit to Sam Morris for the designs and sharing in the theory of news consumption and time.

If you like this post I'd appreciate if you hit recommend or share with a friend! You can also follow me on twitter.

--

--