Introduction to Storyboarding for User Experience Design
âą
45 gefĂ€llt mirâą15,160 views
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.
Empfohlen
Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (9)
Ăhnlich wie Introduction to Storyboarding for User Experience Design
Ăhnlich wie Introduction to Storyboarding for User Experience Design (20)
Mehr von Deb Aoki
Mehr von Deb Aoki (8)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (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
Hinweis der Redaktion
- 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