Telling stories on the Web, the hottest way to engage your users

Storytelling is virtually as old as the human race itself. Ever since human beings could talk, they used storytelling as a way to communicate ideas, lessons and concepts. Web design is all about communicating ideas and concepts, as well, which is why storytelling on the Web is the perfect way to engage users.

As web designers get more creative and look for new ways to enhance the user experience, they’re increasingly turning to storytelling in their designs.

When designers incorporate storytelling into a website, they’re also drawing the user in more efficiently, which makes for a more engrossing experience. Storytelling can take the shape and form of many different devices, and various types of sites are jumping aboard the storytelling trend.

Telling stories with social media

These days, social media and web design are increasingly integrated. Most businesses and publications on the Internet have all of their social media buttons laid out on every page, making shares and publicity easier than ever. Social media encourages users who feel passionately about a brand to connect with the product or service more efficiently than ever.

Social media can become a great way to market by way of storytelling. You can tell the story of your brand to your captive audience of loyal customers/users. Social media relies on any number of ways to tell the story of a brand with passion, purpose and hype.

Take Tommy Hilfiger’s Facebook page. This epitome of classic American prep fashion has more than 8.7 million followers as represented by the likes on the page. This many followers is the instant audience the brand can tell its story to. Hilfiger constantly shares news of its design launches, celebrity partnerships and promotional events with its followers. The brand also uses pictures and videos to make its story more engaging for the community.

Telling stories with images

Sometimes, storytelling can be effectively achieved by the straightforward and unassuming use of images. There’s the old adage about how a picture is worth a thousand words, after all. This makes a lot of sense when you think about it because a picture is easy to absorb, so a message can be communicated very efficiently.

LinkedIn’s sign-up page illustrates this to a tee. First of all, note how little copy there is on the entire page! This is obviously done on purpose to allow the group of pictures of (very diverse) individuals to greet the user of the site.

Just by observing the box of pictures, you can already get a sharp impression of what LinkedIn’s about: it’s really for everyone. The pictures show men and women of various ethnic backgrounds (even if they didn’t include older people) gladly and confidently smiling away due to their LinkedIn experience. Anyone not familiar with the social-networking site immediately understands that people from all across the planet use the site for networking and doing business.

Telling stories with Illustrations

Illustrations or drawings can work the same type of magic that photographs have. They’re also visual helpers that make it easy for the site visitor to understand the story a brand is trying to tell. Illustrations can go in one of two ways: the abstract route or the more realistic route. We’ll look at the latter type.

On the website of Evernote Web Clipper, you’ll notice three blocks of illustrations going from left to right. Yes, the blocks of illustrations are accompanied by handy text at the bottom to help explain how Web Clipper works, but said illustrations bring to life, almost like a storybook, what the user flow will look like.

As a result, no one is left wondering that they can use Web Clipper to collect and access various elements from the Internet whenever they want and from wherever they wish.

Telling stories with copy

It should come as no surprise that the words used in site copy are exceptionally potent at great storytelling. It makes a world of sense when you consider that words are at the heart of great storytelling, and it’s been this way since man first put pen to paper.

A site that exemplifies how copy can be used to tell a captivating story is The Tourist Eye. The Tourist Eye relies on punchy and engaging copy to immediately inform users what they’ll get in return for using its service. Straight to the point, the site copy makes it abundantly clear that you can find a host of ideas and tips for stuff you want to do—on big trips and small getaways alike.

Then, as the user scrolls down the page, the copy walks him through additional features and options that are available. These include the handy and desirable opportunity to create wish lists and a chance to get The Tourist Eye on your mobile phone as an app.

Telling stories with mascots

When it comes to the comical and lovable, mascots have the edge. Companies know that mascots are an easy way to ingratiate themselves with customers, and they also help a brand tell its story in a humorous, accessible and conversational way. Take MailChimp, for instance.

It has a pretty famous mascot by the name of Freddie that does a bang-up job at storytelling by communicating the company’s corporate philosophy. The company espouses a light-hearted and not-to-serious approach to business and life in general, which is easily seen in the depictions of Freddie on everything MailChimp-related.

Whether it’s Freddie just smiling, winking or with a pencil on his ear (and smiling broadly), you know that the brand is communicating its down-to-earth and personable style to users. This mascot can be seen on almost all pages of MailChimp, in one way, shape or form.

Telling stories with parallax

Parallax scrolling’s been around for a few years now, and it’s still just about trendy. It is probably the easiest way through which to demonstrate how deadly effective storytelling in web design can be. That’s because the nature of scrolling down a website is just given to revealing more and more layers of information (read: storytelling), almost like peeling the subsequent layers of skin off an onion (minus the tears, of course).

Take the example of The Royal British Legion – Follow the Poppy website. It provides curious site visitors with vital information about how donations to the Royal British Legion are spent—boy, are they ever well spent. Through interesting and vibrant storytelling as you scroll down, you get to see the numerous, helpful services that the Legion provides. This includes helping British military families (complete with specific examples of real families) and career help for those veterans who leave the service to try their hand at something else.

Telling stories with personality

Personality has begun to comprise an ever-more vital element in contemporary web design. It’s especially potent and powerful to help businesses and brands humanize themselves, thus connecting on a more personable level with their site visitors, fans and buyers. All this equates to more people wanting to buy, so greater profits follow, too, naturally.

Personality allows your brand to tell a great story, too. Take the example of Pet Relocation. Under the site’s Team section, all employees are spotlighted, but it’s far from your typical about page! All employees (and some of their dogs, too) are shown smiling widely, but when you hover your cursor on each picture, you get a bonus surprise: a silly/attitude-filled pose from each employee. That tells site visitors how casual and relaxed the corporate culture is at Pet Relocation.

Conclusion

Storytelling has been with the human race since the first, primitive humans were still eating their meat raw and drawing on cave walls. It’s because it’s a powerful and effective way to get things across. It’s no surprise that, at long last, this technique is catching on in the web-design world.

The more that brands and businesses see how appealing this approach is, the more you’ll see site design after site design that incorporates this technique.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.