Introduction to Storyboarding for User Experience Design
•
45 gostaram•15,171 visualizações
An introduction to storyboarding for user experience (UX) design, with tips and examples from eBay and Citrix. A presentation for World Innovation Lab in Palo Alto in June 2015.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (9)
Semelhante a Introduction to Storyboarding for User Experience Design
Semelhante a Introduction to Storyboarding for User Experience Design (20)
Mais de Deb Aoki
Mais de Deb Aoki (8)
Último
Último (20)
Introduction to Storyboarding for User Experience Design
- 1. DEB AOKI sr. information experience designer citrix June 25, 2015 World Innovation Lab - Palo Alto, CA HOW TO DRAW STORYBOARDS FOR UX DESIGN simple ways to show and share your ideas for user-centric design
- 2. LET ME TELL YOU A STORY… How I figured out the power of storyboarding for user experience design
- 3. THE CHALLENGE: ebay needs a new holiday promotion PICTURES > WORDS: STORYBOARDING AT EBAY 3 We did a lot of brainstorming, a lot of sketching, and narrowed it down to 4 ideas…
- 4. HOLIDAY CONCEPT 1: group deals PICTURES > WORDS: STORYBOARDING AT EBAY 4
- 5. HOLIDAY CONCEPT 2: ebay game PICTURES > WORDS: STORYBOARDING AT EBAY 5
- 6. HOLIDAY CONCEPT 3: v.i.p. sales PICTURES > WORDS: STORYBOARDING AT EBAY 6
- 7. HOLIDAY CONCEPT 4: group gifts PICTURES > WORDS: STORYBOARDING AT EBAY 7
- 8. I WANT TO DO THIS IDEA BECAUSE… PICTURES > WORDS: STORYBOARDING AT EBAY 8 It’s what’s HOT right now! It’s my idea and it’s the BEST idea! This one’s EASIEST to build! I dunno. Because it’s FUN?
- 9. We put all 4 ideas in front of online focus groups in US and UK, and the clear winner was… GROUP GIFTS?! PICTURES > WORDS: STORYBOARDING AT EBAY 9 Whuh ? Huh!? Why? Oh wow.
- 10. We were able to design and market Group Gifts based on comments and suggestions from users from the very start. PICTURES > WORDS: STORYBOARDING AT EBAY 10
- 11. PICTURES TALK LOUDER THAN WORDSHow storyboards and sketching can break through the usual innovation blockers
- 12. INNOVATION BLOCKERS… Basing decisions on PPP Paygrade Persuasion Powerpoint Technology > Customers Starting with technology first, then trying to find a customer need for it afterwards Basing decisions on HIPPO Highest Paid Person’s Opinion
- 13. Focuses on human needs and concerns instead of just technology / business needs or limitations Helps everyone see the big picture and get on the same page about goals, user experiences Visuals are memorable and can lead to new insights Drawings are more FUN! and more engaging than just text WHY DRAW PICTURES?
- 14. Imagining experiences from user’s point of view can help you discover potential problems early Focuses on concepts & ideas, makes it harder to nitpick irrelevant design details (i.e. fonts, typos, copywriting photos) Faster and cheaper than coding clickable prototypes or designing wireframes Encourages empathy by showing customer needs, motivations and pain-points in context WHY DRAW STORYBOARDS?
- 15. WHAT CAN YOU DO WITH SKETCHING AND STORYBOARDS?I’M GLAD YOU ASKED! HERE ARE A FEW EXAMPLES
- 16. INTRODUCE A NEW PRODUCT: google chrome comic By Scott McCloud 16
- 17. IMAGINE THE FUTURE: tesla factory upgrade storyboard Shared by Elon Musk on Twitter 17
- 18. SHOW REAL WORLD CONTEXT: Xenmobile storyboard PICTURES > WORDS: STORYBOARDING AT EBAY 18
- 19. BRAINSTORM IDEAS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 19
- 20. UNDERSTAND CUSTOMERS’ PoV: journey mapping PICTURES > WORDS: STORYBOARDING AT EBAY 20
- 21. EXPLAIN HOW IT WORKS: green box user flows PICTURES > WORDS: STORYBOARDING AT EBAY 21
- 22. SELL AN IDEA: CubeFree app PICTURES > WORDS: STORYBOARDING AT EBAY 22
- 23. ILLUSTRATE PAIN POINTS: shopping cart PICTURES > WORDS: STORYBOARDING AT EBAY 23
- 24. UNDERSTAND CUSTOMERS: GoTo Meeting personas 24 The Butler “You can count on me!” The Investigator “I need all the facts” The Facilitator “I’m here to help” The Networker “I connect people” The Sprinter “Let’s get this done quickly” The Preparer “I need time to plan carefully”
- 25. 5 STEPS FOR DRAWING STORYBOARDSBrainstorm > Script > Sketch > Finalize > Adapt
- 26. 26 STEP 1: BRAINSTORM IDEAS / SKETCH
- 27. 27 STEP 2: WRITE A SCRIPT
- 28. 28 STEP 2a (optional): GATHER PHOTO REFERENCES
- 29. 29 STEP 3: DRAW ROUGH SKETCHES
- 30. 30 STEP 4: GET FEEDBACK / FINALIZE ART
- 31. 31 STEP 5: ADAPT VECTOR LINE ART OR VARIATIONS
- 32. 7 VISUAL STORYTELLING TIPS Simple guidelines to keep your stories easy to read and understand
- 33. KEEP YOUR STORY SHORT 33 Your story should be limited to 10-12 panels or less if possible. If it needs more panels, consider breaking story into segments.
- 34. SHOWING IT > SAYING IT 34 Let the pictures tell the story. If you removed the captions, would it still make sense?
- 35. PICTURES > WORDS: STORYBOARDING AT EBAY 35 CLOSE-UP Emphasis on screen/finger interaction MID-TORSO Emphasis on screen SEMI-CLOSE Emphasis on device / human context/use FULL BODY Emphasis on ‘real world’ context/place of use USE DIFFERENT ‘CAMERA’ SHOTS
- 36. KEEP CAPTIONS SHORT AND SIMPLE 36 Captions should be simple, easy to skim. Too much text = visual clutter
- 37. LIMIT YOUR COLOR PALETTE 37 Use color selectively to emphasize important things, communicate differences, or convey emotions. Too many colors can be distracting
- 38. LEFT TO RIGHT, TOP TO BOTTOM 38 Give the reader a predictable, intuitive path to read your story. Don’t leave them wondering what to look at next.
- 39. PICTURES, NOT PERFECTION 39 Speed, simplicity and clarity is more important than making “perfect” pictures. It doesn’t have to be beautiful/detailed to communicate ideas.
- 40. LET’S TRY STORYBOARDING! Let’s take your concept from yesterday and try to draw it in storyboards.
- 41. YOUR MISSION: Draw your product/idea’s story 41
- 42. YOUR MISSION: Draw your product/idea’s story 42 Identify your characters for your story • How will you make them look different from each other? What will happen in your story? • Write it out so you have a rough idea of beginning, middle and end of the “plot” Start drawing! • Use Sharpie pens so your drawing are easy to see from a distance • Use 3x5 post-it notes, one for each panel You have 10 minutes!
- 43. Show and share time! PRESENTATION TITLE GOES HERE 43
- 44. CAN’T DRAW? THERE’S AN APP FOR THAT!5 “just add water” solutions when you don’t have time to draw
- 45. STORYBOARD APPS: STORYBOARD THAT 45 StoryboardThat is an online app that can create instant storyboards http://www.storyboardthat.com/
- 46. STORYBOARD APPS: BITSTRIPS 46 BitStrips is another online/mobile app that can create instant storyboards https://www.bitstrips.com
- 47. STORYBOARD APPS: COMIPO! 47 ComiPo! Can help you create storyboards with manga style art http://www.comipo.com/en/
- 48. COMICLIFE: STORYBOARD WITH PHOTOS 48 Apps like ComicLife can make it easy to use your photos to create simple scenarios / storyboards from desktop or mobile devices http://comiclife.com/
- 49. PLACEIT FOR APP SCREENSHOTS 49 PlaceIt can insert your app screenshots into real-life scenarios quickly https://placeit.net
- 50. BOOKS AND CLASSES Want to learn more? Here’s what to read and where to go! 50
- 51. 51 READ ALL ABOUT IT: Drawing for Meetings & UX BRANDY AGERBECK The Graphic Facilitator’s Guide DAVID SIBBETTS Visual Meetings DAN ROAM The Back of the Napkin KEVIN CHENG See What I Mean SUNNI BROWN The Doodle Revolution JEANNEL KING Draw Forth
- 52. 52 READ ALL ABOUT IT: Drawing and Making Comics SCOTT McCLOUD Understanding Comics Making Comics ED EMBERLEY Drawing Books JESSICA ABEL & MATT MADDEN Drawing Words and Writing Pictures Mastering Comics
- 53. 53 MORE WAYS TO LEARN: Workshops and classes IFVP Professional group for graphic facilitators http://ifvpcommunity.ning.com/ THE GROVE graphic facilitation classes and books www.grove.com VERBAL TO VISUAL CLASSROOM Blog and online drawing classes http://www.verbaltovisualclassroom.com/ KOMMUNIKATIONSLOTSEN Graphic facilitation services, classes in Germany, UK, Europe http://bikablo.kommunikationslotsen.de/en/
- 54. QUESTIONS? THANK YOU! EMAIL: DEBORA.AOKI@CITRIX.COM TWITTER: @DEBAOKI ALSO AT: HTTP://WWW.MANGACOMICSMANGA.COM
Notas do Editor
- When I worked at eBay, a group of us were given a challenge – come up with a new, exciting holiday promotion to encourage people to do more gift shopping on eBay. We had a one day brainstorming session, which included people from different departments / skills / experience (marketing, design, technology, business development) to come up with ideas. I drew up quick storyboards for each idea on flip-chart paper and we shared them to do an initial gut check to see if these ideas made sense from a user point of view. Our next step: to test it with users.
- Idea 1 – groupon type deal, where people would be encouraged to share the deal with friends, and if enough people bought it, then the price would go down, and continue to go down as more people buy.
- Idea 2 – online “complete the word” game – with each purchase, a buyer would get a “game piece” to complete the word “ebay” to win gift cards and prizes.
- Idea 3 – private sales – frequent buyers would unlock access to exclusive deals after their november/december purchases exceed a set amount.
- Idea 4 – group gifts
- Test a concept – Group Gifts This was part of a series of four concepts for holiday promotions that we put in front of focus groups in the US and UK. Rather than have them look at page mocks, we drew stories that showed real life situations where people would use the product and why. To our surprise, this particular concept, group gifts ended up being the idea that resonated best with users. They could see themselves doing the things shown in the storyboard – that’s something that wouldn’t have been as immediately apparent or understandable to the users if we just showed them a series of page mock-ups.
- Test a concept – Group Gifts This was part of a series of four concepts for holiday promotions that we put in front of focus groups in the US and UK. Rather than have them look at page mocks, we drew stories that showed real life situations where people would use the product and why. To our surprise, this particular concept, group gifts ended up being the idea that resonated best with users. They could see themselves doing the things shown in the storyboard – that’s something that wouldn’t have been as immediately apparent or understandable to the users if we just showed them a series of page mock-ups.
- Thanks to the feedback we got from the user testing we got a few things: Data about the viability of the idea based on actual customer responses – not based on any one person’s desires, personal or professional agenda, or business/technical limitations Early feedback about what users liked / didn’t like about the concept – we used this to address problems ahead of time in our design and programming, and leveraged themes that resonated most favorably to write our marketing copy. We were able to launch the product within 3 months of that initial test
- Here's why storyboarding can be more effective than just dry powerpoint decks with pie charts, bulletpoints and screenshots:
- There are lots of reasons why innovation processes can be dysfunctional – or doomed from the start.
- There are lots of reasons to draw pictures. It helps to focus the attention on human needs and concerns, rather than the technology / business needs or limitations. Helps everyone in the room see and understand the “big picture” / end to end experiences Visuals are very memorable! And can help spark others’ creativity It’s more fun – it’s way more engaging to see pictures than just a screen full of text and bulletpoints.
- Storyboards can be a quick, easy and cheap way to test your concepts with users to see if your ideas resonate with them.
- There are a couple of different ways we use drawing/storyboarding at eBay:
- To introduce new products – google chrome comic
- To introduce new products – google chrome comic
- How it works: XenMobile storyboard For the Fall 2013 release of XenMobile, I worked with the product managers and marketing department to create this 2-page comic strip showing how a user could use the new features in XenMobile. This comic strip was featured on the Citrix Xenmobile website: http://www.citrix.com/products/xenmobile/overview.html
- To brainstorm ideas – or to refine concepts Believe it or not, eBay did not have a shopping cart on our site for many years. We have a lot of different sellers, that each accept different payment methods, offer different shipping options, and on and on. It was so complicated that several teams tried several times to do it, and gave up. So we had a bunch of brainstorming sessions to try to wrap our heads around the problem and possible solutions – and sketching was a big part of getting everyone on the same page.
- Brainstorming: customer journey mapping – This is an example of a workshop where I met with various stakeholders from the business, design and technical development groups to map out what the various touch points / stages that a customer would go through as they become aware of Citrix Workspace Services through trying it, then buying it, then installing/troubleshooting it, and then on to being a loyal/happy user of the product (or not). I initially drew the steps on colored post it notes, then refined them onto more finished drawings on index cards, and taped them on a white board to show the steps on a timeline. We used colored dots to indicate happy/unhappy moments and crucial decision points. This allowed us to move steps around, add/remove/edit steps, and later present and discuss them.
- How it works: Green Box Green box is a program where eBay teams up with the USPS to offer sturdy, reusable boxes to sellers that are delivered to the seller, then later returned to the post office, or simply used again. This diagram uses the red boxes to show the seller’s part of the process, the blue boxes illustrate the buyer’s role, and the green arrows and box show the progress of the box. We used this diagram to show at a glance how the product would work at a new product idea fair. The idea won the top prize that year, and was eventually made into a real product at eBay.
- Sell an idea – Cubefree This is a simple storyboard presentation for Cubefree, a Citrix Innovation project created by a small team of designers/devs. It’s a mobile app that helps mobile workers find cafes/shared workspaces nearby to work in, see ratings of a café’s wifi, noise level, crowds/seat availability, share a table with a friend, share ratings with other users, and be invited to try other Citrix mobile work apps like GoTo Meeting. This presentation helped the team get further funding to develop and market the app. It’s now available on the Apple App store. http://www.citrix.com/go/cubefree.html
- Illustrate pain points: shopping cart One unique aspect of using a shopping cart on eBay is that many of the items on sale are one-of-a-kind, or available in very limited quantities. But we also couldn’t reserve items if someone put it in their cart – the items had to remain available to other buyers. So I used the metaphor of someone going tot the supermarket to buy cereal – he puts the cereal in his cart, then he remembers he needs milk. So while he’s looking at his milk, someone snatches his cereal away and buys it before he does. Illustrating the problem by using everyday, non-website situations really helped us to see how these situations would be really frustrating to users.
- Brainstorming: user personas – Here’s another example of user personas – this was for GoTo Meeting, to show the different personality types / needs of users I try to show the personality traits in their facial expressions, body language. I also try to vary the ages, ethnicities, etc. to show diversity whenever possible.
- Brainstorm / sketch Usually, the first thing I do when I get asked to do a visualization/storyboarding project is get the key people in the room, and start brainstorming and sketching. At this point, my sketches are often very rough because it’s more important that I do it quickly and capture the ideas. This is where I confirm what the story is about, what steps and scenarios I need to illustrate and in what order.
- Write a script After narrowing down the scenarios that need to be illustrated, I work on a script. Sometimes I’ll use storyboard sheets with blocks / lines for written text to block out the scenes. It often helps for me to draw it out too, since there’s a limit to what you can cram into one panel – and that’s not always apparent when you write what you think will fit in a panel. I try to keep it to one idea per panel.
- Write a script After narrowing down the scenarios that need to be illustrated, I work on a script. Sometimes I’ll use storyboard sheets with blocks / lines for written text to block out the scenes. It often helps for me to draw it out too, since there’s a limit to what you can cram into one panel – and that’s not always apparent when you write what you think will fit in a panel. I try to keep it to one idea per panel.
- Draw rough sketches Once I have a sense of the story, then I rough out what the panels will look like. The artwork is a little more finished than it was at the brainstorm stage, but not quite polished – this lets people know that they can still feel free to offer comments / suggestions for changes w/o feeling like they’re making me “go back to the drawing board.” If I’m working collaboratively, I can also do this on index cards or post it notes so I can move / add / adjust the placement of the panels
- Feedback / finalize I always allow for a lot of back and forth to make sure that the story reads smoothly and is as concise and clear as possible.
- Adapt to vector art or vertical/geographical variations Depending on how the illustrations/storyboards will be used, I’ll sometimes do variations. For example, if it’s going to be blown up into large-scale/poster-sized presentations, then I’ll adapt the illustrations into vector line art with Illustrator. Other types of variations can include adapting the story for different verticals (fashion, tech, motors) or different geographies (europe, asia, etc.)
- There are a couple of different ways we use drawing/storyboarding at eBay:
- Keep it short and simple if possible – remember that people’s attention spans are finite. Keep your story concise, and mercilessly edit out steps/panels if it isn’t essential to telling your story / conveying important info. Stick to one idea / action per panel if possible. This one is for “Snap Support” an app that lets users ask for tech help using their phone / camera to communicate with a support tech.
- Showing it is greater than saying it – Let the pictures tell the story whenever possible. If you removed the captions, would it still make sense?
- Short text – keep captions short and easy to skim. Giving the reader too much text to digest slows down the story, makes it harder to understand. It also creates visual clutter. Shorter text is more powerful, easier to digest, makes the content more memorable
- Limit your color palette – Resist the urge to use every color in your story. Selectively used color can draw the eye to important things. Too much color = the viewer doesn’t know where to look. Color can also be used as way to heighten emotion, convey information. Use it thoughtfully. I usually stick to one ‘emphasis’ color, a complementary/support color in a lighter tone, and the rest in blacks and greys. I tend to use minimal colors when I use screenshots in a story, so that the screenshots “pop” – have greater emphasis than the pictures.
- Left to right / top to bottom – in general, reading comics is like reading text. People are used to reading from left to right, from the top left corner to the bottom right corner. Don’t confuse readers by making a complex layout. Japanese comics are right to left, but since we’re mostly talking about western/English audiences, don’t worry about it.
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Color to convey emphasis, emotions Red is an eye-catching color that can draw attention to important things, show emotions like anger or love, or can show a “stop” or “no” sign to show that something is not allowed Blue is a peaceful color that can be used to show dreaminess, seriousness, water, depression, air, etc. Green is good for money / success / “go” Yellow can be happy, show illumination, or can show caution
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Speed and clarity is greater than perfection – Don’t get too caught up in drawing ‘perfect’ pictures!
- Suggested Reading The Graphic Facilitator’s Guide by Brandy Agerbeck Visual Meetings by David Sibbetts The Back of the Napkin by Dan Roam See What I Mean: How to Use Comics to Communicate Ideas by Kevin Cheng The Doodle Revolution by Sunni Brown Draw Forth by Jeannel King
- Suggested Reading Ed Emberly’s Drawing Books – Make A World and Faces Understanding Comics and Making Comics by Scott McCloud Bikablo by Martin Haussman The Sketchnote Handbook and The Sketchnote Workbook by Mike Rohde Drawing Words and Making Pictures by Jessica Abel and Matt Madden Mastering Comics by Jessica Abel and Matt Madden
- Classes and Organizations The Grove teaches graphic facilitation classes at the Presidio in SF. They also have lots of books and tools for graphic recorders. It’s founded by David Sibbett, who wrote “Visual Meetings” The Verbal to Visual Classroom offers self-guided online classes, along with videos and guided assignments for a fairly reasonable price International Forum of Visual Practitioners is a professional group for graphic facilitators and recorders. They have an annual conference where they share ideas and techniques, and a directory where you can find and hire a graphic recorder/facilitator. The Center for Graphic Facilitation offers a one-stop shop for other classes, books and blogs about graphic facilitation.
- Who is the customer? Identify their needs, their limitations, their hopes/desires, their fears What is the problem we’re trying to solve? Ask why we’re creating the solution, and really ask if we’re solving an actual user need, vs. pushing something that is technically feasible or something that only has benefits for the business Understand the motivations for the user. Are we really making their lives easier/letting them do something faster, cheaper, etc? If they didn’t have this, would they be able to accomplish the same things faster/easier/cheaper?
- How is this different than our similar services? Your product/service doesn’t exist in a vacuum. Customers will be comparing it with other ways to solve the same problem. How does your product/service measure up? What makes your product/service more compelling/better than the competition? What if something goes wrong? Ask what the user should do if they have any problems or questions. Have we provided an intutive way for them to self-help/ solve their problems on their own? Where can they get help? Asking these questions early in the design process can help iron out potential issues up front, and provide clarity and focus later as you write content