Visual Storytelling Step-by-Step Guidelines for UI & UX

Visual Storytelling Guidelines

Visual Storytelling has been a content marketing trend for the past few years. The idea however is nothing new since people were creating narratives long before writing existed. Storytelling is the process of describing a series of events to communicate something to your audience. The purpose can be to entertain, educate, or instill values. The internet has broadened the way we perceive storytelling by adding visuals to the equation. Today, visual storytelling is applied in UI and UX design to establish an emotional connection with users and provide the best user experience. We’re going to explore visual storytelling as a design phenomenon.

“The purpose of a storyteller is not to tell you how to think, but to give you questions to think upon.”

Brandon Sanderson, fantasy and science fiction writer

Why is visual storytelling so effective?

It’s no secret that humans are visual creatures. The human brain dedicates 30% of the cardex to visual processing compared with 8% for touch and 3% for hearing. Research suggests that people can remember over two thousand pictures with at least 90% accuracy over a period of several days. So, how does this correlate with visual storytelling?

When it comes to web design only 16% of users actually read the text on the web page word for word. While the other 79% prefer to scan content. Heatmaps support the idea by showing that users tend to scan and read in patterns. For speakers of left to right languages, those patterns are Z type and F type. Most people abandon a web page without scrolling through it at all. However, pages with images or videos are more likely to make visitors stay longer. This is why it’s crucial to structure your content and your visual storytelling in a way that matches how your users read.

Here’s how you can make your content fit using the F and Z type patterns for UI and UX design. 

  • Place your text in a central column or slightly left of the center. 
  • Keep text to a maximum of around 75 characters per line.
  • Limit the line lengths to improve the reader’s level of comfort.
  • Encourage them to stay on the page and read more.
  • Achieve a Z pattern by breaking up text with images.
  • Use headings and other elements to make big paragraphs look small.

What’s the Goal of Visual Storytelling?

From a marketing standpoint, visual storytelling should improve user experience and translate a clear brand message in a visual way. Depending on the brand strategy, the goal may be complex or simple. You can convey it all in one image or in a 20-second video. It should invoke emotion and stroke interest in your UX design. Visual storytelling is a graphic way of telling users exactly what they need.

Visual Storytelling

A combination of imagery, text, animation, and video can provide a clear understanding of how your website, app, or product helps them. All of this is based on user testing and research. Airbnb is one of the best examples of visual storytelling. Every travel business was hit the most by the pandemic so it’s remarkable how AirBnB has found a way out.

Their website perfectly answers the question, ‘What does the user need to hear?’ The message is pretty simple here. If a user subscribes to their service, they can find great options for local traveling as well as lots of online experiences without leaving the comfort of their home. Airbnb uses storytelling to instill values like diversity and belonging, battling discrimination, etc. Apart from client-oriented storytelling, AirBnB caters to influencers, bloggers, travel brands and also hosts how to create engaging interactive stories through storytelling. I have spoken about design trends before, so give that a read as well.

“And do you know what is the most-often missing ingredient in a sales message?  It’s the sales message that doesn’t tell an interesting story.  Storytelling . . . good storytelling . . . is a vital component of a marketing campaign.”

Gary Halbert, author, marketing practitioner, copywriter

Let’s take a look at how you can integrate visual storytelling into your next project.

1. Personalization

Personalization makes the user a hero of the story, so make this story about them and not some abstract person. Whether it’s based upon user input, for example, sites that first make you choose if you’re a developer marketer or designer or based upon complex real-time data, this kind of interaction is effective to make users care about the topic or product. Gamification somehow correlates with personalization. Still, it is based on a system of risk and reward. You want to find ways to make your story reward your users for performing certain tasks on the most basic level. Visuals that change, improve, or do something cool can be a great reward for simple tasks. After all, that’s how many video games work. Completing a task, move on to the next level your website or app can do the same thing.

2. Interaction

Use common actions with interactive elements, for example, to make the process of scrolling more interactive, use parallax scrolling. It’s good for telling a linear story. Here, the user simply scrolls down the website, uses a hover to reveal copy, and scrolls to triggered animations to add interactivity to specific parts of the story. Another aspect of interactivity is supplementing your story with visuals that respond to user action. The visual reaction can be triggered by clicking or scrolling or a more complex action like a form submission. 

3. Discoverability

Hiding secondary elements like easter eggs for users to discover can work for gaming or entertainment websites. However this one is tricky in terms of UX, so you need to prioritize your content and layout. Actions that are critical to completing user goals must be explicitly visible. Those that are more occasional can afford to be less visible or even hidden. Visual storytelling can elevate your brand and take your website’s UX to the next level.

3. Creativity

Your website needs to make a statement so make sure that you are capable of being bold in your approach. People fall in love with leaders so if they perceive your website or app to be a leader or of a standard they have come to appreciate, then they will know they can trust you. Do not be afraid to say things about the goodness of your business. Your customers deserve to know why you are amazing.

User Retention

Before you start to employ any of this, study your target audience. Map out the beginning, middle, and end of the experience. Approach it from the point of view of the user. The beginning is the stimulus of the customer journey. Somewhere in the middle, you’ll engage with them and the end is where they complete their final goal. And don’t forget to do some A/B testing in the process. Remember, you can also get influencer marketing to help you get your story out.

Was this post helpful?