Guide to Visual Storytelling for UX – UX Planet
Visual storytelling is one of the most powerful tools a UX designer has to establish an emotional connection with the audience. In this article, we explore why visual narrative works, and look at some great examples of how to do it right.
Quick takeaways: visual storytelling, the art of expressing a narrative in visual form, is fundamental to the human experience. Scientifically, it works because of the way the brain processes images. UX designers should leverage the way the eye scans content to help build a narrative and foster a more comfortable decision-making process.
We’ve identified 9 golden rules for visual storytelling in UX design, and we’ve found 5 great examples of websites that get visual storytelling right.
What is visual storytelling?
The simplest definition of visual storytelling is that it’s a way of expressing a narrative visually — using images such as illustrations, photos, graphics or videos to create a story in your audience’s mind. It’s something of a buzzword these days but the truth is that it’s quite a far-reaching topic which needs to be approached carefully. Done right, visual storytelling creates a long-lasting emotional experience for your audience. In this article, we’ll take an in-depth look at visual storytelling, also referred to as visual narrative, its impact on UX design and how and when to use it on your website.
Visual storytelling: a very human history
Storytelling is an ancient human tradition. Anthropologists say that storytelling is a vital aspect of what makes us human. It appears in all human cultures and performs all sorts of functions, including education, cultural bonding, and entertainment. From sitting round a campfire to watching your latest Netflix crush: we surround ourselves with stories. They’re what make us tick.
From its earliest days, storytelling has made use of visual elements. Visual narrative can be seen at work in cave and rock paintings, ancient carved tablets, Roman mosaics, Buddhist temples and Norman tapestries. The first stories we read with children are entirely visual — language needs to be learned over several years while visual stories can be understood from a much earlier age.
From cinema and publishing to the web
The concept of visual storytelling seems to have been imported to web design from the worlds of cinema and publishing. In cinema, the term is used to describe the techniques and visual cues that a director can employ to add to or help boost the narrative of a film. For example, movies often make use of color to trigger an emotional or psychological response in the viewer. Beyond the use of color, some of the most memorable scenes in many films are remembered for their visuals rather than their dialogue — the famous crop duster scene in Hitchcock’s North by Northwest is pure visual narrative.
Around the middle of the 2000’s, people started to talk about the importance of storytelling for web content and marketing. As infographics increased in popularity, SEO and B2B marketing specialists spotted that adding eye-catching graphical elements to web content could deliver much higher conversion and engagement rates. Content creators were encouraged to use narrative — and visual narrative elements — to better engage their audience.
The science behind visual storytelling
There are reasons why people find visual narratives to be particularly powerful. The cliche has it that a picture is worth a thousand words and the truth is that humans are a deeply visual species.
Some interesting facts about vision and the human brain:
- The human brain is fine tuned for processing visual information, and dedicates 30% of the cortex to visual processing, compared with 8% for touch and 3% for hearing.
- The brain can identify images after as little as 13 milliseconds, far less time than it takes us to recognize and interpret a verbal cue.
- 65–80% of us learn better visually.
- Humans remember pictures incredibly well. In fact, we can remember 2000 pictures to 90% accuracy over several days.
When it comes to the impact of visual elements on webpages and in apps, the evidence is just as clear. User Experience gurus Nielsen Norman Group found that 79% of users always scan any new page they see, with only 16% reading word-by-word. Their recommendation is that text should be scannable, well-written and enhanced with high quality graphics.
But incredibly, it’s not just that our brains our receptive to images and other visual stimuli. Research has found that the visual cortex actually makes simple interpretive decisions on its own, without waiting for the ‘decision making’ part of the brain to kick in. The implication of this discovery is that just receiving a visual input is enough to affect our brain’s decision making and interpretation.
The human eye and web design
There has been much research done into the way we look at websites when we open them. The most typical patterns, at least for speakers of left-to-right languages, are the Z and the F patterns:
In both patterns, the eye explores from left to right and then down the page, with occasional additional left-to-right horizontal scans. This is why it’s important to structure your content — and your visual storytelling — in a way that matches the way your customers read.
Tips for leveraging F and Z patterns in content UX design:
- Keep your content area on the left side or in the middle of the page
- Making sure that text is in a central column or slightly to the left of center helps eye find is way comfortably. Placing text on the left and right, or just the right, leads to a less agreeable reading experience and will cause readers to drop out earlier.
- Keep text to a maximum of around 75 characters per line
- Limiting line length can dramatically improve a reader’s level of comfort, encouraging them to stay on the page and read more.
- Break up text with images, headings and other elements
- Most readers will find monolithic blocks of text off-putting. At the same time, SEO expertise tells us that Google prefers longer original articles. So you’ll need to find a compromise that keeps customers coming to your website, and keeps them reading after they’ve arrived. Use headings, subheadings, images, graphs, videos, bullet lists and pull quotes to provide regular focus points for your readers’ eyes.
- Tease content lower down the page
- Design your page so that as the reader scans it she is encouraged to scroll down. You can do this by making sure that the next visual element is partially visible at the bottom of the page. Aim to show about 20% of this teased element.
Approaching visual storytelling for UX
It shouldn’t be surprising to see that the concept of a visual narrative found a natural home in the user-story rich world of UX design. But considering the sheer power of visual input on perception and decision making at an unconscious level, the impact of UX design on creating a successful narrative is potentially huge.
Visual storytelling in UX design is about trying to help the users along her journey so that it runs as smoothly and easily as possible. For UX design, visual storytelling is an underlying methodology, and a way to deliver the best possible user experience. Yes, it can be used to encourage a user to click a call to action but the aim should be more on encouraging a positive decision-making process.
When should you use visual storytelling?
Visual storytelling really comes into its own when your reader or user needs to make a decision. Think about moments when a user might be unconsciously asking themselves:
- Do I want to keep reading this article?
- Do I want to click this button?
- Do I want to give this company my email address?
- Do I trust these people?
- Am I interested in what they have to say?
It’s in situations like these that providing a visual narrative can put the user at ease and make them more comfortable with the next step forward. Follow these rules to make sure your visual narrative is helping.
9 golden rules for successful visual storytelling in UX design
- Create a visual narrative that delights users
You need to achieve a balance between the professional and the friendly. It must be consistent. And it needs to always match your brand’s design language.
- Find the right story for your audience
Are you helping them save the world, or save a dollar? Do they want to reach more clients or keep their feet warm?
- Keep your story simple
You should be able to express the narrative in one sentence. If you can’t, it will be difficult to express visually.
- Interaction, animation and video are all winners
When possible, build interactions and animation or video into your visual narrative. They make for a much more absorbing experience, trigger a deeper emotional response and live on for longer in the memory.
- Always use visual clues that are positive and aimed at fostering a happy experience
Your visual narrative should avoid negative images designed to scare your user or push them aggressively towards touchpoints.
- Don’t be afraid of taking a chance on something completely new
While maintaining brand consistency, don’t base your new visual narrative on the way you always did things in the past. A tip: Look for inspiration in nature. Organic and natural graphical elements put people at ease. Birds, trees, rolling hills, paths can all be positive and intriguing.
- Match your typography to your visual narrative
The typeface you choose, and the way you use it impact heavily on the visual story you’re telling. Serifs can communicate reliability, while chunky fonts are homely and welcoming.
- Be authentic: avoid overusing stock images or footage
People tend to spot stock images immediately, particularly if that’s all you have on your site. Stock images can often make a user feel that the content is ‘stock’ as well. A visual narrative will never work if a user feels it’s contrived or lacking authenticity.
- Be culturally sensitive
Always be aware of the different ways that a color or type of image could work in different cultures. The classic example is white, which in European cultures tends to communicate a sense of purity, while in many Asian cultures it represents death and sadness. Some animals have negative connotations in different cultures, too.
Including visual storytelling in your UX strategy
The best way to build a visual narrative into your UX is to have it there from the beginning. When you start to develop your user experience strategy, you should include visual narrative front and center. It’s a vital part of your strategic goals:
- When considering behavioral patterns, you need to be able to predict and satisfy user expectations. Visual storytelling forms a big part of shaping the user experience.
- When you align all the different stakeholders in the product, they need to understand the importance of the visual narrative you want to create. Trying to add this in later on will be tricky both in terms of reworking your UX design and achieving stakeholder buy in.
- Visual storytelling will only work properly if it’s part of the DNA of your website or app.
Visual storytelling for landing pages
Your landing pages, including your homepage, are of vital importance for establishing a relationship between your customer and your brand. They’re a great opportunity to introduce and reinforce your brand, and establish a visual narrative that will be fostered and nourished throughout the rest of your customer’s journey — and lifetime — with your product.
Homepages and landing pages should be simple and to the point. Avoid excessive navigation options and jump straight into your value proposition. Surround and infuse this with visual storytelling. Think about the Z and F patterns and arrange your narrative accordingly. Position your content exactly where your reader’s eye expects to find it, break it up into clear sections, and tease content lower down the page to encourage scrolling. All the way through, your visual narrative should guide the eye, delight and reassure.
5 great examples of visual storytelling in websites
Here are some inspiring examples of visual storytelling done right.
Highline: Poor millennials
This excellent longform article from Huffpost’s Highline combines great writing with an inventive form of visual storytelling to deliver a truly original experience. The visual narrative, tracking virtual millennial Becky on her quest to understand structural disadvantage, makes an 8000+ word article feel light and readable. All you have to do is scroll and read. Despite the subject matter, a truly delightful user experience.
Rule of Three agency
Copywriting Studio Rule of Three uses a mysterious, esoteric visual narrative to engage potential customers. Navigating through layers of black and white imagery, with sparse yet punchy copy, Rule of Three’s site is even dominated by three overarching sections — Awareness, Affect and Action. The only disappointment is: there are four of them in the agency. Still, you can’t have everything.
Outdoor clothing and equipment label Patagonia builds its values into its value proposition from the very start. Socially and ecologically conscious, the brand uses eco-friendly messages as taglines to sell eco-friendly apparel. Clever, well-executed and right on.
Conversational data collection experts Typeform use a light and breezy visual narrative to communicate beauty, versatility and ease of use. The illustration style is organic, abstract and free-flowing, encouraging the user to keep scrolling to find out more. Neat and fun.
FT: Uber Game
The Financial Times came up with a novel way of presenting journalistic research into the lives of Uber drivers — an interactive visual game. The Uber game encourages readers to think about the decisions an Uber driver needs to make in their day-to-day, and consider the difficulties of this form of employment. Sensitive, to the point and enlightening.
When you’re taking your user experience to the next level, you’ will want to include visual storytelling. It’ll take hard work, a lot of creativity and a fair deal of honesty to get it right. But the results can be spectacular. There are few more effective ways of creating a lasting emotional memory. So what are you waiting for? Start working on visual storytelling for your next project now!