Having the element of graphics is every website’s necessity nowadays. Without the proper use of visuals you simply cannot convey your message to the visitor, better yet, cause them to abandon your website.

Visuals have the potential to reach inside the mind of the viewer and lure it to anything you are trying to introduce, sell or invest. To use visuals on your advantage and gain traffic in the fastest means possible, the best method to engage and convert the visitor is through interactive story telling.

Why Story Telling?

I know what must be popping in your head right now. What has Cinderella or Rapunzal to do with the visual experience of a website? Well story telling is not just confined to fairy tales and Disney franchises, but story telling is rather an effective way in the marketing mix of any website that aims to get itself on the top of the competition.

How to Create an Interactive Story

It takes a lot of planning and trial to connect design with the story so when you show it on the landing page of your website it doesn’t make a fool out of you. Your visuals don’t need to be a master work of several designers and an expensive CGI. You can tell your story with as much as a single well articulated image banner. However, the challenge presents itself when your narrative crosses with objective of your website. What is your website about? What is your brand logo and why is it selling what it sells? Everything you explain through the visual must be unique without an inch of plagiarism. It must become so compelling that after visiting your website once, people start sharing it, talking about it and revisiting it all over again.

How it works

There is quite a huge disparity between a website that has images, graphics and animation vs. a bland text centric platform you call a website. It is impossible to judge people and before you can have a proper conversation they are gone. Multimedia elements are injected to avoid this. When a customer sees plain text describing a product there is a feeling of compulsion to read the alphabets and words of the statement, whereas an image, video or graphical animation is just as easy to see as it is to comprehend.

Selling Big Product with Short Story

A company that sells automobiles has a lot to fill in before it can make any sales through its online platform. Buying cars online takes a lot of nerve from the customer because big sums are involved. If the website fails to get the eye of the client, then it’s nothing but garbage floating on the internet. Selling cars, trucks or heavy machinery online certain marketing angles to expose the USPs (unique selling points) of the product. I know a cars website that has used the perfect story telling technique to show its pizzazz on the customer’s screen.

Example:

Lexusls.asia is an offshoot of Toyota that sells luxury cars. In the website the designers have brilliantly utilized parallax scrolling to introduce the car with just enough text to get the visitor going. Then suddenly a tire rolls from the right and shows some other cool features of the car. As you scroll down further the website does not let go of you and with some cool graphics describes the purpose and the benefits of the car.

Visual Language

Visual language has the ability to tap into the very foundation of human centric design. Visual language goes way back and even before any alphabet was invented as cave paintings were the basic medium of communication. The cave paintings acted as source of storytelling, guide to survive and avert potential dangers that were a part of that period. More or less, the cave drawings are the earliest form of visual data.

We know that images and videos hold a great deal of communicative power, how does one harness this power through pixels?

Example:

This is when your own imagination comes to play. Adding images and videos with the right mix text so your website speaks for itself.

Bellroy.com sells its leather wallets with the guarantee of greater space with slimmer designs. How they show it is through an elegant slider with HD images of one of their wallet against another. As the slider moves, the story does too and within 10 images the same amount of cards are fitted in their branded wallet whereas deforming the other wallet more than it actually is. Here the conclusion is striking and with a moral to spare.

Design the Story

It’s quite similar to writing a play when you design a visual story. All the aspects and elements of the play are present in your website to and intermingle with such intimacy that they completely merge with the story you have introduced. Your story begins with the setup you have arranged, then moves towards the conflict and concludes with a resolution.

This website for instance has a unique way of taking the visitor by the arm and inviting to a dance ball packed with emotions and visual treats.

The users must be well aware of the story as it leads them to their destination. And that is where the visitor becomes the lead, and the lead becomes the customer. It’s only fair that the product or service you are planning to feature through the story telling process must have something that the user needs, a unique functionality or a price margin the customer is looking for.

Example:

Bagigia.com first gives the visitor an introduction of the retailer followed by simple yet profound 3d imaging of the product itself with emotional text to keep the story in flow. The ample white spacing in the design helps the user focus as the product stands out in the centre, bringing the story to action and towards resolution.

Using Animated Story to your Advantage

It’s true. Website animation as been the victim of overuse without any regard of convention or standards and that is the main reason behind its downfall in the past 5 years. Ironically, very few designers know how the use of clever and on point animation can make your story into Dark Knight Movie. Animation is built to cover what static images cannot complete, while at the same time add amusement to the design itself.

Example:

Talking of DarkKnight, this App for iOS at benthebodyguard.com allows you to secure and encrypt information in your website that features a walkthrough animation (literally) as you go down with ‘Ben’ in the middle, the bodyguard sworn to protect your information with a formidable reputation. This website has exemplified how animation can be used at its best to produce the ideal purpose story for a product.

Translating Design Message

Does it not come to you as a surprise how a design that is simply a mixture of visual arts and graphics can produce empathy within you? I know I have. We as humans react to our animal senses as much as any other organism does that is true to its nature. When we see a heartthrob – we do as programmed. Capitalizing on this characteristic of human behavior, your story doesn’t always have to be a buzz kill about your manifesto and products because that’s probably what every other website owner has in mind these days. When you add a sense of sentiment, spirit and moral, your story transforms into a message.

Example:

This website everylastdrop.co.uk takes you to a journey of your everyday usage of water in your home and surroundings. Reading about facts how much water is wasted everyday is too mainstream and often never gets taken seriously. This innocent little guy that uses water indiscriminately on his daily schedule not only highlights the importance of water but also puts it to contrast with the ones who need it the most in rough parts of the world. It so grows in the mind of the viewer that he would probably think twice before wasting another drop of water next time.

Using Dark Elements

Novels are fun to read and with the recent technological climbs, it’s now necessary that they be read out of books. Even to this day, a vast majority of online users still prefer judging the book by its cover than actually reading the prologue. To tackle these online users and lure them to the product, many writers often hire developers to create websites dedicated to their novels. A step by step rehearsal of the novel with animated sequences will not only give the story the fireworks it needs, but also ensnare the online user into reading it.

Example:

Using the same principle and structure, Nam Le’s acclaimed short story ‘The Boat’ was converted into an interactive graphic novel by creating a world of storm ravaging ocean forcing a boat from the terrors of Vietnam War. The best thing that anyone can do in their storytelling fiesta is add sound to their design. This is the superlative of animated story telling to acquire UX. See it here.

Engaging and filled with illustration, it’s truly the proof of how well you can manage a product into by creating a design that moves as you interact with it.

Unification of Through Scrolling

In the ecommerce industry people are often interested in getting the benefits of a product that can be used on multiple instances but for the same reason. For one, it makes their life a hell lot easier, and two it’s a part of the technological era. But with so much to learn and acknowledge about a venture such as this, it’s very less likely that customers will put a risk in something that has futuristic implications and serves their purpose all too easy, making it too good to be true. I’ve seen businesses that tried selling such products with too much to agree and the result was tragic abandonment.

Example:

However, this product not only manages to sell, but also fulfill what it promises its customers. This Product at onlycoin.com is single card that carries all your credit cards inside it. The story telling process helps the viewer understand the complication of carrying too many cards in your wallet with reasoning, but with the graphical display of step by step card optimization and compact carrying, it becomes difficult to disagree with the promised applications of the product.

Conclusion

Storytelling is not just confined to any product or objective; it is open to all sorts of ecommerce exercises that help the visitors get the ideal UX without compromising on the functionality of the design. Learning to master this for your own products and services through ecommerce websites is imperative in this age of electronic marketing. Without reading the mindset of the consumer your simply cannot pitch your product in, and without demand there is no production. As Tim O’brien says it, “Storytelling is the essential human activity, the harder the situation, the more essential it is”, and trust me pal, the situation never gets any easier.