What is Interactive Storytelling?
“Interactive storytelling is the art of telling stories enhanced with technological, social or collaborative interactive features to offer content adapted to new behaviors in a rapidly changing cultural ecosystem.”
Benjamin Hoguet (via Medium)
I asked around the office for some examples of our team’s favourites and here’s a selection from the responses:
Land of the Magic Flute
This incredible re-imagining of Wolfgang Amadeus Mozart’s legendary two-act opera “The Magic Flute” is a project by Dutch director Fons Schiedon, working with the Bregenzer Festspiele and the Interactive Media Foundation.
It offers a clever combination of illustration presented in a multi tile, storyboardesque format, with background sounds and music. At pivotal moments in the story, the related movement of Mozart’s work is played.
I lost 45 minutes of my day to this story; and it was worth every second.
Site: http://www.landofthemagicflute.com/
Technologies: Flash / JavaScript
The Boat
Nam Le’s acclaimed short story The Boat tells the plights of groups of people forced to flee the Vietnam War by boat. This tale of basic survival feels especially relevant in the current climate of asylum seekers risking their lives to flee their countries.
It’s an intense visual experience but in my opinion what sets this story apart is the intense soundscape. With a good audio system this story is truly immersive and translates into a fully captivating experience.
Site: http://www.sbs.com.au/theboat/
Technologies: AngularJS / GSAP / YouTube Video Embeds
Peugeot HYbrid4 presents : The hybrid graphic novel
I think this is a good example of branded content finding it’s way into the visual storytelling universe.
The basic premise is a story of a hero who is about to “embark on a challenging mission to capture confidential data and get away safely.”
As you scroll you receive another illustrated, storyboard style horizontal and vertical scroller. Periodically the piece introduces the different features of Peugeot’s HYbrid4 technology.
Technologies: JavaScript / CSS
The Guardian: Digital Deadly Sins
Seven Digital Deadly Sins from The Guardian examines video and written accounts of the many sins associated with the use of modern social and digital tools. The stories are presented as video confessions and written / illustrated stories.
“Turn up your sound. Watch. Read. Participate. Share.” This is how this interactive project reels its viewers in from the outset.
The project seeks active participation from the audience by inviting the viewer to cast judgement on the sin by absolving or condemning the sin. Results are then returned with a simple data visualisation and an invitation to share.
Site: http://digital-deadly-sins.theguardian.com/
Technologies: Hammer.js, GSAP, jQuery
Kenny and Oswald
Combining original video footage with omni-directional image scrolling, text and immersive piano based music, National Geographic’s “Kenny and Oswald” was launched the 50th anniversary of the assassination of JFK.
The presentation splits the browser screen to simultaneously tell the stories of Lee Harvey Oswald and JFK until their fates converge on that infamous day. This multi-timeline approach is fascinating and presents using a symmetry that really satisfies your inner OCD.
Site: http://kennedyandoswald.com/
Technologies: Ruby, Handlebars, VideoJS, jQuery
Museum of Mario
Built by the HTML5 Hub community, led by Kyle Simpson, Museum of Mario dutifully recreates the nostalgic game experience that many of us feel when we see Super Mario.
The site is littered with clever examples of HTML5 being used to the maximum like this clever effect in canvas on the central image:
Site: http://mario.ign.com/
Technologies: Canvas, Three.js, LabJS, Grips, Node.js
The Grey Tales
The Grey Tales is a site designed to bring awareness of the plight of Elephants all over the world. This interactive story visits these majestic creatures in each of their 5 natural habitats. The site is built by three friends who were inspired by an encounter with elephants during a trip to Vietnam, and wanted to share their story.
The site has a minimal feel, with a scrolling navigation for each of the five countries. Each of the sections use a strong illustrative style and body text.
The site features interesting horizontal scrolling effects and a drag right call to action to proceed through the content.
The site uses immersive forest sounds throughout.
Site: http://thegreytales.net/en/
Technologies: PHP, JavaScript, CSS
Action Against Hunger: Bangui l’oubliée – Action contre la Faim
Discover the Action against Hunger operations in the Central African Republic , through a 360 ° immersion in the heart of the city of Bangui.
This fully immersive experience combines images and text on a backdrop of 360 degree video in a highly unique microsite.
Site: http://www.bangui-loubliee.com/
Technologies: HTML5 Video, CSS, JavaScript
References and further reading
- http://thenextweb.com/dd/2015/09/08/6-storytelling-techniques-for-great-interaction-design/
- http://blog.raincastle.com/5-great-examples-of-b2b-storytelling-websites
- https://gnsi.org/journal/science-illustration-storytelling
- http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
- http://www.webdesignerdepot.com/2016/05/how-to-drive-ux-with-interactive-storytelling/
