What are they?
Interactive stories are narratives that encourage users to interact with them.
This is explorative storytelling that puts our audiences in control. Instead of passive readers, they are active participants — and that participation is great for engagement.
Users can:
- Navigate different sections
- Open drop-down menus (custom builds only)
- Expand pop-up boxes and accordion text
- Play audio and video clips
- Answer multiple-choice questions
- Explore our data on their own terms
Process
Foleon
Custom build
We can create three types of interactive story
1.
INTERACTIVE REPORT
- Created in Foleon
- Multiple pages
- The narrative unfolds as the user navigates around the content
- The act of scrolling reveals animation, audio, video, data viz
- You can incorporate different layers of info using pop-up boxes and sidebars (but not accordion text, because Foleon doesn’t support it)
- You can include interactive data visualisations and basic animation
2.
INTERACTIVE LANDING PAGE
- Created in Foleon
- A single page
- Internal hyperlinks allow the user to jump around the piece
- You can include interactive data visualisations and basic animation
- No accordion text, because Foleon doesn’t support it
- It’s designed to drive users to gated content such as a PDF report
3.
CUSTOM BUILD
- We use an external developer to create something bespoke
- Multiple pages
- It can take any form and you can incorporate any interactive features
- No fixed costs
- The sky’s the limit!
Longitude example:
Longitude example:
How to write interactive stories
1. Get creative
Your structure and what’s possible will depend on whether you are creating an interactive report, an interactive landing page or something bespoke. So have a look at what we’ve done before to get some ideas.
Imagine experiencing your copy online. What would make that experience intuitive and compelling?
And look beyond our work for inspiration. What sort of interactive pieces do you enjoy? What do you like about them?
2. Create layers of content
One of the best things about interactive stories is that we can choose how much of them to consume.
Some people might only want very topline info; others might want to delve deeper. You don’t want to put off the former group by including too much detail, but you also need to give that option to the second group.
So make the most of interactive features such as accordion/expanding text (not available in Foleon), pop-up boxes, internal hyperlinks and interactive data viz. These allow us to ‘hide’ supporting or tangential information from the user to streamline their experience.
3. Write for digital
When it’s time to write, revisit our ‘Writing digital’ guidelines.
These explain why it’s so important to:
- Cut, then cut again
- Use short sentences and paragraphs
- Break up your content into manageable chunks
- Use clear titles, headlines and crossheads (and plenty of them)
- Front-load what’s most important
- Simplify your sentence structure and punctuation
- Use the active voice
Guiding principle: For most online copy, less is more. So distil your material down into what’s most important.
4. Make your title clear and descriptive
The title has to provide enough context for your users (and Google’s algorithms) to know exactly what it’s about.
Example: ‘How to grow tomatoes’ is better than ‘Tomatoes’.
The FT’s ‘How green is your electric vehicle?’ has an excellent title.
Here’s why it works:
- It clearly tells you what to expect from the piece, but it’s not boring
- It’s not boring because it challenges our assumptions — we might assume that all electric vehicles are green, so we are provoked into scrolling down because we are intrigued
- It addresses us directly using the first person, so we become part of the piece instead of a distanced observer
If you do use a more whimsical title (because sometimes it just works), make sure you have a subtitle and/or standfirst that says exactly what the piece is about.
5. Help people to scan
When we consume something on screen, we don’t read every word. We skip around the page, scanning and skimming the words and seeking out signposts that tell us what’s in the copy. We do this to:
- Get the gist without reading
- Confirm that we’re in the right place
- Decide whether to read
- Work out which bits to read in detail
So let’s help our users to scan and skim. Don't ask them to read long continuous blocks of text.
Signposts that help users to scan:
- Meaningful, relevant subheadings — see point 8
- Bullet lists, which you can also use at the start to grab the user by previewing your most interesting findings
- Pullquotes and pullstats
- Bold and/or different-coloured text that highlights important phrases
6. Grab them!
We know our audiences are time-poor and overloaded with content.
Some ways to grab users from the start:
- Ask a question (‘When was the last time you…?’)
- Share a quote from someone influential
- Use an analogy (‘TL is like…’) and try to make it an unusual one
- Open with a shocking statistic
- Communicate the benefit of reading on (‘By the end of this piece, you’ll know…’)
- Make a surprising claim — but make sure you back it up with logic and/or evidence, because we’ll lose credibility if we sound like clickbait
Let’s go back to the FT’s electric vehicle piece. Yes, it contains environmental facts and figures and some data showing why electric cars might be preferable, but this context is way down the scroll — virtually at the end.
Instead, it opens with an immersive simulation that plunges us into the action on a human scale. It’s talking to us on our level — not on the level of global targets or politics.
7. Put your big idea first
Invert the pyramid: instead of recapping in a ‘conclusion’, put your big idea at the start.
The traditional pyramid style starts with the foundation and gradually builds to the conclusion. We know that online users don’t consume content that way, so we have to swap it round and invert the pyramid in the way that news articles do.
Remember that you can also consider using bullet lists at the start of your piece to summarise your most important findings.
8. Get your headings right
Like your title, your section heads and crossheads should tell us what we’re about to read. They are entry points into your text, and help us decide whether to read it.
Resist wordplay such as puns, metaphors and analogies. Your headings should make sense out of context and contain keywords related to your topic.
Example: ‘Agile and entrepreneurial’ is meaningless without any context, and it gives Google no idea what the page is about for SEO purposes. Try to be more specific: ‘Today’s CFO has to be agile and entrepreneurial.’
Like other headings, you can use your chart headings to give skim-readers nuggets of information. So make them meaningful statements that sum up the chart’s most interesting datapoint: ‘US firms are spending more on AI than on new talent’, for example.
Try this test: Imagine there’s no text, only headings. Do they tell your story?
9. Consider the haphazard user
People don’t always experience web texts in the traditional linear way. You don’t know where your users have come from or whether they’ve dropped into your piece halfway through.
What this means:
- They need regular, useful headings that tell them what they’re reading
- Use hyperlinks in the text to link to definitions of your terms, such as in this Matrixport example, so a user who joins midway through can get up to speed; pop-up boxes can also help here
- They might have missed the fact that Jane Smith is the CEO of Acme Industries because you provided it once, at the top of section 1, so you’ll need to provide Jane’s details more than usual — use your judgement here
- You should spell out unusual acronyms for the same reason: your users might have missed the definition — again, use your judgement
10. Think: what does your audience need to see?
For instance, you don’t need to provide the question number on your charts — it’s irrelevant to them. Ideally, you would also get rid of the question itself, because your chart heading is so clear and explanatory that it’s unnecessary.
And pare back the amount of data on your charts: do you need all the answers/rows to tell your story, or can you chop it down to the top three? Unnecessary data will look messier, take away from your story, and overwhelm your users.
11. Don’t forget the call to action
What does your client want your piece to achieve in terms of engagement?
Including the call to action (CTA) — or more than one — shows your client that you're thinking about their commercial aims.
But keep in mind that a CTA doesn’t have to be dry and dull. Try changing it up. Examples: ‘get involved’ or ‘see how you benefit’.
How to be a good partner to the design team
Here’s how to prepare your scripts for design:
1.
Remove any comments and track changes from the script.
2.
Use square brackets for any text that shouldn’t be included in the document. You can use this text to tell the design team what is:
- The title
- The subtitle
- A standfirst
- A top-level/section heading and lower-level headings (if it’s complicated, you can use an A/B/C system to show the hierarchy of headings)
- A boxout/sidebar
- A call to action
3.
Format your footnotes consistently, or if you’re using hyperlinks place them on the right text.
4.
Suggest pullquotes and pullstats using comments in the Word file. It’s a good idea to format these correctly in your comment box — i.e. put the name and job title underneath the full quote.
5.
Provide a clean, proofread data sheet, which could be linked from the charts in the Word file. Make sure that the design team knows exactly where the data is for each chart.
6.
Charts should have only the key storyline data included. Make sure the data sheet matches this and the labels have been proofread.
7.
Designers should not be rekeying/typing any words, because that’s how errors creep in. So don’t just provide screenshots/images of your charts or tables — make sure they can just copy and paste the text from the data sheet.
Real thought leadership.
Head office FT Longitude
For brands with big ideas.
© Longitude Research Ltd | Privacy Policy | Cookie Policy | Tax Policy
Bracken House 1 Friday Street London EC4M 9BT
