September 28, 2012 at 10:34Storyboard Design
Probably many of you have heard about storyboards. They are drawn at the first stages of creating a film or cartoon. When producing software, it’s expensive to skip the design stage, and when shooting a movie it’s not just expensive, but very, very expensive. Johnny Depp will not gnaw stale sandwiches on the set until the director decides that three more scenes with mermaids should be added and inserted into the plot of the adopted child and changed her lover. Therefore, in the films all the scenes are pre-drawn and approved, sometimes they even add music and scroll to them in order to appreciate the film’s entertainment and plot even in the first stages.
In design, wireframes and other fast prototypes play such a role. Storeboards, retaining their name and form, as in the film industry, perform slightly different tasks when designing interfaces.
The first time I heard about storyboards at the Human Computer Interaction
course. Course teacher Scott Klemer draws a storyboard.
I have not seen anything like this in the reports of our designers, but Klemer talked about this as a widespread, well-known practice.
As it turned out, in the west this tool is quite popular, if you are interested in who, how and why use it, welcome to cat.
I met several opinions about the tasks of storyboards. Some experts suggest using them within the team to form a common vision for all members of the working group. Others advise using them to present their solutions to customers. Periodically, storyboards also act as a design stage somewhere between the formation of characters and the drawing of the first prototype of the system.
It is clear that storyboards for all three tasks will be different. Those doodle curves that you can draw for your team should be different from the tool that will present the solution to the client. Below I will tell you in more detail how the solutions differ for different audiences, but for now let's consider what is common between them.
In any case, the storyboard should answer the questions (it does not matter, the client or your colleagues):
To somehow illustrate the text, I drew a storyboard for a fictional program with cookie recipes. Let it be called, for example, DarkSide.
Let's start with the answers to the questions:
It should be noted that all answers depend on the formulation of the original problem. If the initial need is “to make cookies from what is at home,” then all of the following answers will be completely different.
In fact, one application can include several scenarios, and, accordingly, can be illustrated by several storyboards. But it seems to me that for presentations I should limit myself to one storyboard, showing the prerequisites for the design and the decision made.
For example, we will draw a storyboard for DarkSide to show it to the customer, before the presentation of the actual prototype interface.
DarkSide Usage Scenario
The literature in the school taught the plot structure of any artwork. The storyboard is the same story, and it uses the same laws of composition.
The structure of the story
Stages of the development of the plot about DarkSide
With the problem and the solution more or less clear, let's talk about the benefits. The last frame must necessarily show the solution of the client’s business problem. Not a solution to a user's problem (it is on the previous frame), but a solution to a business problem.
Here is the distribution of the application between users and high ratings. It makes no sense to show the client how the girl prepared the cookie, its goal is to sell the application or sell advertising in a popular application.
Irrelevant. Storyboards should be as fast a tool as paper design. You do not need to be able to draw to draw a stick-stick cucumber. People very sensitively perceive everything at least remotely similar to a person (proof on sites where they lay out sockets in which everyone sees a face). If you really, really don't want to draw, you can even use a set of troll faces (preferably, not for presentation to the client).
Feelings are subjective. Many decision makers are more comfortable dealing with numbers and measurable quantities than with emotions. For them, we can note everything that our character goes through on the impression chart. This will give clarity and weight to our ideas.
The impression graph is a curve showing the character’s state throughout the story.
* In my personal opinion, a chart is needed either for people with Asperger syndrome, or for serious businessmen with calibrated vision, sharpened on charts. Obviously, the construction of this pseudographics is completely subjective and it can be used only for illustrative purposes
** The storyboard and the schedule of impressions are taken from the article by Ben Crozers below, more about his research can be found on the link in the list of references.
The figure below is a simple storyboard about a girl who wants to book a trip. The ending of the story is this - all the means that she used have their own shortcomings and did not help her realize her plan.
1. The graph in the figure depicts the mood line of the storyboard from the previous figure. A gap in the line shows the passage left behind the storyboard brackets.
2. There must be clear key points in the storyboard at which decisions are made, expectations are exceeded or are not justified.
Service managers call these points service points. These points are important in measuring emotions, try to be divided into different episodes.
Mark the key points on the chart.
3. Areas of positive and negative mood highlight extremes for clarity.
People are very receptive to stories: an innate sense of curiosity attracts them to any plot. They empathize with the heroes, empathy helps on an emotional level to convince them that otherwise they would have to explain for a long time with “logical” arguments. A storyboard, like any illustration, carries in itself additional layers of meaning, intuitive and distorted not so much as words.
The storyboard will help to make your arguments vivid and memorable. A crooked little man next to a predatory sun who has swayed will be remembered more than statistical calculations that users would prefer a higher monitor brightness or a non-glare screen.
Experience Graph for DarkSide App
When I look at the design process in Western studios, I always get a strange feeling.
One studio makes prototype applications very nicely glued from color cardboard. Somewhere I saw a prototype, amazingly painted with either pastel or colored pencils, and down to the gradients on the buttons. Some studios shoot short videos on the phone about how the user behaves. Now also comics, as it turned out, are.
It always seemed to me that this was such fun entertainment. Well, gluing the applique for the whole group is cool. You can smear the manager with glue, or sprinkle the designer with scraps. Much more fun than drawing layouts in the design.
Perhaps it was originally student practice, because the task is interesting and will entertain and interest will instill, but the developers transfer it to real conditions, instead of forgetting it after the graduation party.
In general, most of these techniques are very interesting, but I can not overcome the skepticism towards them. If you have any thoughts on this, it will be interesting to discuss.
In design, wireframes and other fast prototypes play such a role. Storeboards, retaining their name and form, as in the film industry, perform slightly different tasks when designing interfaces.
The first time I heard about storyboards at the Human Computer Interaction
course. Course teacher Scott Klemer draws a storyboard.
I have not seen anything like this in the reports of our designers, but Klemer talked about this as a widespread, well-known practice.
As it turned out, in the west this tool is quite popular, if you are interested in who, how and why use it, welcome to cat.
Tasks
I met several opinions about the tasks of storyboards. Some experts suggest using them within the team to form a common vision for all members of the working group. Others advise using them to present their solutions to customers. Periodically, storyboards also act as a design stage somewhere between the formation of characters and the drawing of the first prototype of the system.
It is clear that storyboards for all three tasks will be different. Those doodle curves that you can draw for your team should be different from the tool that will present the solution to the client. Below I will tell you in more detail how the solutions differ for different audiences, but for now let's consider what is common between them.
In any case, the storyboard should answer the questions (it does not matter, the client or your colleagues):
- Who is your character?
- What need does the system satisfy?
- What task should be completed?
- What leads the user to use your system?
- In what conditions is it carried out?
- What is the sequence of actions?
To somehow illustrate the text, I drew a storyboard for a fictional program with cookie recipes. Let it be called, for example, DarkSide.
Let's start with the answers to the questions:
- character - middle-aged woman
- need - cooking cookies
- the task is to select the necessary products and study the sequence of steps for cooking
- ignorance of the recipe leads to the use of the user's application
- the first part of the task is performed either at home, or, when there is a shortage of products, in the store, the second part is performed in the kitchen
- sequence - choosing a specific recipe, studying the list of necessary products, if necessary, acquiring the missing ones, following the cooking instructions
It should be noted that all answers depend on the formulation of the original problem. If the initial need is “to make cookies from what is at home,” then all of the following answers will be completely different.
In fact, one application can include several scenarios, and, accordingly, can be illustrated by several storyboards. But it seems to me that for presentations I should limit myself to one storyboard, showing the prerequisites for the design and the decision made.
For example, we will draw a storyboard for DarkSide to show it to the customer, before the presentation of the actual prototype interface.
DarkSide Usage Scenario
Plot
The literature in the school taught the plot structure of any artwork. The storyboard is the same story, and it uses the same laws of composition.
The structure of the story
Stages of the development of the plot about DarkSide
With the problem and the solution more or less clear, let's talk about the benefits. The last frame must necessarily show the solution of the client’s business problem. Not a solution to a user's problem (it is on the previous frame), but a solution to a business problem.
Here is the distribution of the application between users and high ratings. It makes no sense to show the client how the girl prepared the cookie, its goal is to sell the application or sell advertising in a popular application.
Drawing technique
Irrelevant. Storyboards should be as fast a tool as paper design. You do not need to be able to draw to draw a stick-stick cucumber. People very sensitively perceive everything at least remotely similar to a person (proof on sites where they lay out sockets in which everyone sees a face). If you really, really don't want to draw, you can even use a set of troll faces (preferably, not for presentation to the client).
Pseudo-scientific approach
Feelings are subjective. Many decision makers are more comfortable dealing with numbers and measurable quantities than with emotions. For them, we can note everything that our character goes through on the impression chart. This will give clarity and weight to our ideas.
The impression graph is a curve showing the character’s state throughout the story.
* In my personal opinion, a chart is needed either for people with Asperger syndrome, or for serious businessmen with calibrated vision, sharpened on charts. Obviously, the construction of this pseudographics is completely subjective and it can be used only for illustrative purposes
** The storyboard and the schedule of impressions are taken from the article by Ben Crozers below, more about his research can be found on the link in the list of references.
The figure below is a simple storyboard about a girl who wants to book a trip. The ending of the story is this - all the means that she used have their own shortcomings and did not help her realize her plan.
1. The graph in the figure depicts the mood line of the storyboard from the previous figure. A gap in the line shows the passage left behind the storyboard brackets.
2. There must be clear key points in the storyboard at which decisions are made, expectations are exceeded or are not justified.
Service managers call these points service points. These points are important in measuring emotions, try to be divided into different episodes.
Mark the key points on the chart.
3. Areas of positive and negative mood highlight extremes for clarity.
People are very receptive to stories: an innate sense of curiosity attracts them to any plot. They empathize with the heroes, empathy helps on an emotional level to convince them that otherwise they would have to explain for a long time with “logical” arguments. A storyboard, like any illustration, carries in itself additional layers of meaning, intuitive and distorted not so much as words.
The storyboard will help to make your arguments vivid and memorable. A crooked little man next to a predatory sun who has swayed will be remembered more than statistical calculations that users would prefer a higher monitor brightness or a non-glare screen.
Experience Graph for DarkSide App
Final Revealing Comment
When I look at the design process in Western studios, I always get a strange feeling.
One studio makes prototype applications very nicely glued from color cardboard. Somewhere I saw a prototype, amazingly painted with either pastel or colored pencils, and down to the gradients on the buttons. Some studios shoot short videos on the phone about how the user behaves. Now also comics, as it turned out, are.
It always seemed to me that this was such fun entertainment. Well, gluing the applique for the whole group is cool. You can smear the manager with glue, or sprinkle the designer with scraps. Much more fun than drawing layouts in the design.
Perhaps it was originally student practice, because the task is interesting and will entertain and interest will instill, but the developers transfer it to real conditions, instead of forgetting it after the graduation party.
In general, most of these techniques are very interesting, but I can not overcome the skepticism towards them. If you have any thoughts on this, it will be interesting to discuss.
List of references
- Lecture HCI 3.1: Paper Prototypes and Mockups , registration required;
- UXmatters Using Storyboards and Sentiment Charts to Quantify Customer Experience (that article, where the schedule of impressions comes from);
- A series of articles by Johnny Holland: 1 , 2 , 3 ;
- Presentation of Storyboarding ;
- Presentation of Conserve code storyboard experiences with customers first ;