Storyboard/comic testing
A storyboard communicates a story through images displayed in a sequence of panels that chronologically maps the story’s main events.
Outcome
We use storyboards to provide additional context to our teams and stakeholders. Using images makes the story quick to understand at first glance and easy to remember.
You can use storyboards in a number of different contexts for different outcomes:
- After usability testing to convey how your participants interacted with the site or application
- To enrich journey maps by adding an image of the user‘s context in various stages of interacting with a product
- To sketch out an idea of how a user may use a feature if it helps to visualize a potential experience or you want to have a better understanding of the user’s environment before starting development
Method
Part 1: Gather your data
First, determine which data will be used in your storyboard — user interviews, usability tests, or site metrics. It is possible to do a storyboard without real data if you haven’t collected data yet or you want to use storyboards as a form of ideation.
Part 2: Define the basics
Define the persona and the scenario or user story represented. The scenario should be specific and should correspond to a single user path, so that your storyboard doesn’t split into multiple directions. For complex, multipath scenarios, maintain a 1-to-1 rule — one storyboard per one path that the user takes.
Part 3: Plan your steps
Start by writing out the steps and connecting them with arrows before going straight to the storyboard template. Next, add the emotional state as an icon to each step, as seen below. This technique will help you start to visualize what each visual frame will include.
Part 4: Create visuals and add captions
While you can use advanced illustration skills to create a beautiful comic-book-quality storyboard, they are not a prerequisite for effective storyboards. It’s okay to use stick figures or basic sketches of what you’re trying to convey. Add captions as bullet points underneath the visuals to describe additional context that is not understood at first glance.