Facing interactivity, a personal reflection: what is next?

During the last few weeks I focused on the interactive practices on the Media. I wanted to know what is happening at this moment, and which tools are popular among journalists.

With the aim of grabbing some ideas and increasing my knowledge on this field, I followed those people and companies who are working on interactivity throughout Twitter and websites.



I also tested some tools by myself: CartoDB, StoryMap JS etc. Some time ago, getting interactivity was something extremely hard for those who were not ‘hackers’ (programmers).

Thanks god, a lot of good samaritans have created powerful and efficient apps which make it much easier than it was.

Despite all these miraculous things, we cannot forget the fundamentals: HTML, CSS and Javascript. Journalists cannot avoid to learn some coding as professor Jeremy Rue said before.

I have checked out some handbooks and websites which let you learn a little bit of this huge universe.

Learning to use space and time in an interactive way

One of the biggest problems as researcher is to know what you are looking for. A lot of things nowadays are considered as “interactive”: social media, feedback, animations, maps, timelines or quizzes are all different aspects of engaging people.

From my perspective, I was not sure about what things I should focus on. So I started with those contents that people normally see on digital newspapers today: maps and timelines.

I started having a look to journalist Alex Gamela’s blog in which I have found some interesting things related to interactivity, but also extra information about timelines. Alex, who is a former student of online journalism at Birmingham City University, had runned a project on timelines in 2010.

He commented some of the main editing tools who were in use at that time. This reading inspired me to figure out which apps are the most popular in 2015.

After publishing the post, I initiated a debate in Twitter to know if journalists normally use the same tools I had mentioned.I did the same with those tools to create maps. At this point, I realised that I would need some extra knowledge on Javascripts and geolocation. With the video below, I tried to explain a bit of this process.

Therefore, I used Open refine, which helps to clean data, in order to use Google Fusion Tables or Carto DB.

Code is unavoidable, but I found JQuery better than Javascript

Prior to this project, I had already had some knowledge on HTML and CSS languages, but I really did not know anything about Javascript. It was the next level.

First at all, I started to check out books like “Javascript in 24 hours” or “Javascript: the definitive guide”, and also doing some free courses on Code School and Code Academy, following journalist Jeremy Rue’s tips:

“Many people often fail to advanced past this point because they find difficulty in applying the lessons to real-world projects. It’s important to have something tangible to build and working toward that goal — and Googling questions often.”

This language is always a challenge. That is the reason I also tried JQuery, whereby I could aproach to coding in a easier way. According to Wikipedia, JQuery works as a “library of pre-written JavaScript which allows for easier development of JavaScript-based applications.”

 Upcoming project: Birmingham24, 24 issues in 24 hours

The good practises I have checked out encourage me to build an interactive story with multimedia contents in which I could put the theory unto practice. Honestly, there are many things related to code I still have to learn. After the first steps on the field, it is time to go further and try to do more complex things.

As my MA award leader Paul Bradshaw suggested, the upcoming elections are a very good opportunity to explore and do something great. In this case, young voters (18-24 years old) could be the perfect public, trying to create a story through 24 issues related to futures policies which will affect youngsters.





3 Interactive Stories In Which You Scroll Down

Through scrolling the user can start a lot of animations and processes which turn a simple story into a deeper journey. Surprises are always a good resource to keep people’s attention on you are showing. You also must remember that you only have 15 seconds to engage them.

Journalist and lecturer Jeremy Rue usually shares interesting links on interactivity using Delicious -you can follow his queue here-. I have picked up three samples which show the importance of scrolling inside the story.


CLICK HERE TO WATCH: Waiting for the sea

Waiting for the sea (BBC, 2015)

Users discover new multimedia contents each time they scroll down. The author, Rustam Qobil, finds harmony using pictures, text, video and maps. Everything here is linked toguether.

I really like how the maps reveal the grass drying up, and the sea’s edge disappearing.

CLICK HERE TO WATCH: America: Elect!


America: Elect! (The Guardian, 2012)

I admit I love cartoons and comic books. But going further, I see a lot of opportunities using such narrative in journalism.

In this case, the story combines animations, infografics and a bit of humour as well, telling a story from the beginning (Republican Party presidential primaries, won by Mitt Romney) till the end (Obama’s 2012 US election victory).

The Guardian United States interactive team have produced a lot of great news packages –you can follow them here-.

CLICK HERE TO WATCH: A Walk Through the Gallery


A Walk Through the Gallery (The New York Times, 2015)

You can take a walk at the Museum of Modern Art in New York to visit an exhibition of Henri Matisse. You see the paintings like a real visitor, moving across the gallery horizontally.

Although this idea looks very simple, I believe that it could be used not only to show exhibitions or places, but also to describe processes and evolutions.


StoryMap JS brings interactivity for anyone

Few days ago, we talked about Timeline JS as simple but powerfull tool to create interactive timelines. Its brother, StoryMap JS, also offers a strong experience, in which users immerse themselves whitin the story.

Journalist Thierry Labro from the Luxemburger Wort told me that his diary has recently used this tool for the first time ever (click on it to watch):



Unless you do not have any knowledge on Javascript, you can get interactivity for your content indeed. By the way, here three big reasons to use StoryMap JS:

1. The interface is so simple

Interface is like the simplest version of any editor. It displays ‘edit’ and ‘preview’ modes. You can go across the different slides of your piece.

2. Adding multimedia content is easy

Each slide is based in one picture. Next to this, you can show multimedia content, throughout an html box.


3. You can embed your work

After finishing, you can post your work on any site you wise, but remember that you must use WordPress.org user to embed its iframe code -it’s my case-.

This tutorial can make your first steps whith this tool easier:

Top Simple Tools for Journalists to Create Interactive Timelines

Stories talk about an specific time. Luckily, today you can create your own timelines which support your content. Showing a story across the time enlights audience about previous facts, which are very necessary to understand what is going on now.

Thus, timelines are one of the ways to get interactivity. Your public can go back and go forward and enjoy multimedia content in each event. By the way, these are the easiest but useful tools to make it possible: Timeline JS, Timetoast and Timeglider.

 1. Timeline JS

The most complete of them: it is free, powerful, clear. Using a simple spreadsheet you can put into the cells olaoladifferent multimedia stuff, as well as you can curate content from the social networks. It has been used by companies as Al Jazeera, Le Monde or TIME magazine.

 2. Timetoast

Its minimum cost is $5,99/month, but the truth is that you are paying easiness. Forget the spreadsheets, you can add timetoastevents directly. It is also perfect to work in group: can be used by five accounts and more. People can also comment in the own timeline.

 3. Dipity

You can customise four types of presentations (Timeline, flipbook, map and list), sizes and colours, and get the RSS dipityfeed as well. It is not as elegant as Timeline JS, but it is enough for assingments and other uses.

6 Important Aspects of Interactivity in Journalism

As storyteller, journalist or whatever, you note the importance of knowing a set of new techniques which can improve your contents, making them interactive.

You also see the rise of this demand among customers.  In some way, everything can be considered as interactive -you may say, and you are right-. The correct expression would be “as interactive as possible”.

At this point, the good news is you do not need to be an Alan Turing, and troughout “democratic” easy tools you can change your stuff completely –you can find some of them here-, making it exlusive. Certainly, it takes time, but can be the difference between you and your competition.

 McAdams’ planning stages of an interactive story

Regarding McAdams (2005), interactivity depends on the following planning stages, which help to sort the different aspects of interactivity indeed.

  1. Feedback from the audience: Comments, discussions among users, responds from the author or adding new topics to discuss.
  2. Adaptivity of Modifiability: Updates, corrections or links.
  3. Control: Linearity or non linearity, changing sizes, pausing and playing multimedia content or marking anctf specific place.
  4. Choices: Own paths, adding context or accessing original documents.
  5. Communication: Social media buttons or “email me”.
  6. Responsiveness: Customised presentations and settings which let readers get what they want, interfaces which response to user’s actions or personalised scripts.

You note that McAdams book was published in 2005, but its principles are still suitable to understand what you need to engage people.