Related posts:

Meet Aristotle


Back in the day (300 BC), the famous Greek philosopher Aristotle decided to write a piece called ‘Poetics’ where he explained his beliefs on poetics. In this essay, he outlined the framework of famous Greek tragedies and from this extrapolated the basic structure of a good story. And it’s this structure that has been used ever since in millions of books, movies and other storytelling products. So I thought: why not use it for interactive products? But it wasn’t as simple as I thought. When exploring Aristotle’s ‘Poetics’ I came across many different interpretations and translations of his work. Some described seven elements, most others outlined six. When looking at the descriptions of these elements, I also discovered that people interpreted his elements in many different ways. One of the better translations of his work is S.H. Butcher’s translation, describing six elements: plot, character, thought, diction, song and spectacle. This formed the foundation of my framework, but I did make some changes:

  • ‘thought’ became ‘theme’ – it basically describes the same thing, but is easier to interpret;
  • ‘song’ became ‘melody’ for the same reason as above;
  • plus I added ‘decor’ as the part that graphically files in the chosen theme.

Before jumping into the framework, I must note that there have been others that used Aristotle’s thoughts on digital products. Of these the most interesting must be Brenda Laurel, who used it in her book ‘Computers as Theatre.’ In this book she links Aristotle’s work to human-computer interaction on a more abstract level.

The Framework

So let’s get started. I already mentioned the different elements that we have in our framework:

  1. Plot
  2. Character
  3. Theme
  4. Diction
  5. Melody
  6. Decor
  7. Spectacle

As you can see they are numbered. The reason is that Aristotle rightly believed that there was a certain hierarchy when setting up a good story. According to him plot was the absolute key, character came close behind and the rest would follow. This is an interesting thought and overall I agree with him, but in my mind there is a better structure to be made, and this is it:

For me both plot and character form the core of the story (read: product) you create. They are created at the same moment, both elements need the other to be created and they directly influence each other. As soon as these are set you can create an overall theme. There can be multiple themes (resulting in multiple products) create on the plot/character base. After this you start filling in the details by defining diction, melody, decor and spectacle. Let’s dive into each element.

The elements

Now I will explain each element and it’s importance in storytelling. Since examples work the best I will relate each element to the (brilliant) movie Big Fish (2003) directed by Tim Burton. After that I will show the relationship with interactive design.

1. PLOT The first step in the process is to define the plot, which is the basic storyline in a play, book, movie, song or, in our case, an interactive product. According to Aristotle it should “arouse emotion in the psyche of the audience. [...] A plot tells of a change in fortune that happens to a character. The only kinds of change, he says, are from good fortune to bad, or bad to good.” (source: Wikipedia) It’s really important to understand that it’s the absolute basic storyline, there isn’t any setting defined yet. There is a handful of plots that have been used over and over throughout the ages, like battle stories (former soldier wants to take revenge, has difficult moments but eventually prevails) and romantic stories (woman doesn’t like a guy at first but through strange events they keep bumping into each other and in the end fall in love).

Big Fish’s plot This story follows a dying father and his son. Throughout his lifetime, the son has heard many different myths told by his father, causing him to have difficulty determining what was true or not about his father’s life. So the son decides to look back on his father’s life and find out what was the real story. By the end of the movie, he begins to understand who his father really was.

An interactive product’s plot The most important thing an interactive product should have is focus: What is the goal of this interactive product? This goal combined with the road towards it is an interactive product’s plot. By defining it at the start of a project it will help you keep a clear focus throughout the design process and helps to decide the outcome of the other elements. For example, the plot of most travel websites is something like this: “John is looking for the best possible holiday location but has difficulties making up his mind. When visiting website x he’ll find out what are the best spots and in the end he makes his choice and books a holiday.” Interactive product plot = goal of the interactive product + its road to get there

2. CHARACTER As soon as you have defined the plot you start working on the characters. These are the personalities that play a central role in the story. These can be people, animals or even objects. The primary characters are the “heroes of the story whose actions determine the plot of the story. Secondary characters have supporting roles to provide the main characters with information, material goods, services or whatever is needed in order to advance the plot.” (source: Narrati)

Big Fish characters The primary character in the story is Ed Bloom (both as a junior and a senior). Most of the story revolves around him. Next to him there are many secondary characters that play around him, like his son Will Bloom (who is both a character and the narrator of the story), Karl the Giant and the witch.

An interactive product’s characters The first obvious answer to an interactive product’s characters are the users. They are very important. But another important character is the brand behind the interactive product. They also have an important role to play as they engage with the user. In social median interactive products it is a bit different, there the relationship between users is more important. So the second step in the process is to define who your target audience is and what the brand personality behind the interactive product is. These will form the characters that will engage in the story.

Interactive product characters = users + brand

3. THEME Theme (or setting) “refers to the set of locations where the story takes place as well as the history, geography and the laws of nature of the world in which the story takes place.” (source: Narrati) It has great influence on the way the plot is perceived and makes it possible to reuse a plot. Imagine a love story that takes place in an American city with e-mail as a central theme (“You’ve Got Mail”), the Second World War (“Pearl Harbour”) or a Celtic story (“Tristan & Isolde”.)

Big Fish’s theme The movie mainly takes place in a magical, but still realistic world. Things that happen seem to be a bit odd, but you can never say something didn’t happen. The physics of the world are therefore realistic. It’s a very colourful and energetic world.

An interactive product’s themeAfter defining the plot and characters of an interactive product, you should define the theme of your interactive product. I see this as the concept behind the site. This is a more challenging element, since it will be what can differentiate your product from competitors. Most travel websites will have the same basic plot and the same characters, so how will your interactive product make a difference? In the concept (theme) phase you will have to come up with a world that is so appealing to it’s characters that users want to use your product over your competitors’.

Same plot, different theme - Hungry Suitcase &

So an interactive product’s theme is the concept

4. DICTION Diction refers to the choice of words in a story. These are the conversations between the characters, but also the narrator’s dialog. This is important for building the characters in a story.

Big Fish’s diction In the movie there is dialog between Ed Bloom and the people he encounters that give life to the characters. You notice that Ed Bloom is sometimes surprised by what happens in his journey, but he is never annoyed. His conversations with his son and the presence of his son as the narrator of the story illustrate their special father and son bond.

An interactive product’s diction In what way does the interactive product talk to the user? Does it use formal speech or is it very relaxed? Does it talk to you in an authoritative and helpful voice? Is it challenging or maybe even making fun of you? The tone-of-voice (and thus it’s copy) of an interactive product is really important. The choice of short copy and/or long copy influences the way it’s perceived. Should a travel site talk to you in a personal way and give advise like it’s a friend? Or would it talk very functionally and robotic?

So an interactive product’s diction is its copy

5. MELODY A melody is “a linear succession of musical tones which is perceived as a single entity.” (source: Wikipedia) It is something that becomes recognizable, it is in fact a pattern. In movies this is often translated into music, like the enigmatic sound you hear in the Jaws movies when something seems to happen. The moment you hear this sound you know trouble is in the air and cold sweat starts to appear.

Big Fish’s melody Throughout the movie you constantly see Edward Bloom get in situations that you wouldn’t believe to be true, but over and over again you are pulled into this magical world and find out that things are real. This recurring event is the melody of Big Fish. “Big Fish is about what’s real and what’s fantastic, what’s true and what’s not true, what’s partially true and how, in the end, it’s all true.” – Tim Burton

An interactive product’s melody The melody in this case isn’t audio-based, but it is the complete set of patterns and the structure of the product. Having a melody forces you to have a logical base that users recognize, by using it often or because it is used in similar other products. In the case of the holiday website a common pattern is the use of filtering on result pages. Usually these are placed on the left and users expect this kind of interaction to be there and immediately understand what to do with it. An interactive product’s melody are the design patterns

6. DECOR The decor is the design of the locations in which the story takes place. Even with the plot and setting defined you can have many different decors. You can have a very detailed one where you get the feeling of a rich and energetic world (“Lord of the Rings”.) It can look raw and comic-like (“Sin City”), but it can also focus mainly on the characters and leave the rest away.

Big Fish’s decor The decor in Big Fish is very detailed. You get the feeling of a magical world, almost a fairy tail. There is always more behind the horizon. It’s also very colorful, which gives a certain energy and affection to the created world.

An interactive product’s decor The decor of an interactive product is its graphic design (art direction). After having defined the plot, characters and setting you can still have a wide choice in decor. Will the site look very modern, simplistic and to-the-point or is it very detailed? Should it feel like there is always more to explore or does it have a classical setup? The decor puts emphasis on the setting.

So an interactive product’s decor is the graphic design

7. SPECTACLE The spectacle is “an event that is memorable for the appearance it creates” (source: Wikipedia). It is something to be remembered, that makes a real impact on you. According to Aristotle you shouldn’t let a spectacle control the story, the main structure of a story should be solid enough to hold on its own. It’s interesting to note that a lot of Hollywood movies actually lay their focus on spectacle above plot.

Big Fish’s spectacle Movie spoiler alert. The biggest spectacle of Big Fish is at the end. At the funeral of Ed Bloom you discover that all the fairy tales were in fact true and that the people are real. This is something you will remember and talk about at the end of the movie.

An interactive product’s spectacleThese are the features of the interactive product. The stuff people talk about when they are not on your site. It’s that way of browsing that’s so special or the unexpected gift you received. A good example here is, where Little Moo sends you e-mails about the progress of your order. Or the monkey in Mailchimp that shows you how wide your newsletter should be (he breaks his arm when its too wide).

MailChimp's way of showing the maximum width of an e-mail

So a website’s spectacle are its special features

The importance of the elements

I hope I’ve explained each element well. What’s important to know is that by setting up your story step by step you’ll create a great foundation. Each element is dependent on the elements above it, so by building up your story you’ll make sure your product will be solid. Too often you see teams starting with the cool features (spectacle) or by starting with the design (decor), which results in a good looking site that nobody will use. It’s best to remember this: there are more ugly looking sites with great content being used then good looking sites with bad content. By defining these seven elements in order, you will be able to ensure your product has a great story to tell.

Jeroen van Geel

Jeroen van Geel is founder/chief kahuna of Johnny Holland and the interaction director at Fabrique [brands, design & interaction], a Dutch multidisciplinary design agency. You can follow him on Twitter via @jeroenvangeel.

10 comments on this article

  1. Wonderfullly ambitious. Great post Jeroen!

  2. Mide on

    Well done Jeroen!
    Very thoughtful and insightful piece. This is a very clever approach to interactive design/development. It will definitely make creating RIAs less of a hit or miss process. Now you have very clear guidelines.

  3. Well done, Jeroen!

    Nice read, good analogies, although I absolutely not agree with changing song to just melody! I like the #musicthinking of Aristotle.

    From a storytelling point of view I also like the 3 step approach of Pixar:
    Character, Story, World. Looks more integrated to me.

  4. Ashley on

    Great post! As someone with a background in theater, this is very insightful for me. It will make me look at interactive products in a new way. I think your article is also a great tool to work with corporate business partners to explain that excellent products are ones that tell a story – that have a background. It isn’t just the spectacle or decor that makes a website or a product great – it is about the whole story.

  5. Pingback: Aristotle’s Storytelling Framework for Interactive Products « What I think

  6. Pingback: Modelo narrativo de Aristóteles aplicado a produtos interativos « Jornalismo Multimídia

  7. Zack263 on

    Very enjoyable article to read! Now to improve my story telling.

  8. Bhakti on

    This is an awesome article! You did a great job telling the story about story telling… Examples played good role in clarifying the point you were trying to make!

  9. Frank Simurina on

    A brilliant adoption of Aristotle’s Storytelling.

  10. Anthony Metivier on

    Great thinking here, Jeroen.

    I wonder how recent thinkers of plot could contribute here. For instance, John Truby talks about the conflict between a protagonist’s conscious desire and unconscious need, something that pre-exists the dilemma. Another fascinating element is the so-called “visit to the underworld” which precedes the battle/climax. This is where the character sees or understands the consequences of not having a self-revelation and overcoming the force operating against him (assuming the story is not a tragedy …)