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

All the news that fits

6ed0bfb73aafbb294bb90f6a47a8e1af?s=47 Chris J Clarke
October 19, 2015

All the news that fits

6ed0bfb73aafbb294bb90f6a47a8e1af?s=128

Chris J Clarke

October 19, 2015
Tweet

Transcript

  1. © Open Signal Chris Clarke - Full Stack Toronto -

    November 2015 All the news that fits @guardian @mr_mr
  2. @mr_mr Designer UX & IxD UX

  3. @mr_mr

  4. @mr_mr 2015

  5. @mr_mr

  6. @mr_mr

  7. @mr_mr

  8. @mr_mr ©ABookApart

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

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

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

  12. 2012 @mr_mr

  13. None
  14. 2011 @mr_mr

  15. @mr_mr 2012 2013 2015

  16. @mr_mr  

  17. 400 @mr_mr

  18. @mr_mr

  19. @mr_mr

  20. @mr_mr

  21. • nerdist.com The container model

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

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

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

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

  26. @mr_mr

  27. Header Navigation Container A D C E B Header Navigation

    Article content D B Container A @mr_mr
  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
  29. 1. The responsive news shift 2.Density and design 3. Modes

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

  31. © Mike Pett / PA @mr_mr

  32. @mr_mr © Bidgee/Wikipedia

  33. @mr_mr

  34. News Non-news News @mr_mr

  35. They (the readers) could no longer see the same amount

    of news in a single viewport Vs the current website @mr_mr
  36. @mr_mr

  37. @mr_mr

  38. @WoodyZuill  Sometimes you need to make things until you

    see the thing you really need to make. Woody Zuill - Agile coach
  39. Not in this instance @mr_mr

  40. @mr_mr © Mopic / Alamy

  41. Title ©Reddit @mr_mr

  42. 1. The responsive news shift 2.Density and design 3. Modes

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

  44. ©EPA @mr_mr

  45. ©EPA

  46. Jon Setzen  People have needs, wants, dreams, challenges @jonsetzen

    - Director of Design - Media Temple
  47. Jobs to be done @mr_mr

  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
  49. @padday Paul Adams - VP of Product - Intercom ©Edie.P

    ©David J Laporte
  50. Our job is news @mr_mr

  51. @mr_mr ©EPA

  52. Modes of consumption Nick Haley- Director of UX - the

    Guardian @twobobswerver
  53. @mr_mr Update Extend Discover

  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
  55. Modes of consumption Extend / I want to gain a

    deeper understanding of a specific story  @mr_mr
  56. Discover / I want to be shown something new about

    the things I'm interested in @mr_mr  Modes of consumption
  57. @mr_mr ©Guardian

  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
  59. U U U E E&D Consumption Time of day @mr_mr

  60. @mr_mr

  61. E&D Consumption Time of day @mr_mr

  62. @mr_mr ©Guardian

  63. @mr_mr ©Guardian

  64. @mr_mr Slow journalism Fast journalism

  65. The consumption of content Users satisfaction of the page Perceived

    time and effort they expect to spend Presentation & variety of content = + @mr_mr
  66. Fast journalism 1. Simple looking 2. Easy and quick to

    scan 3. News focussed @mr_mr
  67. @mr_mr

  68. @mr_mr

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

    Slow journalism
  70. @mr_mr

  71. @mr_mr

  72. 20 20 5 5 F Th W Tu M Setup

    F Th W Tu M 100 50 50 20 20 @mr_mr
  73. @mr_mr ©Guardian

  74. @mr_mr ©Guardian

  75. Headlines Highlights @mr_mr

  76. @mr_mr

  77. 1. The responsive news shift 2.Density and design 3. Modes

    of consumption @mr_mr
  78. @mr_mr

  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.