Stories and the Web
A talk given at the Material 2017 conference in Reykjavik, August 2017. Video of the talk is on YouTube.
Introduction
Stories have form and structure. Beginnings, middles and endings. People, places and things. Setbacks, climaxes and conflict. And the web has form and structure. Sites, pages & links. Interactivity, personalisation and adaptation.
I’ll look at how stories and the web can interconnect and overlap in forms and structure, showing examples of some of the new ways that people are telling stories using the web. From choosing your level of detail, varying the length, personalising a story and interacting with explanations, to the latest BBC experiments with voice-controlled stories and atomised news.
And I’ll explain how the BBC is experimenting with atomising media and deconstructing stories into fundamental building blocks that we can present in new and powerful ways; building responsive stories for the web.
News, History, Myth, Fiction
Stories are found in all forms of human creativity, from art to music to film to literature to video games. In this talk I mean stories in this broad sense, they can be news, history, myths or fiction.
And stories can be for information, education or entertainment. Which incidentally is the BBC’s mission statement…since 1922!
The web
Some basics. What can you do with the web as a form of media? What are some of its structures and forms? Here are some characteristics that I think are particularly relevant. I know these might be a bit obvious, bear with me.
Universal — The web is universal. Available to everybody, whenever and wherever. Anybody can create and publish things there. You can publish in whatever form you like, using whatever media you like.
Programmable — The web runs on computers so programmability lets you create and change media & how it’s presented. You can give the user control and make things interactive or you can adapt it to people.
Non-linear — The web’s not just one thing after another, it’s non-linear. On the web things can be broken up, reordered, expanded, compressed and defined.
Interconnected — Obviously. Links make the web.
Structured — The web has its own form and structure. Everything on it is made up of markup, paragraphs, images, pages, sites and links. All readable by humans and computers.
Stories
Stories can be said to have some similar characteristics.
Universal — They’re universal. The best stories speak to many, diverse groups of people.
Changeable — Stories change depending on who’s telling it. The storyteller might change the story to their perspective or values, or they might adapt it to their audience. Stories also mutate over time.
Interconnected — In fiction there are connections to other stories through references, spin-offs & adaptations. And in the real world, almost everything is interconnected anyway.
Structured — …
A detour into story structure
This fascinates me, so here is a bit of a detour into the structures of stories…
Newspaper articles have a long-standing structure, known as the “inverted pyramid”. The lead, at the top, gives the most newsworthy information. Who, when, where, what, why and how. The body then gives more details. And the tail gives more context and background info. This came from printed newspapers where editors sometimes needed to cut the length of stories to fit the layout. Having this structure meant they could just cut it back from the bottom without losing vital information. It also means that the reader gets the most vital information first.
Over the history of storytelling many new forms, structures, techniques and conventions have emerged. Poetry has haiku, iambic pentameter and sonnets. Literature has novels & short stories. Plays have acts and scenes. Writers use first-person or third-person narrators, who might be reliable or unreliable. Or the common storytelling tropes that you find in all TV series and movies. Many different patterns and structures exist in stories.
Stories can also be said to have shapes.
This is the classic 5 act structure of Exposition, Rising Action to the Climax, Falling Action, and then the Denouement or Resolution.
I’ve been collecting drawings, diagrams and shapes of stories for a while.
You might have seen xkcd’s movie charts showing the groups of characters and their journeys in Lord of the Rings, Star Wars. There’s even a github project to make your own.
And this is Kurt Vonnegut’s graph of the story of Cinderella.
Anyway, detour over…
Interconnections
What do we get if we put some of those characteristics of the web together with stories? Where might we find interesting interconnections and new things? I’m going to do a quick tour through some things I like on the web, and some things that BBC R&D has built.
Controllable
Using the web we can give users some control over how they experience a story. It could be just clicking links and falling down the wikipedia rabbit hole. Or this guide to blockchain technology that lets you choose your own level of detail. Or this choose-your-own-adventure telling of a bird’s experience of a city. Or even an interactive voice-controlled story like this that my team at BBC R&D is building right now.
Personal
What if we want to make stories more personal? Things that adapt to you and your needs? We can do that with the web too. We don’t even have to ask anything, your browser probably already knows quite a lot; where you are, what device you’re using, what sites you’ve visited…
At it’s simplest this could be something like a responsive web design that chooses the best layout for your screensize. Or my friend, Frankie, made this responsive text prototype, where the layout AND the words change.
My BBC colleague, Ian Forrester, uses the term “perceptive media” to describe stories that adapt to something about you, to make the story more compelling or engaging. His first example was a radio drama that features a talking lift (conveniently with a machine-generated voice that Ian could program) that drops in facts about where you are right now to make the story feel a little bit closer to home.
And for TV he developed a short film that changes to suit your preferences and personality, it has a personalised soundtrack and does adaptive colour grading of the film. All in the browser.
And, lastly, another BBC R&D project called CAKE which is a TV cooking show that adapts itself to your skills and how much time you’ve got available.
Programmable
We can use more explicitly programmatic things on the web to help tell stories. I particularly like Bret Victor’s explorable explanations concept.
What if a book didn’t just give you old facts, but gave you the tools to discover those ideas for yourself, and invent new ideas?
There’s a simple example here in an article about entrance fees for parks. You can change some of the variables, like the proposed entry charge, and see what the results are in real-time, in the article.
Nicky Case is a developer/designer who makes lots of lovely interactive guides like this. Rather than trying to explain predator/prey relationships in words, Loopy is a tool that lets you explore feedback loops. More foxes mean fewer rabbits, means fewer foxes, means more rabbits etc.
The latest thing from Nicky is also great, it brilliantly explains trust, game theory and the prisoners dilemma.
Non-linear
On the web things can be broken up, reordered, expanded, compressed or defined. And, of course, you can link and connect things together, wherever they are.
…think of hypermedia as a collection of elastic messages that can stretch and shrink in accordance with the reader’s actions. Ideas can be opened and analysed at multiple levels of detail.
Nicholas Negroponte, MIT, Being Digital, 1995
Think back to that news pyramid. What if you don’t need the contextual background information because you’ve been following the story? Or what if you want bits of the story to come from a different news source? On the web we can let people choose which bits they want to see, or where they want them from.
Circa was a news app from a few years ago which was built in chunks or “atoms” and used them to present stories as updates, facts and quotes. It would track a reader’s progress and avoid showing them bits they’d already seen. Vox does a related thing with it’s reusable fact cards.
This browser plug-in from Bloomberg sits on top of the web and presents business data about companies and people that feature in the story you’re currently reading
In our BBC pilot of “Atomised News” you can skim the spine of the story, which might be enough, or you can dive into the bits that interest you. It even provides pop-up definitions of possibly unfamiliar terms or events. It was designed for younger audiences who show these behaviours of skimming and digging, and sometimes find it difficult to follow our news stories because they lack some assumed background knowledge.
To recap, we can use the web to make stories that are controllable, personal, programmable and non-linear. There are many different ways people are telling stories using the materials of the web and these are just some of my favourites.
But earlier I also mentioned structure, what about that?
Structured and atomised stories
One of the things all of these forms and experiences have in common is that they’re not just one big lump of story, they’re all made up of smaller parts, with actions or links or branches joining them together. This is the most important principle we’re using at BBC R&D in our work. Atomising and structuring our stories.
As you may know, good web design and software development practice aims to create self-contained components; see the atomic design movement or object-oriented programming. These use split their systems down into objects or atoms that can be re-used in different places. This helps with efficiency & re-use, consistency & simplicity. Can we do this with stories?
A data model for stories
If you look at the structures and shapes of stories I mentioned earlier and you’re an information architect or an engineer, and you love the web, then you might be tempted to try to model the data structure of stories.
At the BBC we’ve done some work on modelling news stories and fiction. Here you can see the simplified model for fiction:
Stories are made up of things that happen — the events. These are portrayed as scenes in TV or radio dramas.
Stories might have multiple storylines.
The events feature people and happen in places.
And people can have relationships with other people or groups.
It’s obviously more complicated than this, but it broadly models both fictional and factual stories. All of what we’ve thrown at it anyway.
Atomised media
At the BBC we call this “object-based” or “atomised” media. By deconstructing our stories into fundamental, structured atoms and fitting those atoms to a data model we create re-usable bits of stories that we know when and how to use, and then can put together again in different ways.
There might be an atom for each event or each character in a story. And that atom might be represented in different ways — as a text description or as video. By labelling each atom with data, computers can understand where they fit and do appropriate things with them.
Atomised media gives us the ability to adapt our stories to different screens, platforms, contexts and experiences — putting bits in or pulling bits out and rendering in different ways. Making the stories suitable for phones, tablets, watches, TVs, voice interfaces or artificial intelligences.
We can put these atoms back together in different ways — for interactivity, adaptation, giving control — all the things I’ve just talked about.
And there are always more and more new things, devices, platforms and places to get stories. From Google AMP to Facebook Instant Stories, from Line to Vine, from chatbots to Snapchat. Rather than create more and more stuff for each of these new platforms piecemeal, if we atomised our stories into small, reusable pieces then we can efficiently use them again and again on whatever’s next.
So I think, particularly for large media organisations, this makes atomised media very powerful.
You can read more about atoms and structured stories in another of my talks — https://medium.com/@tristanf/designing-structured-stories-526277fe7a16.
Three lessons
Here are three lessons I’ve learnt in my work on stories and the web.
1. Tools shape the stories — the tools of your craft or trade will go a lot of the way to defining what you make. So your CMS or word processor or video editor or programming language may restrict, define and even inspire what you create.
2. Constraints inspire creativity — because constraints can be good and a source of creativity and freedom can sometimes be paralysing. Don’t start with big blank canvas like “the future of storytelling”, find a project brief or a starting point or a problem someone has.
3. Work in cross-discipline teams — filmmakers, journalists & writers understand how to tell stories. Technologists understand what is possible to build (and can build it). Designers understand how to create the best thing for the user. The best, most interesting work I’ve done has been with these three kinds of people. And ideally, people will have bits of other skills as well, and have empathy for how the others work.
The end
Last thing. Right now I’m starting a project to develop new forms of stories for news on the web — where I think there’s surprisingly little innovation. I’m collecting examples that use the affordances of digital to tell news stories. Do get in touch if you have favourites in this area.
There’s also lots I haven’t talked about that the web enables. What’s fake and what’s real, collaboration and communities… and I don’t think we’re anywhere near the potential of what we can do with our stories using the material of the web.
Thank you.
Thanks to Brian and Joschi for letting me speak at the conference and the team at BBC R&D whose work I featured.
