How to leverage interactivity for an engaged audience — TaleJS

A blurred line between storytelling, UX design and game development.

Saif Bhatti
6 min readFeb 26, 2018

--

1) We start with storytelling.

Usually, a story follows a straightforward logical path from inception to midplot to conclusion — except when it doesn’t. Multiple characters, subplots, chained events, changes of perspective and time all lead to complications, namely extension of length and increase in complexity.

“You face exponential growth”

A friend pointed that out to me when I first brought up TaleJS, front-end JavaScript framework for creating interactive stories (which is currently under development).

And he was right. Using Big ‘O’ notation, if you, the author, decided to add k choices with n options to your story, in theory the resulting number of different narratives would be O(n^k).

We are firmly in the red.

To make things more concrete, if you had just 4 binary decisions in the story (meaning n = 2 and k = 4 ), there would be 2 ^ 4 = 8 different paths through root to end node. Duplication can help to reduce this burden significantly, and bring the Big 'O' score down to a more managable number.

Not least of all, often from a reader’s perspective, adding that level of choice results in a fragmented and possibly disjointed reading experience — there’s simply no way to ensure equally fleshing out characters or story arcs over that great a scale unless you’re Christopher Pagoni or George R. R. Martin who’ve penned thousands of pages into intricate stories. There’s also the unintentional bias where the author asserts his own perference for the available choices.

In practice, there is a firm real number of choices the author can provide, which all in turn have their end node or final result. Among these results can be an early termination from the story, if the reader chooses to subject the character into a bad decision which leads to an untimely death. The length of these strands will be shorter than if the character lived in that part of the story.

TaleJS is about striking a balance between interactivity and story deprecation

In reality then, the overall story can be more closely be modelled with a decision tree known as the Fractal tree. Not every path is of equal length, some decisions lead to richer subplots, and the ultimate “ending” or “endings” is given in most scenarios by the longest path from root to end node.

A Fractal tree structure.

Note that in the Fractal tree structure above, some paths through the tree are a lot shorter than others (namely the left side). This is caused by decisions of the story influencing the length — for instance if the choice do you want to jump off the bridge?, the story would terminate earlier if the reader chooses yes over no. The longest path(s) from the root node to the Leaf node — which is a node that does not have a child node, i.e. a terminating node — would be the entire story playing out.

2) Redefining game development.

At what point does the story go from a linear narrative, to a game where the story plays out as the reader or gamer goes through the world? As noted in the intro, it’s a blurred line.

Perhaps the best way to approach it would be by focusing on the benefits of putting the reader into the driver’s seat. TaleJS for storytelling is just the beginning — just imagine the same level of interactivity being applied to scientific articles and company reports?

If you said YES then the following pops up:

Your answer was in line with our findings across a study of 15,000 data points. Here are the results...

If you said NO then the following pops up:

Our data suggests that there is a strong and consistent correlation between child obesity rates in the years 1950-2014. However, you might be interested to note the following caveats about this study...

This level of participation brings the reader into the study, involving them as if a conversation with a peer.

Photo by Vlad Fara on Unsplash

Due to the emotional implication of each choice/action you make, the decisions you make are more likely to stay in your head after you read it

Of course, this all serves to help you internalise the main points of the writing.

It could take superfluous, unengaging scientific material and breathe fresh air into it, driving up scientific literacy rates and allowing for greater involvement in the impact of a story on such a poignant a topic as food packaging and child obesity rates.

Of course, it would not be practical or necessary to do this for every new paper, but for seminal pieces of work which have large stakeholder groups and intended viewerships, like Stanford Prison experiment or a big company’s annual reports?

By deploying the Socratic Method, or reasoning from first Principles as Elon Musk calls it, an article suddenly becomes a literal conversation between the author and reader.

I came up with a simple and elegant interface which put the emphasis not on the background colour or graphics, but the story itself — much like Medium does.

The story opens with a description of the space, and soon is joined by character introductions and a dramatic situation.

At this point, it is clear Jonas is in a dark place and needs the pastor’s help, and you get the sense that the pastor is both aware and attempting to barter for Jonas’ misery.

Also at this point, you as the reader are invited to choose what the pastor wants. This level of interactivity will change the way the story plays out and which part of the Fractal Tree you will end up at.

If you want to continue the story, head over to TaleJS HQ on my website. It’s still a work in progress but in time, I will flesh out the story to an end.

Thank you for reading this article. If you liked this piece, feel free to 👏👏👏 a few times so others can enjoy it too!

Special thanks to for his help with conceptualising the computer science involved and my kind friends for advising (and proofreading) along the way. Special thanks also to for his awesome article on data structures over at , it helped tremendously in developing TaleJS.

Follow me on Medium to be the first to read my stories. 🐉

--

--