Popular Methods for Online Storytelling

Posted: 02 Sep 2013 03:00 AM PDT

The act of storytelling is present in every culture. Storytelling, when done well, can move people to take action.

The way we tell stories has evolved drastically over time. We constantly find new methods for preserving and sharing our stories: From drawings on cave walls, verbal recounting passed down from generation to generation and songs to more modern ways like newspapers, books, audio and video recordings.

The newest place to tell stories is the Internet. And like with any other medium, telling stories online is a very powerful tool for communicating your message. Online Storytelling help us engage and captivate our website visitors.

Let’s take a look at how you can get the most out of online storytelling by going through the most common ways we tell stories on the Web, as well as by discussing a few examples of good online storytelling.

Storytelling Through Text

While contemporary web technologies allow for all different kinds of content presentation, text is still one of the most common methods for telling stories on the Internet.

Textual content can be very effective, and sometimes it’s the only option that makes sense or is practical. Written stories (like blog posts, essays, articles, and e-books) are generally easier to produce compared to other methods such as video and audio.

However, people only read between 20-28% of the words on a web page on average. Furthermore, eye-tracking usability studies show that we tend to scan rather than completely read web pages.

So text might be a popular type of content on the Web, but it’s not necessarily the most engaging type because people just don’t read as much as we would like them to.

We need to give people a reason to get reading and then keep up their interest so they don’t stop.

By packaging your content in a good story, you can do just that.

You can build a captivating story about pretty much anything: your product, your company, your team, your vision, your customers, your experience, etc.

Make your story personal, fun, obscure, provocative, and anything else you can do to capture your readers’ interest.

Let your imagination run wild and offer your visitors more than just boring facts.

Examples of Storytelling Through Text

Campaign Monitor‘s "Our Story"

Campaign Monitor knows how to employ storytelling on their website. On their "Our Story" page, you can learn about the company history, their motivation, and their vision.

Not only is the text readable (it’s short and well-structured), it’s also engaging because it’s written informally by design.

The story starts with basic facts about the company, followed by an appealing photo of the team and a personal quote about the company’s goal. The tone of voice is casual and direct. In case you get bored, there are more team pictures to give you a glance "behind the scenes" and to keep you engaged.

Goruck

Goruck manufactures and sells high-end backpacks.

The founder of Goruck, Jason McCarthy, tells stories about why and how their bags are developed to make potential customers appreciate the work and the thoughtfulness in the design and manufacturing of the company’s products.

Jason tells the story through their blog and in other sections of the website. One such story is how he used their newest product (which is called the Goruck GR2) on a trip to Shanghai. Throughout the narrative, he outlines why the bag was developed for the purpose of travelling.

By publishing stories in your blog, you have the opportunity to really engage and connect with your readers.

The Goruck "About" page is also written like a story instead of what we commonly find in most other company "About" pages that are stuffy and too formal. Instead of a photo of their products, there is a real photo of Jason at the top of the Goruck "About" page.

Storytelling Through Visuals

Still images can tell stories. A picture is worth a thousand words as the adage goes.

Visuals are very efficient in conveying a story because our brains can process them 60,000 times faster than text.

You can write a whole lot of text to explain how your product works, how it makes people feel, and where they can use it. Or you can show a couple of pictures of real people using your product.

Images can tell stories and, at the same time, they leave a lot of room for personal interpretation.

There are three main types of visuals that can be used as Web content for storytelling:

Web images in your content (such as photos, sketches, illustrations, graphs, and charts)
Background images
Infographics

Using images with your content can supplement your textual content, and can help move your story forward.

Background images can draw website visitors in and put them in a certain mood. They can give people a good idea about the story you’re about to tell. Background images can help you build your site on a story.

Infographics are a great way to communicate a story. People like infographics because they are easy to consume and fun to share on their social networks. Infographics are popular because they can hold a lot of information while using very little text.

Examples of Storytelling Through Visuals

Testflight

People love the idea of interacting with actual human beings. That’s what Testflight is able to do for me with their visuals.

For some of their key content, Testflight uses blueprint-style sketches for images. Somehow this feels like you are in a room with them and they just made these sketches a minute ago to talk you through their work step by step.

Hand-sketched visuals can give your stories a personal touch, helping you connect with your visitors. It makes your story more authentic.

Airbnb

The site of Airbnb welcomes you with big and beautiful background images; a different one for each travel destination you select.

These background images give you a great feeling of the featured destinations, stirring your emotions, and giving you itchy feet to travel.

Airbnb tells different stories from around the world and invites you to become part of these stories.

StumbleUpon

Background images can also serve as a metaphor to help you explain abstract concepts and attract your visitors’ attention.

The StumbleUpon homepage is kept very simple: It consists of a simple header, a few lines of text, a call to action that invites you to "Start Exploring," and a huge background image.

At first glance, the background image is just a pretty image.

However, when you look closer, you will see that it perfectly reflects what StumbleUpon is about: Exploring the Web. Doesn’t the scene remind you of one of those warm summer nights when you were still a child? I remember myself playing outside in the garden, exploring the world with all its beautiful details and little wonders — a cherished story from my childhood.

Web Designers vs. Web Developers Infographic

Here is an infographic on Six Revisions that tells you the story of web design and web development through infographics. The story satirically portrays the people who are part of the web design and web development industry.

Water Down Infographic

Water Down is another infographic that tells a story; the true story of the lack of access to clean water in the world.

The story starts with the amount of water available on the planet and ends with the fact that every 20 seconds a child dies from water-borne illnesses.

With infographics, you decide just how many pieces of the puzzle you need to get the entire picture.

Storytelling Through Animated Interaction

One aspect of good storytelling is entertainment. When people are entertained, they will be more likely to listen to your story.

Good stories are fun, scary, heartwarming, and so forth. They appeal to our emotions.

That’s why we tend to think of storytelling as a gift.

For example, you might think something along these lines: "I love this site because someone came up with this nice story that made me smile."

With animated interactions, you can give your visitors such as gift.

I already discussed how people love visual stories. Animations take your visuals a step further by adding motion to them.

Once you’ve got people hooked, they’ll continue browsing your site to find out how the story continues. This is also an extremely positive effect of storytelling in general: It makes us curious and eager to find out what happens next.

One technique for animating your content is through the use of parallax scrolling. Parallax scrolling is a relatively new technique in web design with lots of potential to improve your overall user experience. It offers the ideal setting to tell your story in an engaging and interactive way. Let your visitors take control and let them walk through your story in their own pace. The different layers that respond differently to the scrolling behavior of your visitors create a sense of depth and even allow for multiple story lines.

Examples of Storytelling Through Animation

Google’s "The Story of Send"

The animated story of what happens whenever you send an email is entertaining.

Because their animated story is engaging, Google is able to inform and connect with their audience more successfully.

Peugeot’s "The Hybrid Graphic Novel"

A great example of storytelling through parallax scrolling is by Peugeot for their new HYbrid4 technology. It’s a graphic novel that progresses as you scroll down the page. You get drawn into 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 down the page, you become the witness of a beautifully illustrated and captivating story, which introduces the different travel modes of the HYbrid4 technology as a side plot.

The story is accompanied by music and sound highlights to make it even more engaging. There is no way you would want to leave the web page without finishing the story first.

TEDxGUC

On the TEDxGUC website, parallax scrolling is used on the homepage to welcome you with an interactive "TED tale."

When scrolling down the page, you learn all about the story behind TED. How it was founded based on the idea that small ideas can change the world, if they meet the right people and if they come together.

TED brings together ideas from all over the world and they are constantly looking for new ideas. By the time you get to the end of the page, you are being invited to join the TED community. End of story.

Storytelling Through Videos

Almost all videos include some kind of story. Video allows for both motion picture and sound, basically all the technical aspects that make a great platform for an engaging story.

Did you know that site visitors stay on a web page 100% longer when it has a video on it?

Also, site visitors are 85% more likely to purchase a product after watching a product video.

Those are just some numbers that show you how good of a platform video is for your stories.

Examples of Storytelling Through Videos

Wistia

The video hosting service Wistia shows us an example of good storytelling through video.

They have three videos on their homepage that can all be watched separately depending on which topic you are interested in.

In every video, different people from the team talk you through each chapter of their story.

At the end of each video, you are automatically taken to the next video to preserve the continuity of the story.

Even though there are three videos, they all cover different parts of one story. The story of Wistia, and the team behind it.

Droplet

The mobile money app Droplet also uses video to tell a story.

The video takes you on a journey through the city of London. It shows you why there is a need for the app and how the app solves an existing problem. They do it through storytelling.

The people behind Droplet have chosen a cartoon-style video. This allows them to minimize noise and focus on the details. The hand-drawn style makes it very personal and unique.

Storytelling Through Audio

Auditory storytelling is a very old form of storytelling. Songs, for example, were easy to remember and pass on from generation to generation.

Even today, most songs tell a story of some sort.

On your website, you can use audio in many different ways. Just keep in mind that not all people appreciate it, so be thoughtful in execution.

Example of Storytelling through Audio

Dumb Ways To Die

The website Dumb Ways To Die is a public service announcement campaign by Metro Trains in Australia to promote rail safety. The campaign went viral in 2012.

The story is about the many different dumb ways to die, including any accidents that happen on and around train tracks.

The campaign turns a serious topic into a story people are more likely to engage with, in the hopes that their message becomes better learned and disseminated.

The story is told in a song and it comes with a fun music video and a very engaging, interactive website.

This is a great example of how to get people to listen to a message they would otherwise not want to hear about.

Storytelling Through Social Media

Social media has gained a lot of popularity in the recent years. Why? Because they allow people and companies to connect with each other. Social media enables us to exchange feedback, ideas and content.

And most of all, social media empowers our users to create their own stories, to share them, to follow others, and to collaborate in building common stories.

For companies, social media can be a great place to tell stories. This form of storytelling is interactive and the stories evolve around a community.

Since social media platforms such as Facebook and Instagram are associated with leisure and entertainment, they attract the ideal audience for your stories.

Examples of Storytelling Through Social Media

Starbucks Facebook Page

There are still a lot of companies that don’t know how to use social media as an effective marketing tool. This does not hold true for Starbucks.

With 35 million followers, more than 50,000 likes on their Facebook page, and an estimated average of 5,000 comments per post, Starbucks sure knows how to engage with their community.

How?

Through storytelling.

Starbucks has mastered the use of Facebook to create a space for storytelling, not only for themselves, but also for the stories of their customers.

Red Bull on Instagram

Another popular social media platform is Instagram. On this social media site, you need to tell your stories with photos and short videos.

Red Bull does just that.

The company is known for their event marketing efforts and they create more content around their product than any other company. Content that is fun, visual, and extremely popular.

Related article: Content is All That Matters on the Web discusses Red Bull’s unique content strategy.

On Instagram Red Bull tells their stories with photos and short videos. And fans follow these stories engagingly.

Online Storytelling is Powerful

The Internet is the most powerful platform for storytelling. It combines different carriers for our stories: text, visuals, interactive animation, video, audio, and social media.

The Web is also the only medium that can be publically accessed simultaneously by people all over the world. Not only does this allow anyone to share their own stories, it also means that our stories can reach the entire world.

About the Author

Sabina Idler is UX Specialist at Usabilla and Founder of UXkids. Sabina is passionate about improving interactive media for all ages. For more UX insights, check out the Usabilla blog and follow her on Twitter @sabinaidler and Google+.