Visual storytelling is a powerful technique for designers in their interactions with clients.
In the Convivial Toolbox, Liz Sanders says: “most people are not good at dealing with abstractions, as in mathematics or formal logic. People are very good at thinking in terms of stories about people and the things they do and what happens to them.”
A perfect example of this narrative-driven thinking is Wason’s selection task; a classic logic problem becomes much easier to solve when described in terms of people and the events occurring to them, than when it is described in terms of abstract symbols (like numbers and letters).
People will find story-based deliverables much more compelling, easy to understand, and friendly.
Put Your User at the Heart of Your Visual Stories
Before you start creating a visual story, think about your audience. Ask yourself what kinds of actions this person would need to take to accomplish their desired task or fulfill an unmet need. What is motivating them? How comfortable will they be with the product you are designing?
It helps to storyboard these scenarios using very rough thumbnail sketches. This builds up a more complete and nuanced narrative. Consider the user’s circumstances, background, and motivations. This will provide insight into how they will act in the next stages of the story, as we sketch flows and wireframes that take the user through the product concept we are designing. This storyboard for a redesigned food truck service gets a great handle on user needs and motivations.
If sketching or storyboarding intimidates you, Gamestorming provides a fantastic beginner’s guide to sketching quickly and effectively.
Communicate Using a Consistent Visual Language
In the beginning of the design phase, most of the artifacts we present to clients are low fidelity rough sketches. We need to set up a visual language to communicate how a product concept might look, how a user might interact with it, and the kinds of things it can do in a fast, iterative way.
No matter what the familiarity or comfort level with visual communication, it is important to create a coherent, consistent, and generative visual design language.
When designing a visual language, keep in mind the qualities of written language outlined below:
… modular and therefore infinitely generative.
Creating a consistent set of visual symbols for the selection of content types, interactions, and user flow scenarios, allows us to be flexible with our visual language.
… structured and predictable because it abides by rules of syntax.
Sketching and wireframing require structure in the same way a sentence does in order to let your client understand the range of actions a user can take with the proposed concept. Visual communication needs to be bound by rules in order to create consistent, learnable, and familiar experiences.
… built up into stories.
Within a structured framework that allows for generative combination of symbols and modules, we can create clear user stories, flows, and explorations. These visual stories are engaging and more easily understood by clients than discrete or disconnected wireframes that simply show navigation, functionality, and content in a “logical” or “systematic” way.
A great resource to start with and build upon is Jakub Linowski’s Interactive sketch notation.
Directed vs. Exploratory Stories
When a project is in the graphic design stage, audience motivations and needs continue to inform the story we visualize in our mockup presentations. At this point we can decide if the final work we present to clients will be directed, task-focused in the narrative, or an exploration of visual elements.
I like to map out all the transitional interactions that take the user from one step to another using a list or quick storyboard. This way I know what I need to capture from the Photoshop files, and in what sequence. Compiling these images into a deck, with subtle transitions that mimic how a button might behave in the browser before going on to the next page really helps bring the images to life and shows their interactive potential.
By anchoring still images within a user story that has been leveraged throughout the entire project, we can ensure the client gets a sense of continuity, consistency, and clarity. Visual stories facilitate understanding of how a user will navigate the system. It can also pinpoint and prevent usability problems at any point in the design phase, before the concept enters development.