Upgrade to Pro — share decks privately, control downloads, hide ads and more …

All the news that fits

Chris J Clarke
October 19, 2015

All the news that fits

Chris J Clarke

October 19, 2015
Tweet

More Decks by Chris J Clarke

Other Decks in Design

Transcript

  1. © Open Signal
    Chris Clarke - Full Stack Toronto - November 2015
    All the news
    that fits @guardian
    @mr_mr

    View full-size slide

  2. @mr_mr
    Designer UX & IxD UX

    View full-size slide

  3. @mr_mr
    ©ABookApart

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 2012
    ©Stocktrek Images, Inc. / Alamy
    @mr_mr

    View full-size slide

  7. @mr_mr
    2012 2013 2015

    View full-size slide

  8. @mr_mr
     

    View full-size slide

  9. • nerdist.com
    The container model

    View full-size slide

  10. Konstantin Weiss

    Design containers
    independent of layout.
    @konstantinweiss
    - Information Architects

    View full-size slide

  11. 1
    Container
    4 5 6 7
    2 3
    @mr_mr

    View full-size slide

  12. 1
    Slice
    4 5 6 7
    2 3
    @mr_mr

    View full-size slide

  13. 1
    Item
    4 5 6 7
    2 3
    @mr_mr

    View full-size slide

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

    View full-size slide

  15. We moved away from thinking about
    specific pages on the site and how
    they might be filled with content
    Nick Haley- Director of UX - the Guardian

    @twobobswerver

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. © Mike Pett / PA
    @mr_mr

    View full-size slide

  19. @mr_mr
    © Bidgee/Wikipedia

    View full-size slide

  20. News Non-news News
    @mr_mr

    View full-size slide

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

    View full-size slide

  22. @WoodyZuill

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

    View full-size slide

  23. Not in this instance
    @mr_mr

    View full-size slide

  24. @mr_mr
    © Mopic / Alamy

    View full-size slide

  25. Title
    ©Reddit
    @mr_mr

    View full-size slide

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

    View full-size slide

  27. Think about the time people
    spend consuming content
    @mr_mr

    View full-size slide

  28. Jon Setzen

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

    View full-size slide

  29. Jobs to be done
    @mr_mr

    View full-size slide

  30. 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

    View full-size slide

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

    View full-size slide

  32. Our job is news
    @mr_mr

    View full-size slide

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

    View full-size slide

  34. @mr_mr
    Update Extend Discover

    View full-size slide

  35. 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

    View full-size slide

  36. Modes of consumption
    Extend / I want to gain a deeper
    understanding of a specific story

    @mr_mr

    View full-size slide

  37. Discover / I want to be shown
    something new about the things I'm
    interested in
    @mr_mr

    Modes of consumption

    View full-size slide

  38. @mr_mr
    ©Guardian

    View full-size slide

  39. 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

    View full-size slide

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

    View full-size slide

  41. E&D
    Consumption
    Time of day
    @mr_mr

    View full-size slide

  42. @mr_mr
    ©Guardian

    View full-size slide

  43. @mr_mr
    ©Guardian

    View full-size slide

  44. @mr_mr
    Slow
    journalism
    Fast
    journalism

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. @mr_mr
    ©Guardian

    View full-size slide

  50. @mr_mr
    ©Guardian

    View full-size slide

  51. Headlines Highlights
    @mr_mr

    View full-size slide

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

    View full-size slide

  53. 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.

    View full-size slide