All the news that fits

© Open Signal Chris Clarke - Full Stack Toronto -
November 2015 All the news that ﬁts @guardian @mr_mr

@mr_mr Designer UX & IxD UX

@mr_mr

@mr_mr 2015

@mr_mr

@mr_mr ©ABookApart

1. The responsive news 2.Density and design 3. Modes of
consumption @mr_mr

The responsive web is not a silver bullet for content.
@mr_mr

2012 ©Stocktrek Images, Inc. / Alamy @mr_mr

2012 @mr_mr

2011 @mr_mr

@mr_mr 2012 2013 2015

@mr_mr  

400 @mr_mr

@mr_mr

• nerdist.com The container model

Konstantin Weiss  Design containers independent of layout. @konstantinweiss -
Information Architects

1 Container 4 5 6 7 2 3 @mr_mr

1 Slice 4 5 6 7 2 3 @mr_mr

1 Item 4 5 6 7 2 3 @mr_mr

@mr_mr

Header Navigation Container A D C E B Header Navigation
Article content D B Container A @mr_mr

We moved away from thinking about speciﬁc pages on the
site and how they might be ﬁlled with content Nick Haley- Director of UX - the Guardian  @twobobswerver

1. The responsive news shift 2.Density and design 3. Modes
of consumption @mr_mr

If the content doesn’t work, the logic doesn’t matter @mr_mr

@mr_mr © Bidgee/Wikipedia

@mr_mr

News Non-news News @mr_mr

They (the readers) could no longer see the same amount
of news in a single viewport Vs the current website @mr_mr

@mr_mr

@WoodyZuill  Sometimes you need to make things until you
see the thing you really need to make. Woody Zuill - Agile coach

Not in this instance @mr_mr

@mr_mr © Mopic / Alamy

Title ©Reddit @mr_mr

Think about the time people spend consuming content @mr_mr

©EPA @mr_mr

Jon Setzen  People have needs, wants, dreams, challenges @jonsetzen
- Director of Design - Media Temple

Jobs to be done @mr_mr

Clayton Christensen  People don’t buy things because of their
demographics. Nobody buys something because they’re a 25-30 male with a college degree, but rather because they go about living their life and some situations arise in which they need to solve a problem. And so they ‘hire’ a product to do the ‘job’ @claychristensen

@padday Paul Adams - VP of Product - Intercom ©Edie.P
©David J Laporte

Our job is news @mr_mr

@mr_mr ©EPA

Modes of consumption Nick Haley- Director of UX - the
Guardian @twobobswerver

@mr_mr Update Extend Discover

Update / I need to know what’s happening right now
/ I want to feel connected to what’s going on in the world  @mr_mr Modes of consumption

Modes of consumption Extend / I want to gain a
deeper understanding of a speciﬁc story  @mr_mr

Discover / I want to be shown something new about
the things I'm interested in @mr_mr  Modes of consumption

More time you expect to spend Most time you expect
to spend Short amount of time you expect to spend @mr_mr Update Extend Discover

U U U E E&D Consumption Time of day @mr_mr

@mr_mr

E&D Consumption Time of day @mr_mr

@mr_mr Slow journalism Fast journalism

The consumption of content Users satisfaction of the page Perceived
time and effort they expect to spend Presentation & variety of content = + @mr_mr

Fast journalism 1. Simple looking 2. Easy and quick to
scan 3. News focussed @mr_mr

@mr_mr

@mr_mr 1. Visually rich 2. Larger 3. More indulgent content
Slow journalism

@mr_mr

20 20 5 5 F Th W Tu M Setup
F Th W Tu M 100 50 50 20 20 @mr_mr

Headlines Highlights @mr_mr

@mr_mr

Chris Clarke - Full Stack Toronto - November 2015 bit.ly/fst-allthenews
@mr_mr @guardian Thank you’s Sam Morris Cecilia Dobbs Theresa Malone Katrina Stubbings Alex Breuer Chris Mulholland Nick Haley and anyone else I’ve forgotten who in some part attributed to this work.

All the news that fits

All the news that fits

More Decks by Chris J Clarke

Other Decks in Design

Featured

Transcript