SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Visual Storytelling
for Mobile
Colleen McEnaney, WSJ Graphics
We’re using less
interactivity in
our interactive
graphics
Why? Journalistic and
technical reasons
● Point out the key pieces of data right away
● Search engines <3 fast-loading pages
● Swiping and scrolling > dropdowns and
buttons on a mobile device
What are we
moving toward?
● More linear, explanatory stories rather
than open-ended exploratory ones
Resources
● Stories in this presentation:
○ The Guardian’s How did Theresa May’s election gamble fail?
○ WSJ’s How to Make a Call in 2017
○ WSJ’s Cassini’s Last Dance With Saturn
● More on the conversation about interactivity in graphics:
○ The death of interactive infographics?
○ In Defense of Interactive Graphics
○ Seven Trends in Data Visualization
● Storytelling tools to explore:
○ journalismtools.io
○ SPJ’s Journalist’s Toolbox
Thanks!
● Say hello :)
○ @colleenmcenaney
○ colleenmcenaney@gmail.com

Weitere ähnliche Inhalte

Mehr von Journalism.co.uk

Mehr von Journalism.co.uk (20)

Alan Hunter - Audience engagement: Practical applications beyond buzzwords
Alan Hunter - Audience engagement: Practical applications beyond buzzwordsAlan Hunter - Audience engagement: Practical applications beyond buzzwords
Alan Hunter - Audience engagement: Practical applications beyond buzzwords
 
James Webb - Audience engagement: Practical applications beyond buzzwords
James Webb - Audience engagement: Practical applications beyond buzzwordsJames Webb - Audience engagement: Practical applications beyond buzzwords
James Webb - Audience engagement: Practical applications beyond buzzwords
 
Thomas Schultz-Homberg - Audience engagement: Practical applications beyond b...
Thomas Schultz-Homberg - Audience engagement: Practical applications beyond b...Thomas Schultz-Homberg - Audience engagement: Practical applications beyond b...
Thomas Schultz-Homberg - Audience engagement: Practical applications beyond b...
 
Lilah Raptopoulos - The changing relationship between media organisations and...
Lilah Raptopoulos - The changing relationship between media organisations and...Lilah Raptopoulos - The changing relationship between media organisations and...
Lilah Raptopoulos - The changing relationship between media organisations and...
 
Sarah Hartley - The changing relationship between media organisations and the...
Sarah Hartley - The changing relationship between media organisations and the...Sarah Hartley - The changing relationship between media organisations and the...
Sarah Hartley - The changing relationship between media organisations and the...
 
Eliza Macintosh - Mobile Storytelling
Eliza Macintosh - Mobile Storytelling Eliza Macintosh - Mobile Storytelling
Eliza Macintosh - Mobile Storytelling
 
Yasmine El Rafie – All hands on deck: Benefits and challenges of collaboratio...
Yasmine El Rafie – All hands on deck: Benefits and challenges of collaboratio...Yasmine El Rafie – All hands on deck: Benefits and challenges of collaboratio...
Yasmine El Rafie – All hands on deck: Benefits and challenges of collaboratio...
 
Leila Haddou – Open-source tools for journalists and how to use them
Leila Haddou – Open-source tools for journalists and how to use themLeila Haddou – Open-source tools for journalists and how to use them
Leila Haddou – Open-source tools for journalists and how to use them
 
Felix Franz – All hands on deck: Benefits and challenges of collaboration in ...
Felix Franz – All hands on deck: Benefits and challenges of collaboration in ...Felix Franz – All hands on deck: Benefits and challenges of collaboration in ...
Felix Franz – All hands on deck: Benefits and challenges of collaboration in ...
 
Bo Franklin – How to make the most of newsroom experiments
Bo Franklin – How to make the most of newsroom experimentsBo Franklin – How to make the most of newsroom experiments
Bo Franklin – How to make the most of newsroom experiments
 
Nicole Jackson – Immersive video workshop
Nicole Jackson – Immersive video workshopNicole Jackson – Immersive video workshop
Nicole Jackson – Immersive video workshop
 
Marc Ellison – Immersive video workshop
Marc Ellison – Immersive video workshopMarc Ellison – Immersive video workshop
Marc Ellison – Immersive video workshop
 
Peter Bale – Reconstructing journalism, Wiki style
Peter Bale – Reconstructing journalism, Wiki stylePeter Bale – Reconstructing journalism, Wiki style
Peter Bale – Reconstructing journalism, Wiki style
 
Jason Karaian – At our fingertips: Storytelling for mobile
Jason Karaian – At our fingertips: Storytelling for mobileJason Karaian – At our fingertips: Storytelling for mobile
Jason Karaian – At our fingertips: Storytelling for mobile
 
Stuart Goulden – From devices to communities: Connected news
Stuart Goulden – From devices to communities: Connected newsStuart Goulden – From devices to communities: Connected news
Stuart Goulden – From devices to communities: Connected news
 
Alison Gow and Tom Metcalfe – From devices to communities: Connected news
Alison Gow and Tom Metcalfe – From devices to communities: Connected newsAlison Gow and Tom Metcalfe – From devices to communities: Connected news
Alison Gow and Tom Metcalfe – From devices to communities: Connected news
 
Rob Hammond – 2:00-2:45pm Editorial analytics: How to use metrics in the news...
Rob Hammond – 2:00-2:45pm	Editorial analytics: How to use metrics in the news...Rob Hammond – 2:00-2:45pm	Editorial analytics: How to use metrics in the news...
Rob Hammond – 2:00-2:45pm Editorial analytics: How to use metrics in the news...
 
Rachel Rodriguez – Best practices for working with eyewitness media on social...
Rachel Rodriguez – Best practices for working with eyewitness media on social...Rachel Rodriguez – Best practices for working with eyewitness media on social...
Rachel Rodriguez – Best practices for working with eyewitness media on social...
 
Pat Long – 'Spotlight': Why The Times is betting on an editions-based digital...
Pat Long – 'Spotlight': Why The Times is betting on an editions-based digital...Pat Long – 'Spotlight': Why The Times is betting on an editions-based digital...
Pat Long – 'Spotlight': Why The Times is betting on an editions-based digital...
 
Nic Newman – Mobile-first: How people use their smartphone to get news during...
Nic Newman – Mobile-first: How people use their smartphone to get news during...Nic Newman – Mobile-first: How people use their smartphone to get news during...
Nic Newman – Mobile-first: How people use their smartphone to get news during...
 

Kürzlich hochgeladen

9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR
9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR
9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
The political system of the united kingdom
The political system of the united kingdomThe political system of the united kingdom
The political system of the united kingdom
lunadelior
 
THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...
THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...
THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...
Faga1939
 
{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...
{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...
{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...
hyt3577
 
call girls inMahavir Nagar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls inMahavir Nagar  (delhi) call me [🔝9953056974🔝] escort service 24X7call girls inMahavir Nagar  (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls inMahavir Nagar (delhi) call me [🔝9953056974🔝] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Kürzlich hochgeladen (20)

Dubai Call Girls Pinky O525547819 Call Girl's In Dubai
Dubai Call Girls Pinky O525547819 Call Girl's In DubaiDubai Call Girls Pinky O525547819 Call Girl's In Dubai
Dubai Call Girls Pinky O525547819 Call Girl's In Dubai
 
04052024_First India Newspaper Jaipur.pdf
04052024_First India Newspaper Jaipur.pdf04052024_First India Newspaper Jaipur.pdf
04052024_First India Newspaper Jaipur.pdf
 
Job-Oriеntеd Courses That Will Boost Your Career in 2024
Job-Oriеntеd Courses That Will Boost Your Career in 2024Job-Oriеntеd Courses That Will Boost Your Career in 2024
Job-Oriеntеd Courses That Will Boost Your Career in 2024
 
9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR
9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR
9953056974 Call Girls In Pratap Nagar, Escorts (Delhi) NCR
 
Transformative Leadership: N Chandrababu Naidu and TDP's Vision for Innovatio...
Transformative Leadership: N Chandrababu Naidu and TDP's Vision for Innovatio...Transformative Leadership: N Chandrababu Naidu and TDP's Vision for Innovatio...
Transformative Leadership: N Chandrababu Naidu and TDP's Vision for Innovatio...
 
Unveiling the Characteristics of Political Institutions_ A Comprehensive Anal...
Unveiling the Characteristics of Political Institutions_ A Comprehensive Anal...Unveiling the Characteristics of Political Institutions_ A Comprehensive Anal...
Unveiling the Characteristics of Political Institutions_ A Comprehensive Anal...
 
The political system of the united kingdom
The political system of the united kingdomThe political system of the united kingdom
The political system of the united kingdom
 
10052024_First India Newspaper Jaipur.pdf
10052024_First India Newspaper Jaipur.pdf10052024_First India Newspaper Jaipur.pdf
10052024_First India Newspaper Jaipur.pdf
 
05052024_First India Newspaper Jaipur.pdf
05052024_First India Newspaper Jaipur.pdf05052024_First India Newspaper Jaipur.pdf
05052024_First India Newspaper Jaipur.pdf
 
KING VISHNU BHAGWANON KA BHAGWAN PARAMATMONKA PARATOMIC PARAMANU KASARVAMANVA...
KING VISHNU BHAGWANON KA BHAGWAN PARAMATMONKA PARATOMIC PARAMANU KASARVAMANVA...KING VISHNU BHAGWANON KA BHAGWAN PARAMATMONKA PARATOMIC PARAMANU KASARVAMANVA...
KING VISHNU BHAGWANON KA BHAGWAN PARAMATMONKA PARATOMIC PARAMANU KASARVAMANVA...
 
422524114-Patriarchy-Kamla-Bhasin gg.pdf
422524114-Patriarchy-Kamla-Bhasin gg.pdf422524114-Patriarchy-Kamla-Bhasin gg.pdf
422524114-Patriarchy-Kamla-Bhasin gg.pdf
 
THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...
THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...
THE OBSTACLES THAT IMPEDE THE DEVELOPMENT OF BRAZIL IN THE CONTEMPORARY ERA A...
 
America Is the Target; Israel Is the Front Line _ Andy Blumenthal _ The Blogs...
America Is the Target; Israel Is the Front Line _ Andy Blumenthal _ The Blogs...America Is the Target; Israel Is the Front Line _ Andy Blumenthal _ The Blogs...
America Is the Target; Israel Is the Front Line _ Andy Blumenthal _ The Blogs...
 
China's soft power in 21st century .pptx
China's soft power in 21st century   .pptxChina's soft power in 21st century   .pptx
China's soft power in 21st century .pptx
 
*Navigating Electoral Terrain: TDP's Performance under N Chandrababu Naidu's ...
*Navigating Electoral Terrain: TDP's Performance under N Chandrababu Naidu's ...*Navigating Electoral Terrain: TDP's Performance under N Chandrababu Naidu's ...
*Navigating Electoral Terrain: TDP's Performance under N Chandrababu Naidu's ...
 
06052024_First India Newspaper Jaipur.pdf
06052024_First India Newspaper Jaipur.pdf06052024_First India Newspaper Jaipur.pdf
06052024_First India Newspaper Jaipur.pdf
 
{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...
{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...
{Qatar{^🚀^(+971558539980**}})Abortion Pills for Sale in Dubai. .abu dhabi, sh...
 
call girls inMahavir Nagar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls inMahavir Nagar  (delhi) call me [🔝9953056974🔝] escort service 24X7call girls inMahavir Nagar  (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls inMahavir Nagar (delhi) call me [🔝9953056974🔝] escort service 24X7
 
Politician uddhav thackeray biography- Full Details
Politician uddhav thackeray biography- Full DetailsPolitician uddhav thackeray biography- Full Details
Politician uddhav thackeray biography- Full Details
 
declarationleaders_sd_re_greens_theleft_5.pdf
declarationleaders_sd_re_greens_theleft_5.pdfdeclarationleaders_sd_re_greens_theleft_5.pdf
declarationleaders_sd_re_greens_theleft_5.pdf
 

Colleen McEnaney – At our fingertips: Storytelling for mobile

  • 1. Visual Storytelling for Mobile Colleen McEnaney, WSJ Graphics
  • 2.
  • 3. We’re using less interactivity in our interactive graphics
  • 4. Why? Journalistic and technical reasons ● Point out the key pieces of data right away ● Search engines <3 fast-loading pages ● Swiping and scrolling > dropdowns and buttons on a mobile device
  • 5. What are we moving toward? ● More linear, explanatory stories rather than open-ended exploratory ones
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. Resources ● Stories in this presentation: ○ The Guardian’s How did Theresa May’s election gamble fail? ○ WSJ’s How to Make a Call in 2017 ○ WSJ’s Cassini’s Last Dance With Saturn ● More on the conversation about interactivity in graphics: ○ The death of interactive infographics? ○ In Defense of Interactive Graphics ○ Seven Trends in Data Visualization ● Storytelling tools to explore: ○ journalismtools.io ○ SPJ’s Journalist’s Toolbox
  • 13. Thanks! ● Say hello :) ○ @colleenmcenaney ○ colleenmcenaney@gmail.com

Hinweis der Redaktion

  1. Hi, I’m Colleen McEnaney, and I’m a graphics editor at the Wall Street Journal based here in London. I’m a visual journalist and developer who works directly with reporters and editors to tell stories visually. My job involves a mix of data viz, analysis, design and reporting.
  2. I’m going to talk a bit about our shift away from interactivity toward more explanatory data visualizations on mobile, and show some examples of formats that I find particularly compelling.
  3. There’s been a shift away from strictly “exploratory graphics” - ones that let the reader sift through a dataset using dropdowns, search bars and buttons - to more “explanatory graphics” that guide the reader through the key takeaways.
  4. As journalists, our job is to make sense of information and distill it in a way readers can quickly understand. We should point out what’s interesting in the data. Why should they care? How does the data fit into the larger narrative we’re explaining? Search engines are increasingly prioritizing pages with faster load times. More interactivity doesn’t always mean slower page load, but it does mean more time planning and testing to keep performance in check. Dropdowns and buttons can be a pain on a phone. Readers are much more comfortable with an extra swipe or a little more scrolling than an extra button to press or menu item to select.
  5. Linear narratives that make use of swiping, scrolling and other gestures. Here are a few examples of projects that I think do this really well:
  6. The story is set up as a series of “calls” from Joanna Stern, WSJ’s tech columnist. The graphic cleverly uses swiping and menus that look a bit like those of the iPhone to make it feel like the reader is using a phone as they move through the story. Joanna’s audio is played back in HD voice as she explains HD voice and so on, so the reader is given a clear example of each kind of call. Importantly, the option to continue without sound is also given at the beginning.
  7. The navigation is subtle, but clear - just swipe left, then up as the arrows indicate. The graphics take center stage and make full use of the limited space available. There are plenty of annotations to point out what part of the graphics are relevant to the text above.
  8. The graphic guides the reader through the Cassini probe’s key discoveries during its 13-year orbit of Saturn. The background is one fluid animation that illustrates the text as the reader scrolls through. Like the Guardian example, there’s one graphic that makes full use of the space available and is annotated in various ways as the story progresses.