<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Johnny Holland &#187; Ben Crothers</title>
	<atom:link href="http://johnnyholland.org/author/ben-crothers/feed/" rel="self" type="application/rss+xml" />
	<link>http://johnnyholland.org</link>
	<description>It&#039;s all about interaction</description>
	<lastBuildDate>Tue, 22 May 2012 15:10:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Storyboarding &amp; UX &#8211; part 3: storyboarding as a workshop activity</title>
		<link>http://johnnyholland.org/2011/10/storyboarding-ux-part-3-storyboarding-as-a-workshop-activity/</link>
		<comments>http://johnnyholland.org/2011/10/storyboarding-ux-part-3-storyboarding-as-a-workshop-activity/#comments</comments>
		<pubDate>Wed, 19 Oct 2011 13:57:13 +0000</pubDate>
		<dc:creator>Ben Crothers</dc:creator>
				<category><![CDATA[Methods & theory]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=11857</guid>
		<description><![CDATA[<img width="220" height="159" src="http://johnnyholland.org/wp-content/uploads/storyboarding-header-3-e1324187530128.jpg" class="attachment-index-categories wp-post-image" alt="storyboarding-header-3" title="storyboarding-header-3" />The previous article in this series described a step-by-step technique for drawing storyboards to help us as designers understand the [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="159" src="http://johnnyholland.org/wp-content/uploads/storyboarding-header-3-e1324187530128.jpg" class="attachment-index-categories wp-post-image" alt="storyboarding-header-3" title="storyboarding-header-3" /><p>The previous article in this series described a step-by-step technique for drawing storyboards to help us as designers understand the issues we try to solve, and to communicate existing issues and potential solutions to others. When it comes to research techniques, the great news is that storyboarding can also help others articulate their own issues and ideas. It&#8217;s to this purpose we now turn.<span id="more-11857"></span></p>
<h2 dir="ltr">The importance of doing as well as talking</h2>
<p>One of the great truths about user experience design is to observe what people do, rather than only<a href="http://uxmyths.com/post/746610684/myth-21-people-can-tell-you-what-they-want"> listen to what they say</a>. This is why user-centred design techniques like contextual inquiry, job analysis and usability testing are so valuable. But when it comes to user research workshops, we know that we&#8217;re up for a lot of listening, and that people have a habit of putting on their &#8216;Sunday best&#8217; when giving opinions and describing their experiences.</p>
<p>Thankfully, there&#8217;s a whole host of various activities we can do with workshop participants to reveal user requirements and behaviours, beyond talking and listening. These activities tend to be easy to understand, easy to do, and (hopefully) easy to derive insights from participants that can be used to formulate the project&#8217;s solution.</p>
<h2 dir="ltr">When to use storyboarding as a workshop activity</h2>
<p>At Digital Eskimo, we have had great success with using storyboarding as an activity in workshops. Storyboards have very broad appeal, for many of the reasons described in the first article in this series. They are easy – even entertaining – to consume, because they bring together many different aspects of story, character, problems and resolutions, all in a familiar format of images and words, to make even complex ideas much clearer. They are also easy to draw, even at a very basic level, because everyone understands the sequential nature of telling a story through simple pictures.</p>
<p>Storyboarding is useful in the following specific instances:</p>
<ul>
<li>When participants need to tell detailed experiences – storyboards provide an easy framework to help people be specific about relating an experience, including     expectations, decisions and feelings, rather than just vague commentary;</li>
<li>As a co-design exercise to generate ideas – we at Digital Eskimo are big proponents of co-design, or<a href="http://en.wikipedia.org/wiki/Participatory_design"> participatory design</a>. Participatory design actively involves all parties – client stakeholders, researchers, designers and public alike – in the design process, to ensure the end result is as useful and desirable as possible. This approach suits us designers, because we&#8217;re used to thinking conceptually, whereas many others have trouble thinking this way. Allowing people to express their ideas through a story that they can relate to, can be much more effective;</li>
<li>When it&#8217;s important to keep emotion in the experience, but not in the telling of the experience – sometimes in workshops there are many complex and sometimes conflicting emotions involved in relating experiences relevant for user requirements. Or     sometimes the mix of participants in a workshop is such that some might feel inhibited to share certain experiences. It&#8217;s hard for some to be completely honest, for example, if their superiors are in the same workshop. Storyboards give them permission to keep emotions out of verbal communication, but lock them into the story on the paper;</li>
<li>When participants are children – the comic-style conventions of storyboards, such as simple stick figures and emoticons, help children articulate more than their limited verbal abilities usually allow. Some researchers, such as Hannah Chung and Elizabeth Gerber (<a href="http://www.mech.northwestern.edu/egerber/www.mech.northwestern.edu_egerber/Creative_Action_Lab_files/EmotionalStoryboarding_Chung_Gerber.pdf">Emotional Storyboarding: A Participatory Method for Emotional Designing for Children</a>, Northwest University, Illinois), have had great success with this approach.</li>
</ul>
<div id="attachment_11858" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11858" title="storyboarding-3-photo" src="http://johnnyholland.org/wp-content/uploads/storyboarding-3-photo.jpg" alt="" width="500" height="375" /><p class="wp-caption-text">A workshop participant drawing a storyboard to express her experience of using various types of office software. Notice the use of a 6-frame template on A4 paper, and simple use of figures and text.</p></div>
<h2 dir="ltr">A practical guide to storyboarding as a workshop activity</h2>
<p>The following steps and ideas describe how you could use storyboarding as an activity in your user-centred design workshops. You can use these steps whether you&#8217;d like to use the storyboarding format to gather requirements from your participants, or to gather ideas.</p>
<h4 dir="ltr">Be clear about the purpose</h4>
<p>Like all workshop activities, it&#8217;s important that you know exactly why you&#8217;re conducting the storyboarding activity. You may end up with a range of lively attractive storyboards, but without a clear goal, they may not give you the insights you&#8217;re hoping to derive.</p>
<h4 dir="ltr">Materials</h4>
<p>Here&#8217;s a list of materials that have proved valuable over and over again in the storyboarding activities we have conducted:</p>
<ul>
<li>A4 &#8217;6-up&#8217; storyboard template &#8211; It&#8217;s usually sufficient to give people one A4 template, with six frames drawn on it, in landscape format (pictured above). You may want to also try including some lines under each frame for people to add notes;</li>
<li>Pens, pencils, textas &#8211; Drawing materials can include anything from pens and pencils, to lots of different coloured textas. Even if you&#8217;re conducting a workshop with conservative business types, coloured textas sends a message that it&#8217;s OK to be creative and playful;</li>
<li>Icons &#8211; It can still be a little daunting for some to start drawing with just the template and a pencil. Depending on the context of your workshop, it&#8217;s a good idea to include a pack of prepared cut-out icons, including pictures to indicate channels (mobile phone, call centre, store, laptop, tablet, television, radio), transport (walking, car, bus, bike), common websites (Facebook, Youtube, Flickr, webmail) and emotions (anything ranging from happy, curious and hopeful to bored, confused and angry). Icons like these help to accelerate participants&#8217; thinking and demonstrating their experience on paper. Remember to include glue sticks to stick the icons on the storyboards;</li>
<li>Prompt sheet – it never hurts to hand out a simple one-page instruction sheet about what it is you want your participants to do.</li>
</ul>
<h2 dir="ltr">The process during the workshop</h2>
<h4>Set the scene</h4>
<p>When it comes time to do the storyboarding activity in your workshop, frame the activity by telling everyone what the purpose of the exercise is. Refer them to the prompt sheet and materials. If you think it will help, model the behaviour you&#8217;re after by drawing one frame on a template sheet, so that people are clear about what you&#8217;d like them to do.</p>
<p>If your workshop has several activities, they&#8217;re probably coordinated in some way to work as a whole. Tell your participants how the storyboarding activity relates to any other activities that have preceded it. For example, our workshops often have an activity to come up with the desired audience types that will use the product that the workshop is focused on. We then use those audience types as the characters in the storyboards.</p>
<p>Two examples of instructions:</p>
<ol>
<li>Think about an experience you&#8217;ve had with booking a flight online. What sort of flight were you after and why? Where did you start, and what did you do? Using the storyboard template, sketch your experience step-by-step, including anything that went well or went wrong.</li>
</ol>
<ol>
<li>Now that we&#8217;ve described our three target audiences, choose one and sketch on your storyboard template what an ideal experience would look like for that audience to book a flight online. What exactly are they after? Where do they start? What ideas for website features can you think of that would make their experience ideal?</li>
</ol>
<h4>Draw the storyboards</h4>
<p>Decide whether you&#8217;d like each of your participants to draw their own storyboards, or if they will work in small groups. Allow at least ten minutes to let them think and draw.</p>
<p>Get everyone to focus on the same sorts of elements that were discussed in the first and second articles in this series; get them to think about triggers (what has happened to start this story in the first place), the single goal that the character wants to achieve, and what the final outcome is. Should it show a clear benefit of a solution? Or an existing problem?</p>
<div id="attachment_11859" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11859" title="storyboarding-3-wall" src="http://johnnyholland.org/wp-content/uploads/storyboarding-3-wall.jpg" alt="" width="500" height="334" /><p class="wp-caption-text">One of several storyboards drawn in a workshop about designing a better museum visit experience for teachers and students. Notice the use of colour, and how simple figures and drawings can actually convey a lot of ideas.</p></div>
<h4>Present to the group</h4>
<p>After they have drawn their storyboards, it&#8217;s always great to invite each participant up to present their storyboard to the rest of the group. Depending on the context of your workshop, you can then invite some discussion about the experience illustrated, or some critique about the ideas put forward.</p>
<div id="attachment_11860" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11860" title="storyboarding-3-notes" src="http://johnnyholland.org/wp-content/uploads/storyboarding-3-notes.jpg" alt="" width="500" height="233" /><p class="wp-caption-text">This storyboard was actually done by a group of participants as a simple timeline, pinned to the wall. The detail isn&#39;t important, but notice the use of &#39;I&#39; information icons for wherever system information was needed in this process, and the set of speech balloons pinned to the side.</p></div>
<h2 dir="ltr">Try storyboarding in your next workshop</h2>
<p>Try storyboarding as one of the activities in your next workshop, even an internal brainstorming session. You should find that people will appreciate the hands-on nature of the exercise, and the opportunity to express themselves in another way other than verbally. It&#8217;s rewarding for both participant and user experience designer alike.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2011/10/storyboarding-ux-part-3-storyboarding-as-a-workshop-activity/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Storyboarding &amp; UX &#8211; part 2: creating your own</title>
		<link>http://johnnyholland.org/2011/10/storyboarding-ux-part-2-creating-your-own/</link>
		<comments>http://johnnyholland.org/2011/10/storyboarding-ux-part-2-creating-your-own/#comments</comments>
		<pubDate>Mon, 17 Oct 2011 13:57:12 +0000</pubDate>
		<dc:creator>Ben Crothers</dc:creator>
				<category><![CDATA[Methods & theory]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=11842</guid>
		<description><![CDATA[<img width="220" height="159" src="http://johnnyholland.org/wp-content/uploads/storyboarding-header-2-e1324187481677.jpg" class="attachment-index-categories wp-post-image" alt="storyboarding-header-2" title="storyboarding-header-2" />When thinking about storyboarding, most people fixate on their ability &#8212; or perceived inability &#8212; to draw. What is far [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="159" src="http://johnnyholland.org/wp-content/uploads/storyboarding-header-2-e1324187481677.jpg" class="attachment-index-categories wp-post-image" alt="storyboarding-header-2" title="storyboarding-header-2" /><p>When thinking about storyboarding, most people fixate on their ability &#8212; or perceived inability &#8212; to draw. What is far more important is working out the point you wish to make with your storyboard, and the actual story that will carry that point from your storyboard across the room and into the hearts and minds of your audience. In this article explores the value of establishing a reason for the storyboard first, and then how you can create a storyboard using the thinking you’re already using and the skills you already have.<span id="more-11842"></span></p>
<h2 dir="ltr">Get your story straight</h2>
<p>During a recent move, I discovered a whole book filled to the brim with comics that I had drawn during my primary school years. They were typical fare: myself and my schoolmates cast as a band of affable brigands, lurching from one side of the galaxy to the other having all sorts of unlikely and – let’s be honest – highly illogical adventures. In reading them as an adult I realised how rich they were in character development, but how hopeless they were in plot: truly, they rambled all over the place.</p>
<h4 dir="ltr">Establish if a storyboard is the best way to tell your story</h4>
<p>If you’ve read this far, I assume you’ve bought into the value of storyboarding as an exercise to help you think and create, or as communication technique. But to ensure that your storyboard is an instrument of ideation or persuasion, rather than just light entertainment &#8212; like my childhood comics &#8212; it is worth comparing it to other means of getting your message across.</p>
<p>If everyone involved already has a solid shared understanding of the issue at hand, and if everyone has a shared sense of urgency for the same solution to be implemented, then the time for a storyboard has probably passed. In all other cases, a storyboard should be effective.</p>
<h4 dir="ltr">What’s your point?</h4>
<p>It’s essential that you’re clear on what message your storyboard is to communicate. If you’re using it as a thinking exercise, knowing exactly who your character is, and what goal is to be achieved will give a better outcome. There’s something to be said for aimless fluid brainstorming, but ideas generation, scrutiny and validation will be more efficient if you have these elements ready.</p>
<p>If you’re using storyboarding as a communication exercise, ensure you have a compelling message to communicate first, for example:</p>
<ul>
<li>An existing user experience problem to be solved</li>
<li>An impact on user experience caused by an existing situation, or if something isn&#8217;t fixed</li>
<li>A desired user experience based on a particular solution</li>
</ul>
<h2 dir="ltr">Work out your story structure</h2>
<p>If we’re to construct visual representations of stories to communicate customer issues or solutions to others, there’s some preparation to be done to make them logical, understandable and convincing in their arguments.</p>
<p>Much thinking and analysis has been conducted about stories and storytelling, yielding different theories, methods and structures. The first article in this series referenced the<a href="http://en.wikipedia.org/wiki/Monomyth"> Hero’s Journey</a> and <a href="http://en.wikipedia.org/wiki/Plot_%28narrative%29#Freytag_on_Plot">Freytag’s Pyramid</a> as being a useful place to start for translating an issue or solution into a story. The earliest recorded analysis of story (‘Poetics’) was by none other than Aristotle, and Jeroen van Geel’s <a href="../2011/01/20/aristotle%E2%80%99s-storytelling-framework-for-interactive-products/">interpretation of Aristotle’s ordered framework for interactive products</a> is also really useful for applying to structuring a storyboard’s story.</p>
<p>The elements most important for storyboards are:</p>
<ul>
<li>Character – the specific customer or persona involved in your plot. Their behaviours,     appearance, and expectations, as well as any decisions they make along the way, are very important;</li>
<li>Script – (or Diction, in Aristotle’s framework) this covers the character’s internal train of thought, as well as what they say and what others around them say. Revealing what is going on in your character’s mind is integral to a successful illustration of their experience in the storyboard;</li>
<li>Scene – (or Theme) the scenario that our character finds him/herself in. It could be a single room, or switch across several environments and channels, or even just within a single website;</li>
<li>Plot – the narrative that unfolds in your storyboard should focus on a goal for the character, and the key moments involved in achieving – or not achieving – that goal (more of this below). It should start with a specific trigger and end with either the benefit of the solution, or a problem that the character is left with. Try using Freytag&#8217;s Pyramid (from the first article) in structuring your plot.</li>
</ul>
<p>To help your story to be powerful and enduring, here are some points to think about:</p>
<ul>
<li>Authenticity – make your character and their scene, script and plot as real as you can, and your audience will empathise with him/her. Bring out your character’s back-story, speech patterns, and any rough edges. Also, ensure that the way you represent the story has its own internal logic. In other words, in the world of this story, it has to ‘make sense’ for your audience to take your message seriously.</li>
<li>Moments – there are     always several touchpoints or events in an experience where     triggers, decisions, actions, changes in emotional state, and behaviour reinforcement occur. Think about your character and plot in terms of these ‘moments’; whatever particular moments you come up with are great to illustrate.</li>
<li>Emotion – it’s essential to communicate the emotional state of your character     throughout their experience. Even simple iconography like smiley faces and angry faces can add the character and emotion your story needs to come alive in the hearts and minds of your audience.</li>
</ul>
<h2 dir="ltr">Steps for drawing your storyboard</h2>
<p>Just like setting out to design interfaces with a blank piece of paper, starting the storyboard can be a little daunting, especially if you’re not confident in your drawing ability. However confident you are, these steps can help you turn out a better scenario storyboard.</p>
<h4 dir="ltr">Try text or boxes and arrows first</h4>
<p>If you’re more used to visualising with the boxes and arrows of process rather than a comic-style format, that’s fine: go with that first. Or if you’d rather write it out in point form, that’s fine too. The main thing is to break the story up into the trigger, moments, the decisions the character makes along the way, and end with the benefit or the problem.</p>
<div id="attachment_11846" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11846" title="storyboarding-2-01" src="http://johnnyholland.org/wp-content/uploads/storyboarding-2-01.jpg" alt="" width="500" height="334" /><p class="wp-caption-text">First pass at a storyboard, just writing out the sequence of moments first.</p></div>
<h4 dir="ltr">Get your storyboard in touch with its emotions</h4>
<p>If you’re following the process above, try just adding emoticons to each step, to help others get a feel for what’s going on inside the character’s head. Remember to illustrate any reactions to pain points along the way; what is the character expecting to happen, and how does the result affect him/her when it happens that way or not? Try drawing in each emotional state as a simple expression, or even drawing a whole set of different expressions, then scan, copy, print, cut them out, and stick them on.</p>
<div id="attachment_11847" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11847" title="storyboarding-2-02" src="http://johnnyholland.org/wp-content/uploads/storyboarding-2-02.jpg" alt="" width="500" height="334" /><p class="wp-caption-text">The same sequence of moments as before, but with added emoticons, to help get a sense of what’s going on for Penny’s emotional state.</p></div>
<h4>Roll camera</h4>
<p>By now you should have a sense of the steps involved in your story. Flesh out your storyboard by translating each step – or moment – into a storyboard frame. Allow yourself room for the other familiar aspects of sequential art:</p>
<ul>
<li>Storyteller commentary – the text that sometimes     appears at the top of frames to advance the narrative (“Meanwhile…”)</li>
<li>Speech and thought bubbles – position these under any commentary, and consider how your audiences will read them (e.g. western audiences read left-to-right, top-down)</li>
<li>Character(s) and scene –     show just enough to indicate what’s significant to your story</li>
</ul>
<div id="attachment_11848" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11848" title="storyboarding-2-03" src="http://johnnyholland.org/wp-content/uploads/storyboarding-2-03.jpg" alt="" width="500" height="334" /><p class="wp-caption-text">The same sequence as before, but roughly translated as frames in a storyboard. The emphasis at this point is just telling the story, starting with Penny’s goal and ending with the state that the situation has left Penny in.</p></div>
<p>Go back over your storyboard and think about how you can use the character’s pose, and the space in each frame to emphasise each moment, and how your character is feeling about it.</p>
<div id="attachment_11849" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11849" title="storyboarding-2-04" src="http://johnnyholland.org/wp-content/uploads/storyboarding-2-04.jpg" alt="" width="500" height="334" /><p class="wp-caption-text">Second pass at the storyboard. Some of the text has been tightened up, and drawing technique is used to bring out more of the story, e.g. using the ‘weight’ of the search results to emphasise the volume of information, and the clock faces to show the passing of time.</p></div>
<h3 dir="ltr">End well</h3>
<p>Make sure your storyboard leaves your audience with no doubt about the outcome of the story. Are you describing an unfavourable existing situation? End with the full weight of the problem. Are you selling a solution? End with the benefits of that solution to your character.</p>
<div id="attachment_11850" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11850" title="storyboarding-2-05" src="http://johnnyholland.org/wp-content/uploads/storyboarding-2-05.jpg" alt="" width="500" height="334" /><p class="wp-caption-text">The same storyboard, but embellished with some extra weight of ink to increase contrast, and colour.</p></div>
<h2 dir="ltr">Storyboarding styles and techniques</h2>
<h4 dir="ltr">You don’t need to be good at drawing</h4>
<p>The good news is that you don’t need to be good at drawing before you start drawing scenario storyboards. Although experience in drawing helps, the main thing is to make the character, their goal, and what happens in their experience as clear as possible. How you render this is up to you and your skills and taste, but in the case of storyboards, less is definitely more. Like many UX artefacts, we need to know when enough detail and finessing is enough.</p>
<h4 dir="ltr">Storyboard fidelity</h4>
<p>Think about your storyboarding style and technique as a point on a spectrum of fidelity, or level of abstraction. Scott McCloud explains that<a href="http://scottmccloud.com/4-inventions/triangle/04.html"> comics sit on a resemblance/meaning continuum</a>, from full realistic to iconic images, with an increasing amount of abstraction. Low fidelity means schematic boxes, circles and stick figures, and high fidelity means photographic reality.</p>
<div id="attachment_11851" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11851" title="storyboarding-2-sketchstyle" src="http://johnnyholland.org/wp-content/uploads/storyboarding-2-sketchstyle.jpg" alt="" width="500" height="211" /><p class="wp-caption-text">A visual example of the sort of resemblance/meaning spectrum that Scott McCloud describes. The example above obviously only represents part of this spectrum – there’s nothing approaching photographic reality – but this is the visual territory I regard for storyboards. Note: I haven’t included stick figures, because I just can’t bring myself to draw something like that, when a simple schematic figure (far left) does the trick.</p></div>
<p>There’s no harm in aiming for the more schematic end; it’s amazing what just stick figures and dialogue can communicate, as readers of<a href="http://xkcd.com/"> xkcd</a> and<a href="http://www.explosm.net/comics/"> Cyanide &amp; Happiness</a> know all too well.<br />
To help you aim for the right point on the scale, think about:</p>
<ul>
<li>What suits your audience – is it just for yourself and your team, or for the client? Is the client conservative, or open to something more comical or whimsical?</li>
<li>What suits your story – the story you’re illustrating might command a certain visual character and tone that needs to be further along the scale than a schematic style</li>
<li>What suits your ability – consider your own level of ability, but aim higher; you’ll be     surprised at what you can achieve</li>
</ul>
<h2 dir="ltr">Showing your storyboards to others</h2>
<p>Storyboards deserve to be up for everyone to see. How you do this obviously depends on the project context and what your client can handle, but here are some ideas:</p>
<ul>
<li>Project walls – Mark out an area on a wall in your workplace to stick up the sketches,     schematics and storyboards generated throughout your project. At Digital Eskimo, each project has a dedicated project wall,     which stimulates thinking and solution generation.</li>
<li>Presentations – Prepare the room in which you will conduct your client presentations by sticking up the storyboards, then walk your audience through each one. Be prepared to allow plenty of time to do this, including handling questions. You’ll know your storyboards are effective when they provoke plenty of discussion.</li>
<li>PowerPoint and Keynote decks – By their nature, storyboards can get quite long. They will probably be too long if you try to reduce their size to fit in a PowerPoint/Keynote slide, but you can slice them into several sections and include a key at the top of each slide.</li>
<li>Intranets and wikis – Try embedding your storyboards in intranet/wiki web pages. This is one time where horizontal scrolling is actually OK.</li>
</ul>
<h2 dir="ltr">Go tell your story</h2>
<p>The next article will focus on using storyboarding as an activity in research workshops, to gain insights from others about issues relevant to your project.</p>
<p>In the meantime, set yourself the challenge of trying scenario storyboarding to help you &#8216;think out&#8217; a user experience solution for a given character and a given goal, and see what ideas it helps you form. Or set yourself the challenge of illustrating a given persona, their goals and their background as a storyboard, then use it as part of a client presentation.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2011/10/storyboarding-ux-part-2-creating-your-own/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Storyboarding &amp; UX &#8211; part 1: an introduction</title>
		<link>http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/</link>
		<comments>http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 13:57:09 +0000</pubDate>
		<dc:creator>Ben Crothers</dc:creator>
				<category><![CDATA[Methods & theory]]></category>

		<guid isPermaLink="false">http://johnnyholland.org/?p=11835</guid>
		<description><![CDATA[<img width="220" height="159" src="http://johnnyholland.org/wp-content/uploads/storyboarding-header-1-e1324187367569.jpg" class="attachment-index-categories wp-post-image" alt="storyboarding-header-1" title="storyboarding-header-1" />The fields of user experience and service design typically use storyboarding to sell design solutions. They do this by casting [...]]]></description>
			<content:encoded><![CDATA[<img width="220" height="159" src="http://johnnyholland.org/wp-content/uploads/storyboarding-header-1-e1324187367569.jpg" class="attachment-index-categories wp-post-image" alt="storyboarding-header-1" title="storyboarding-header-1" /><p>The fields of user experience and service design typically use storyboarding to sell design solutions. They do this by casting personas in stories, showing the benefits of those solutions. They often look quite polished and professional, and can be daunting to some in these fields to pick up a pencil and try it for themselves. But not only can you draw these scenario storyboards yourself to sell your solutions, you can also use them as a powerful method for devising those solutions in the first place.<span id="more-11835"></span>Storyboards are part of the intriguing world of sequential art, where images are arrayed together to visualise anything from a film to a television commercial, from a video game to a new building. They’re an effective communication device, bringing a vision to life in a way that anyone can grasp and engage with, before investing in producing the real thing.</p>
<p>Storyboarding is also catching on fast as a practice in experience design, because of the way it can combine so many disparate elements &#8212; such as personas and their behaviours, requirements and solutions &#8212; to achieve those ‘a-HA’ moments we want from team members and clients. Not only can you draw storyboards yourself to sell your solutions, you can also use them as a powerful method for devising those solutions in the first place.</p>
<p>In three articles I will introduce you to the world of storyboarding:</p>
<ol>
<li>In this first article in the series focuses on storyboards as a medium to help explore solutions to UX issues, as well as communicating these issues and solutions to others;</li>
<li>The second article gives you a detailed look into how to create storyboards, using the skills and materials you already have;</li>
<li>The third article explores how to bring storyboarding into research workshops, to help participants articulate themselves, and to reveal more valuable insights about their experiences and behaviours.</li>
</ol>
<h2 dir="ltr">Introducing storyboarding&#8230;</h2>
<p>I remember watching one of those extras included on a Pixar DVD that showed some animators taking the rest of their team through a sequence in the film as a conceptual storyboard. It was entertaining to watch; it felt like being in the room as each artist took great delight in explaining the sequence to everyone. But what really struck me was the similarity to user experience practice: here was the architect of an experience, pitching an idea to a set of peers, using a story, illustrated by something that everyone could see and relate to. And it occurred to me: why can’t our practice and our use of storyboarding be as moving as that?</p>
<h2 dir="ltr">Yet another UX silver bullet?</h2>
<p>In user experience design we’re familiar with user research techniques like workshops, contextual inquiry, and interviews. We synthesise our research into audience archetypes, user stories and process flows. We communicate our thinking and solutions to our teams and clients with artefacts like personas, flow diagrams, and wireframes. And if we’re feeling really fancy we can even shell out experience prototypes and service blueprints. Somewhere in all of this lies the people for whom we’re designing, what’s going on in their worlds, and how we’re making their lives better. As practitioners in the science and craft of UX, we innately get it, we see the narrative that threads all of these artefacts together – the spirit of the solution breathing through it all, that we want our clients to be captured by.</p>
<p>But clients tend not to be conceptual thinkers like us; they need us to connect the dots. And that’s where storyboards come in. Storyboards – indeed all forms of conceptual illustration – work well because of two truths: firstly that the act of drawing (and even seeing others draw) can help us think, and secondly that images can speak more powerfully than just words by adding extra layers of meaning.</p>
<h2 dir="ltr">The power of storytelling</h2>
<p>Ever since the<a href="http://en.wikipedia.org/wiki/Lascaux"> horses danced across the cave walls of Lascaux</a>, and the Egyptians regaled their monarchs’ triumphs in tomb frescoes, we’ve been telling stories to each other through<a href="http://en.wikipedia.org/wiki/Comics_and_Sequential_Art"> sequential art</a>, or pictures chained together as a narrative. As Nancy Duarte says in her book Resonate, “Stories are the most powerful delivery tool for information, more powerful and enduring than any other art form”.</p>
<p>The analysis of stories reveals regular patterns that we can use for our own benefit when communicating solutions through storytelling. In the Technique of Drama (1863), Gustav Freytag rationalised stories into five acts: exposition, rising action, climax, falling action (or final suspense and resolution) and dénouement (conclusion).</p>
<div id="attachment_11836" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11836" title="storyboarding-freytags-pyramid" src="http://johnnyholland.org/wp-content/uploads/storyboarding-freytags-pyramid.jpg" alt="s" width="500" height="302" /><p class="wp-caption-text">Freytag’s Pyramid, showing the five parts, or acts: Exposition, Rising Action, Climax, Falling Action and Denouement. The diagram seemed a bit dry by itself, so I’ve added a quick story into the pyramid about a guy and his phone that won’t work.</p></div>
<p>Another common pattern is the<a href="http://en.wikipedia.org/wiki/Monomyth"> Hero’s Journey</a>, a narrative convention made popular by Joseph Campbell in his book<a href="http://en.wikipedia.org/wiki/The_Hero_with_a_Thousand_Faces"> The Hero with a Thousand Faces</a> (1949). While it’s important to honour the real experiences of the people for whom we are designing, we can often reframe them – or a persona in a contrived experience – in the role of that hero, on a quest in the structure of the pyramid above.</p>
<p>Harnessing these conventions helps us make our stories resonate more with others, and make complex concepts crystal clear.</p>
<p>There are lots of other ways for using storytelling to help design and communicate better experiences.<a href="http://uxdesign.smashingmagazine.com/2010/01/29/better-user-experience-using-storytelling-part-one/"> Francisco Inchauste</a> and<a href="http://www.boxesandarrows.com/view/experience-themes"> Cindy Chastain</a> have written marvellous descriptions about how approaching UX with storytelling inspires design concepts and brings teams closer together around a clearer picture of what’s being designed.</p>
<h2 dir="ltr">The history of storyboarding</h2>
<p>Nowhere is storytelling through images more obvious than in comics and graphic novels. The venerable Scott McCloud is a master of the medium and<a href="http://scottmccloud.com/2-print/index.html"> his books</a> are an excellent place to start if you’re into communicating stories through sequential art.</p>
<p>This art form is essentially storyboards as end product, rather than the means to specify the end product. What’s particularly inspiring about comics is the way they use text and pictorial expression to immerse us in the world of the characters. Indeed, comics exploit all our senses, “to be an art of the invisible”, as Scott McCloud says in<a href="http://scottmccloud.com/2-print/1-uc/index.html"> Understanding Comics</a>.</p>
<p>Storyboarding has of course been central to motion picture production. The Walt Disney studio is credited with popularising storyboards, using sketches of frames as far back as the 1920s. What’s interesting is that storyboarding was always very much a team-based activity: each scene would be drawn on separate sheets of paper, pinned together on a board to form the storyboard, and then presented and critiqued with the director and/or peers.</p>
<div id="attachment_11837" class="wp-caption aligncenter" style="width: 410px"><img class="size-full wp-image-11837" title="storyboarding-joe-ranft" src="http://johnnyholland.org/wp-content/uploads/storyboarding-joe-ranft.jpg" alt="" width="400" height="306" /><p class="wp-caption-text">Disney Story Supervisor Joe Ranft pitching storyboards from Tim Burton&#39;s &quot;The Nightmare Before Christmas.&quot; (via Jim Hill Media, copyright Disney Enterprises, Inc. All rights reserved)</p></div>
<p>Many studios such as Pixar rely heavily on storyboarding in conception stages as well as production. What might come as a surprise to many is that Pixar does not begin new movies with a script; instead the story is fleshed out under the director’s leadership through storyboarding. In some cases, storyboards become the ‘source of truth’ for production rather than just for pre-visualisation: the Wachowski brothers (of Matrix trilogy fame) were (in)famous for <a href="http://www.wired.com/wired/archive/11.11/matrix.html">not letting cinematography deviate from the storyboard</a>. <a href="http://www.slideshare.net/catherinelewis/storyboards-for-the-matrix">This slideshow by Catherine Lewis</a> offers a glimpse of how close the final cut is to their storyboards.</p>
<h2 dir="ltr">Stories in pictures for UX</h2>
<p>The ‘pitch and critique’ technique is familiar to many in user experience design, but this isn’t the only similarity between film storyboarding practice and UX practice. Both disciplines rely heavily on an iterative approach. Pixar cofounder and President Ed Catmull and Pixar&#8217;s directors find it better to <a href="http://www.fastcompany.com/1742431/pixar-s-motto-going-from-suck-to-nonsuck">fix problems than to prevent errors</a>. &#8220;My strategy has always been: be wrong as fast as we can,&#8221; says Andrew Stanton, Director of Finding Nemo and WALL-E, &#8220;Which basically means, we&#8217;re gonna screw up, let&#8217;s just admit that. Let&#8217;s not be afraid of that.&#8221;</p>
<p>In a way, storyboarding has always been the low-fidelity prototype of film, bringing together the elements of script, plot, scene, and characters. And just like the sorts of prototypes favoured in UX, film storyboards are useful for directors to visualise the solution, define where investment is needed for various resources, and foresee potential issues. Some studios even work storyboards together as reels &#8212; or animatics &#8212; with temporary voices, sound and music.</p>
<p>If you often find yourself in the role of visualiser for your client, teasing out their requirements and reflecting them to ensure a shared understanding, you’re not alone. Directors rely on storyboard artists to do exactly that. Indeed, there is an interpreter role that the storyboarder plays, becoming just as part of the instrument of visualising as the storyboard itself. As J Todd Anderson explains, about<a href="http://www.artistdaily.com/blogs/drawing/archive/2008/07/07/coen-brothers-movies-drawing-storyboards.aspx"> working with the Coen Brothers</a>, “I go inside their heads, try to understand what they are thinking, and put it on paper. I always try to make the drawings theirs, not mine.”</p>
<p>So it makes a lot of sense for user experience designers to use storyboarding as a practice. Storyboards bring our solutions to life, so that clients can walk in the shoes of their customers/staff/community, and see solutions as we see them. But more than that, we should seek not only to inform; we should seek to move our clients, to affect them at such a level that they really do connect with the characters, just like film storyboards can allow.</p>
<p>There are a few specific uses for storyboarding for UX to explore in detail: helping us to think, helping others to communicate to us, and helping us to communicate to others.</p>
<h3 dir="ltr">Storyboarding helps us think</h3>
<p>As a modelling tool, storyboarding helps us string together personas, user stories and various constraints. It helps to almost literallu walk through a scenario as a persona and see the triggers that occur, the channels that are used, the process that is followed and decisions that have to be made along the way. In effect, we can wind up a persona, then let him/her go, and watch what happens by sketching it out.</p>
<p>More than that, the action of sketching out role-play tests our concepts, lets us experiment at little or no cost, allows for fluid team-based brainstorming, reveals more ideas, and scrutinises them for authenticity.</p>
<div id="attachment_11838" class="wp-caption aligncenter" style="width: 510px"><img class="size-full wp-image-11838" title="storyboarding-sketch" src="http://johnnyholland.org/wp-content/uploads/storyboarding-sketch.jpg" alt="" width="500" height="337" /><p class="wp-caption-text">Part of an initial sketched role-play looking into how a particular persona would go about diagnosing an issue with their mobile phone. The key here is quickly mapping out an experience to expose questions, decisions, and problems that would need to be solved along the way.</p></div>
<p>Storyboarding helps us to understand existing scenarios, a well as test hypotheses for potential scenarios.</p>
<h3 dir="ltr">Storyboarding helps others communicate their experience</h3>
<p>Storyboarding makes for a very engaging and thought-provoking activity in research workshops. It’s often easier (and more fun) for people to articulate their experiences relevant to a particular objective in a workshop, by storyboarding it. This will be the topic of the third article: Storyboarding: using storyboarding as a workshop activity.</p>
<h3 dir="ltr">Storyboarding helps others understand</h3>
<p>There are times where it’s crucial that clients feel the full weight of their customers’ issues with their products and/services, before galloping into solution mode. Storyboards are an evocative way of expressing these sorts of issues, whether or not clients have known them for a long time, or are seeing them for the first time. Often many of these issues are derived from research, and can be a bit dry and esoteric if presented only as words and charts. Presenting them as a story, with pictures of people in places, with real behaviours and real reactions puts the heart of the issue back in to our communications.</p>
<p>We are hardwired to respond to stories: our innate sense of curiosity draws us in, we engage more when we can sense a meaningful achievement about to be had, and we empathise with characters who have real-life challenges similar to our own. Indeed, when we listen to a story, we can enter what some call a ‘storylistening trance’. Among the documented characteristics involved in this fascinating <a href="http://www.ala.org/ala/mgrps/divs/aasl/aaslpubsandjournals/slmrb/slmrcontents/volume21999/vol2sturm.cfm">altered state of consciousness</a> include realism (the sense that the story environment or characters are real or alive) and ‘placeness’ (the sense that the listener ‘goes somewhere’ into another space).</p>
<p>Stories, represented as storyboards, link our facts and ideas with our audience’s experiences and emotions; their imagination fills in the spaces we create, providing a far more engaging, memorable and persuasive experience.</p>
<p>And when it is time to be in solution mode, expressing our solutions as storyboards is an efficient, and equally entertaining way to gain a shared understanding of a proposed approach, especially if presented in contrast to the existing experience.</p>
<h2 dir="ltr">Next up: a practical guide</h2>
<p>The next article in this series will explore how you can create storyboards to help others understand issues and solutions using the skills you already have.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

