Every brand has a story, but how are you telling your story online? Visual storytelling in web designing is a growing trend so we are going to dive a little further into techniques that make for good interaction with your storytelling and design. Like we want to see the moral of the story at the end of a book, we expect to see the purpose or goal behind the storytelling on the website at the end.

There are a number of techniques for a better interaction design in storytelling, which we will look at a bit further on in our blog.

Storytelling is literally to tell a story. Where once, it was more confined to fairy-tales and novels, storytelling has now become a great feature for communicating your needs, especially online with many international brands using it on their websites to attract and create an emotional link with their visitors. You don't just tell the story of your brand, your products or services; you want to share your experiences and your journey with your audience and even go as far as making them a part of your story. 

The main point is to capture their attention and provoke their emotions.

AUTHENTICITY

is the keyword for a perfect storytelling strategy on your website.

It is a powerful approach that when done right, can compel your visitors to convert more effectively on your website than what any amount of SEO, visual callouts, or amazing interactive elements can do. I am an advocate of SEO and a good SEO plan will direct people to your site, but once they are there a great story can begin the journey of turning them into loyal customers of your brand.

Check out some techniques you can use to tell your story on your website:

1. INTRODUCE VISITORS TO YOUR STORY

When the path of your story is laid out clearly in front of your visitor's eyes, the rest of the work simply lies in convincing them that the purpose of your story is really worth grabbing a hold of, which is great for you as the storyteller, because your visitor's mindset is wanting to learn more about what the story has to offer.

Your storytelling goes hand-in-hand with your visuals and design structure. However, it does not have to be interactive to be effective. But, it must be ENGAGING. If your visitors get bored with your story or barely take any notice of it then what was the point of creating it in the first place.

Your story does not need to be complex. In some cases, you can simply tell your story with one image and if this is the case then don't use half a dozen images. If your story needs half a dozen images or more then definitely don't use just one or two to get your story across. It's all about knowing your story well and making it as detailed or as simple as it needs to be in the telling.

Most brands have a story to tell so they can use a feature like storytelling, but if your website is a site where visitors are looking for instant access to information then the use of storytelling may not be for you. No matter the type of website, it needs to create a connection with the visitor and you do that by providing them with what they are looking for first and foremost, which means you need to have a pretty good idea of what that may be.

2. INTERACTIVE STORYTELLING

Some stories benefit from directly involving the user in the story itself. There are interactive features you can use in your storytelling. Once such feature is a guided questionnaire on your site to collect specific information that enables you to make the information you are presenting personal to the user. Effectively, your website becomes more about them, rather than some general, random person. However, the consumer must want to fill the questionnaire in and not be obligated to do so.

The placement of these types of features is important. You want to grab your visitor's attention but at the same time, you don't want them to leave because you keep interrupting them online. Use the structure aka design of your website to effectively introduce them to your story through interactive features so they willingly interact and willingly fill out any questionnaires. Sidebar placements up the top to the right or header features are good placement options.

By having a questionnaire on your website you can ensure their interaction with your website is dedicated to them. By engaging visitors in this creative way, you encourage your user to be more focused on the kind of message you want to deliver to them and the information they are looking for.

Let's look at an example. Say your business is in the beauty industry and you are selling cosmetics online. In your quick questionnaire, you can ask questions like: the colour of their skin, the colour of their eyes, their eye shape, if they have any ski irritations and so on. Then the algorithm on your website will analyze the answers of your user to then provide them with the perfect products to use based on their answers and profile.

Other tools such as, personalised avatars for your user to be a character in your story or the use of chatbots in your design; which we will talk a bit more about later on. These features and animations tell your visitor that your brand cares about their needs and experience online and shouldn't be neglected in today's market.

3. LET YOUR USER BE A CHARACTER IN YOUR STORY

There are a number of ways you can enable your user to be a character in your story, by involving them directly and personalizing the way you present your information. One such way could be basing your story on user input. For instance, websites that make the visitor choose which option they are: I'm a developer, I'm a designer, I'm a marketer – and then personalize the information presented based on each type of user.

The use of real-time data is also another form of interaction that can be a very effective way to keep users interested and to persuade them to become return visitors. Thanks to Google, Social media platforms like Twitter and Facebook and streaming services like Netflix who cater to our every desire, serving us up instant personalized searches, offering us recommendations based on our behavioral data and tapping into the preferences of our peers, our idols and other people with similar tastes, we have become 'lazy users'. Businesses can also use this real time data to create a more personalized experience on their websites just like our favourite browser does when we jump on and search. However, when you consider the implementation of real-time data visualization, think of your type of user first.

Real-time analytics is a must for any business who wants to learn about their visitors. But, observing how your visitors interact with your website in real time is one thing, and acting on your findings is another. There are a number of widgets that you can implement into your sites, such as twitter and Facebook and the use of live streaming videos that enable you to communicate quickly with your users and show what other people are saying about your brand, product or service. Some businesses have even used their website to show real-time feeds of their office, which provides the user the experience of being there although they could be sitting on their computer on the other side of the world.

Real-time data is making waves and will continue to evolve in the coming years with the main idea of being about to provide that more personalised experience. Funny, how we live so much of our lives online now especially within our social media accounts but we yearn more each day for that personal touch.

4. CHAT BOTS ANYONE?

We mentioned Chat bots in tip number 2 and are now going to look into this interactive feature a bit more. One of the earliest interactive chat services would have to be the Microsoft Office assistant, commonly referred to as Clippy the paperclip, who would correct our grammar and highlight misspellings. Since then Chat bots have come a long way. Their ability to simulate conversations makes them a handy customer service and marketing tool for many businesses, especially e-commerce sites, where Chat bots help to facilitate sales 24/7.

Visitors to your website can interact with a web interface like they would with a sales assistant in a brick-and-mortar store, replicating the same experience without having to step out of their comfort zones. Chat bots can function either with artificial intelligence or with human supervision. Another industry that is using Chat bots effectively is the Food industry, where they are used to accept orders.

Using tools like Letsclap, helps online businesses to connect with their customers via messaging apps like WhatsApp, Facebook Messenger or WeChat, providing customized customer support and commerce. The use of these conversational interfaces will grow in 2017 and beyond in how web designers think about creating websites to help big and small brands express different sides of their personality and therefore make them more human and approachable to their customers.

More than 900 million people around the world use Facebook Messenger every month, so the introduction of Bots for Messenger last year was a welcome addition to the toolkit of communication channels. Businesses of all sizes can take advantage of this feature without needing any coding knowledge.

5. HAVE YOU EVER HEARD OF GAMIFICATION?

The use of gamification is more popular in mobile apps, however it can still be used on your website. In simple terms it is a system of risk or cost and reward. You are looking for ways to enable your story to reward your visitors by performing certain tasks. These tasks could be filling out a registration form or completing special offers. That is gamification and its main goal is to create visitor loyalty and to keep them engaged.

Rewards when they are worthwhile can be a huge motivator for users to interact with your brand and website. Just make sure that the rewards you are offering are appropriate to the level of risk for your user. Maybe the most challenging part in the use of gamification is to choose the best reward for you and your users. If the reward is too small, users will not bother participating. If it is too big, you could end up losing money, and no business wants that outcome.

The use of gamification is not a direct way of storytelling but it still helps you to include visitors in what you want to share with them about your brand. You can also choose rewards with a direct link to your company story and experiences.

Dropbox is a great example of gamification through voluntary reward. They dangle their users with a reward of 250MB of free space in exchange for a series of small actions, which it cleverly frames as "a series of quests". They then present the quests in a checklist format, which taps into our need to feel a sense of accomplishment when we complete a task.

6. SURPRISE YOUR VISITORS WITH THE "EASTER EGG" EFFECT!

Although more of a tricky interaction in design to pull off, if your website is well-suited to this type of project where the love of discoverability can be incorporated in your story, why not give it a go and give your user a very memorable experience.

What is known as the "Easter egg" effect is when you want to hide something behind a click on your website to surprise your visitors. It can be an animation, a video, a quick game, text and so on. The main objective is to increase your brand awareness and to actually humanize your brand by showing its personality. They can also boost your traffic, and above all provide fun for your user which in turn increases their engagement with your brand.

Giveaway or contest and game sites are great examples where this effect works well. In saying that though, any brand can use an egg on their site and many do, you just don't know about it. Brands and businesses rarely promote their easter eggs, after all that's part of the fun. And, who doesn't like an easter egg hunt?

Some developers might leak information online, but most of the time, users have to "hunt" or stumble upon these little eggs all on their own. They are a great way of generating word-of-mouth for your business online and with the help of digital marketing channels like Facebook, Twitter, and Buzzfeed; they can spread like lice through a primary school.

One of the most known easter eggs, is Google Chrome's: Unable to Connect. This mini game involves a small dinosaur. When your WiFi is down or Google Chrome can't find a connection, it'll take you to a simple grey page with a dinosaur. Click the space bar to help it to jump obstacles.

No matter the complexity of your egg, your project needs to be well-executed to have a positive effect at the end. Make sure your audience understands and enjoys this kind of playful interaction, as not everyone will appreciate it, and for some users, it may be frustrating.

Before you design anything, know who your user is and treat your easter eggs like 'icing on the cake'. You need your website to be fully optimised before you think about adding little extras to the recipe.

7. CREATE INTERACTIVITY WHEN DOING COMMON ACTIONS

Common actions online include scrolling, clicking and tapping. We complete these without a second thought. So why not add some interactive value in your design when users perform these common actions.

With scrolling incorporate parallax scrolling, this has become one of the most popular techniques to tell a linear visual story. As a user scrolls down your website you introduce them to your brand, products or service in a clean effective use of images and text.

When clicking, use your images in reinforce where your visitors should click. Tell them what will happen when they do click and why it's beneficial. Capture their attention with the right graphics to get your message across as well as a great headline, which is no more than 5 – 7 words. After all we are all time sensitive these days and are bombarded by so many images you want to ensure that your story makes sense, grab their attention and keeps them engaged.

Another technique in storytelling is to make your visuals respond when your user performs the common actions like scrolling and clicking. In many cases this will be some simple animation incorporated in your design.

In my research I came across the Babel app website, which I absolutely love the design of and is a great example (http://babeltheking.com/eng ). As you scroll down, a cat that is the title character, Babel seems to fall from the sky, and tumbles all the way down to the bottom, unless you stop scrolling. When you stop the cat rights itself, holding onto an umbrella. Check it out as it's sure to make you smile.

Every good story has a beginning, middle and an end. Even a single image with text should follow the same rule, it is just quicker to complete. It becomes more vital for longer, more complex stories to have a plan in place, so research your visitor. Put yourself in the shoes of your user and take the time to map out your story with the beginning being the start of the customer journey, in the middle you'll engage with them and at the end is where they will complete the final goal.

Need help with your web design? Then get in touch for a chat about your business goals for your web design needs.