Storyboards - telling the stories of your users visually
•Download as PPTX, PDF•
2 likes•508 views
Many things are really simple and very familiar but that does not mean that they are obvious. The storyboard is a concept that perfectly exemplifies this statement. And despite the fact that many of us have grown up with these (I got my first Mickey Mouse magazine in 1991 when I was four), it is often frustrating how to have them work for us. When I got to understand the power of storyboards 20 years later, I was truly fascinated with them and have been using them ever since. This workshop will not teach you how to draw beautifully, this requires a little talent and a lot of practice. We will talk about communicating our ideas with the different stakeholders in a visual way. About depicting the frustration of users to the management visually so that it is easy for them to grasp. About expressing an envisioned solution to a customer and receiving rapid feedback in an easy to understand fashion and at a very low price. About putting all stakeholders on the same page in regard to what the problems are and what the solutions might look like. About providing context for the various scenarios in which a product is being used. The benefits are numerous and our goal will be to get you familiar with the power of telling visual stories through storyboards.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Storyboards - telling the stories of your users visually
Similar to Storyboards - telling the stories of your users visually (20)
More from Stefan Ivanov
More from Stefan Ivanov (18)
Recently uploaded
Recently uploaded (20)
Storyboards - telling the stories of your users visually
- 1. Storyboards Telling the Story of Your Users Visually
- 2. UX Architect Local leader …but I also like running, skiing and snowboarding, and cold cocktails on the warm sand Stefan Ivanov
- 4. • Always do it on paper first • Illustrate the problem we are trying to solve • The flow of a task in its relevant context • Sequence of a few screens with annotations • Accomplish a task or miserably fail in it Storyboards
- 7. Drawing storyboards • Human that anyone can draw • Drawing different ages • Adding accessories • Drawing the crowd • Inside or outside • Time of the day • Using colors • Focus through silhouette • Writing the annotations
- 8. • Show the big picture first, UI will come next • Pinpoint frustration and create empathy • Quick and easy to create for early validation • Ideas are easier to communicate with stakeholder • Skeptics always neglect it as means to validate ideas early on Benefits
- 11. Hands-on 30 minutes We want to build a one button personal hardware device for the audience of PowerPoint presentations. The device is synced to the recordings being made and allows each attendee to mark/highlight specific moments from the talk that can be later used as a way to navigate the recording when it gets submitted online. Each person from the audience uses his personal device to highlight his very own special moments during the talk he is attending. Let’s “storyboard” how a user scenario may unfold.
- 12. Pick a peer and spend 5 minutes to give him feedback on the storyboard that he has created. Then switch roles and do the same so that in the end you both have your feedback. Feedback from peers Let’s “storyboard” how a user scenario may unfold. 10 minutes
- 13. 10 minutes At the end of the workshop let two of us share their storyboards with the most important piece of feedback that they got with the rest of the attendees. Share your storyboard and feedback Let’s “storyboard” how a user scenario may unfold.
Editor's Notes
- The description of this workshop told you about my early childhood experience with story boards but I believe that many of you share this experience with me. How many of you have opened a comic magazine by the age of seven? And when did the rest open their first comic book? How old were you when this happened? I wouldn’t be wrong if I stated that the concept of storyboards have been familiar to us all our lives. And this is crucial as it makes the storyboard a very powerful communication medium since it introduces no entry barrier to anyone involved. A medium for a designer to express the story of his user in a visual way.
- My name is Stefan and I work for Infragistics Bulgaria, the company behind this wonderful event, as a UX Architect. I am also a local leader for the Interaction Design Foundation. But I like many other things as well such as running, skiing and snowboarding, and enjoying my summer vacations with a cold drink on the warm sand. And I live and breathe user experience.
- As the very first thing on this workshop I want to make the point that there are numerous approaches to storyboarding. And they can all be laid down on this axis reflecting to where we want to put the focus. Is it at the user and his context irrelevant of the characteristics of the device, or on the specifics of the interface. As a low fidelity product I tend to prefer the former and I will talk about that approach. Drawing storyboards that are focused more towards the device come at a later stage, when we can also use other tools such as prototyping software like Balsamiq – it gives you this feeling of a sketch despite the fact that you are supposedly in your later stages of design. So the focus of my presentation will really be about telling stories of your users with your products, where the specifics of the product are omitted to a large degree.
- So let’s dive right into storyboards. First important thing is that the storyboard is a tangible product that is drawn on a sheet of paper. There are many digital storyboarding tools but in the early stages of product design it is important to give everyone the feeling that it is a quick sketch aimed to gather initial feedback and should look like one, not something polished and impressive that people are reluctant to critique. The one purpose of the story board is to illustrate a problem that our product solves. We are depicting the flow of tasks that leads to the solution together with the context of solving the problem. Is the user on the go, or relaxing at home. To show all this usually three to five screens are enough as it is also important to overlook the details and draw the big picture of the process instead. Annotating each screen with one or two sentences help to tell a more clear story and reduce the risk of misinterpretations. In many cases we draw two storyboards for the same scenario, where one shows how the user fails in his traditional approach, pinpointing the problem and its impact. In the other we show a success story that highlights the positive impact of our product that ultimately leads to solving the problems present in the other one.
- Here is a storyboard that a team fellow drew about five years ago for a university project. We were trying to address an issue that civil engineers experience when collecting data with different pieces of equipment. All different data sets lacked integrity and needed manual processing to put it all together. At the same time measuring with each instrument was done separately, which lead to long duration of the measuring activities altogether. Here you see e scenario where one engineer performs the whole measuring task alone in very little time with a single measuring device.
- And here you see a whole team of engineers that make the different measurements with one of them being the scribe and all others using various pieces of equipment to measure the different characteristics they are interested in. As you can see the last image from the series subtly indicates that it took them a whole day to finish the tasks and they are still working on it even after sunset – it simply consumes too much time even if they are a whole team.
- Introduce starman as the easiest way to draw a storyboard character. Introduce the concept of aging – babies with larger head related to the body and adults with a different proportion (slim, fat, tall, short) Accessories that bring meaning such as police badge, civil engineer helm, sports guy cap, school kid backpack Drawing a crows of starmen, reducing the detail amount and using appearance as a mass of people Show context in the background with objects familiar for inside (furniture, windows) and outside locations (trees, bushes, buildings) Expressing context of the time of the day via the clock hands (inside) and the day light and sun position (outside) Using colors to highlight male/female, accessories and other signifying elements to add more meaning. We can use color and/or contrast to draw the user focus to a particular past of the scene (a specific human, something he is holding/wearing). It is also important to annotate each screen as some artefact might not be spotted or others can be misinterpreted by the one viewing the storyboard. Within this annotation we can take an approach that describes the image or one that tells a story that complements the image and outlines just the basics. No matter which of the two approaches we select, it is good to keep it consistent for the whole storyboard strip. Another strip of scenes might use the other approach for writing the annotation.
- The benefits that storyboards bring are that we focus on a big picture first to establish understanding about the user in general, the context in which he will be using our solutions and identify some general factors that might serve as constraints to later design decisions. Storyboards should be made public among the product creators so that they are all able to build empathy for the user and the situation he is in. The frustration he is experiencing is what should drive the decision making process at any step of the product lifecycle. Stroyboards are quick and easy to create to validate initial assumptions cheaply, but they also are a great communications means to bring all stakeholders around the table and establish a common understanding about the problem. One thing that we should always remember is to communicate clearly the purpose of storyboards to all stakeholders since the pessimists and skeptics among them tend to neglect them due to their low fidelity.
- Here is another example of storyboards that I used to keep me focused while I was working on my master’s thesis. The problem I was trying to solve was that embarrassing situation when our phone start buzzing in silent mode during a meeting. Despite the fact that it is in “silent“ mode the sound from the vibrations sometimes interrupts the whole meeting and nobody is happy about it. My idea was to build a textile input device supporting rich interactions such as gestures that serve to control a mobile device, without the need to take it out of the pocket.
- And here is what a success scenario might look like, with the user drawing a cross on his pocket area to cancel the phone call. Another gesture can be used to cancel the call and send a specific message to the caller such as “I am in a meeting and will call you in 10 minutes”. Notice how the gesture interaction is zoomed in in a circular callout to stress the location where the gesture takes place and it’s specific form (a cross in this particular example).
- Here is the hands one task for the rest of this workshop. Let’s get our hands dirty by drawing a few storyboards, and then discuss the approaches taken by different people in the workshop.
- Now let’s get some feedback on our works of creativity.
- And now let’s find out, who was able to do what and the sort of feedback they got from their peer.
- Thank you all for the amazing discussion and before closing the workshop I would like to open a brief Q&A to answer any remaining questions.