All the news that fits

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