All the news that fits

Transcript

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

   View Slide

2. @mr_mr
   Designer UX & IxD UX
   

   View Slide

3. @mr_mr
   

   View Slide

4. @mr_mr
   2015
   

   View Slide

5. @mr_mr
   

   View Slide

6. @mr_mr
   

   View Slide

7. @mr_mr
   

   View Slide

8. @mr_mr
   ©ABookApart
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 2012 @mr_mr
    

    View Slide

13. View Slide

14. 2011 @mr_mr
    

    View Slide

15. @mr_mr
    2012 2013 2015
    

    View Slide

16. @mr_mr
     
    

    View Slide

17. 400
    @mr_mr
    

    View Slide

18. @mr_mr
    

    View Slide

19. @mr_mr
    

    View Slide

20. @mr_mr
    

    View Slide

21. • nerdist.com
    The container model
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. @mr_mr
    

    View Slide

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

    View Slide

28. 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 Slide

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

    View Slide

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

    View Slide

31. © Mike Pett / PA
    @mr_mr
    

    View Slide

32. @mr_mr
    © Bidgee/Wikipedia
    

    View Slide

33. @mr_mr
    

    View Slide

34. News Non-news News
    @mr_mr
    

    View Slide

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

    View Slide

36. @mr_mr
    

    View Slide

37. @mr_mr
    

    View Slide

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

    View Slide

39. Not in this instance
    @mr_mr
    

    View Slide

40. @mr_mr
    © Mopic / Alamy
    

    View Slide

41. Title
    ©Reddit
    @mr_mr
    

    View Slide

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

    View Slide

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

    View Slide

44. ©EPA
    @mr_mr
    

    View Slide

45. ©EPA
    

    View Slide

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

    View Slide

47. Jobs to be done
    @mr_mr
    

    View Slide

48. 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 Slide

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

    View Slide

50. Our job is news
    @mr_mr
    

    View Slide

51. @mr_mr
    ©EPA
    

    View Slide

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

    View Slide

53. @mr_mr
    Update Extend Discover
    

    View Slide

54. 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 Slide

55. Modes of consumption
    Extend / I want to gain a deeper
    understanding of a specific story
    
    @mr_mr
    

    View Slide

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

    View Slide

57. @mr_mr
    ©Guardian
    

    View Slide

58. 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 Slide

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

    View Slide

60. @mr_mr
    

    View Slide

61. E&D
    Consumption
    Time of day
    @mr_mr
    

    View Slide

62. @mr_mr
    ©Guardian
    

    View Slide

63. @mr_mr
    ©Guardian
    

    View Slide

64. @mr_mr
    Slow
    journalism
    Fast
    journalism
    

    View Slide

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

    View Slide

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

    View Slide

67. @mr_mr
    

    View Slide

68. @mr_mr
    

    View Slide

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

    View Slide

70. @mr_mr
    

    View Slide

71. @mr_mr
    

    View Slide

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

    View Slide

73. @mr_mr
    ©Guardian
    

    View Slide

74. @mr_mr
    ©Guardian
    

    View Slide

75. Headlines Highlights
    @mr_mr
    

    View Slide

76. @mr_mr
    

    View Slide

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

    View Slide

78. @mr_mr
    

    View Slide

79. 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 Slide