Immersive storytelling is a powerful narrative technique that captures the audience’s attention by creating an interactive user experience. It blends traditional storytelling with innovative technology to generate an interactive and engaging environment. In the past, sites were very static but now due to macro and micro interactivity we can provide more clear feedback through our interface’s interactions. This means users now expect a degree of immersion.

Although now interactive websites and immersive experiences are normal, back in 2012, The New York Times published “The Snowfall” which was the first ever immersive website. As it was the first, the interactive elements are very simple with photos and text fading in and out but this was a starting point for what was to come. Today, users now expect more from immersive experiences such as scrolling, animation, interactive data and live maps.


Macro Interactions

Macro interactions are from page to page or section to section. They are used to navigate an interface and use ****a series of system functionalities and controls to impact the larger goals of a user. These interactions also need to work seamlessly across a range of devices and screen sizes too.

Macro Interaction Examples

Species In Pieces

Untitled

The Species in Pieces website use lots of smooth macro transitions between each geometric polygon animal shape. Each triangle moves smoothly when morphing from animal to animal as the new coordinate points are established as well as the colours changing seamlessly. They also use audio to make the experience even more immersive, reflecting the animals habitats. A micro animation I also really like is the loading screen as the triangle segments spin before shattering in to individual pieces.

In Pieces – 30 Species, 30 Pieces. 1 Fragmented Survival.


Space X - Falcon Heavy

Untitled

Another good example I really like is the Space X website for Falcon heavy due to it being very immersive experience for users. It has a really nice header title image when you first open the page which then disappears when you start to scroll. What I also really like is how the numbers for launches and landings count up to the statistics as you scroll down.

Another element I really like is as you scroll through the information about the falcon heavy, the illustration turns from a shell outline into an actual model of the falcon heavy. I think this is really cool as it uses immersive elements to bring the falcon to life.

SpaceX


BBC News

Untitled

An example which I think I could use as inspiration as it would help me play to my strengths is the 5 page BBC news article for the Grenfell Tower fire. It uses images and text really well such as when you scroll the images stay static as the text moves and then the images move to change the immersive feel. Another element I especially like and would like to implement to my project is as you scroll reading the text, the images change and display different perspectives of the fire. I think this really helps to tell the story visually.

Finally I really liked how they used a 3d model of the building and then highlighted where each family lived and were during the fire. It is such a simple touch which is very visual and allows the user to understand the information a lot better.

The 21st floor