Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com IS4445 Principles of Interaction Design Lecture 8: Use Cases and Storyboarding Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com

Course structure Or more specifically Week 1: Introduction Week 2: Empathise 1 (personas) Week 3: Empathise 2 (empathy maps) Week 4: Define 1 (journey maps) Week 5: Define 2 (value curves) Week 6: Ideate 1 (mind maps) Week 7: Ideate 2 (6 hats) Week 8: Prototyping 1 (storyboards) Week 9: Prototyping 2 (wireframes) Week 10: Test 1 (Testing cards) Week 11: Test 2 (UX audits) Week 12: Revision

IS4445 Today’s session Online discussion Use Cases and Storyboarding What Why How When Where Storyboarding exercise

The next next impossible problem Having identified a promising idea to take forward, we now need to flesh out the imagined future world We need to think through the details of the new interaction in a way that is thorough, unambiguous, and relatable We want to have a comprehensive user-facing account of every step without getting bogged down in technical details We want to do this in a way that appeals to our senses and encourages us to imagine the experience of the new interaction

Why Use Cases and Storyboarding? Just as we analysed existing interactions (the ‘as-is’) according to journeys, so we want to imagine future worlds (the ‘to-be’) as systems-in-motion The as-is tends to be pretty tangible (after all, it exists already). The to-be tends to be cloudier, more ambiguous, and full of missing details or contrasting working assumptions. Use Cases and Storyboards allow us to Stay user/journey-centred in our design Communicate among multiple stakeholder groups Abstract away from operational technical details Prioritise key functions for development and testing

What is a Use Case? A use-case describes the contact between some stakeholders (actors) and the system This actor can be a person, or another system, and are sometimes conceptualised in two categories Primary actors – those actors who initiate the interaction to achieve some goal Secondary actors – other actors involved in the interaction sequence making up the system’s response When the system responds, different sequences of behaviors, or scenarios, can unfold. The use case gathers these scenarios together in one view.

How to Create Use Cases Step 1: identify actors Who will be interacting with the system generally? What about secondary maintenance or administration tasks? Will the system interact with other systems?

How to Create Use Cases (continued) Step 2(a): Identify uses What tasks does the primary actor want the system to help them perform? What information must that actor provide to the system? What information must that actor receive from the system? Are there events about which that actor must tell the system? Are there events about which the system must tell that actor? Does that actor help initialize or shut down the system? Step 2(b): Prioritise uses Which of these uses are essential for the system to function? Which are important next additions? Which are ‘nice to haves’ that could be added gradually?

How to Create Use Cases (continued) Step 3: Draw simple diagram with stickpeople Add a stickperson for each actor Add an oval shape for each use Link each actor to the uses that involve them Bound the uses in a rectangle Interaction represented by an oval shape Actor represented by a stickperson Enter carpark Associates actor with interaction Driver

An example CARPARK Driver Security staff Enter carpark Exit carpark Resolve card issues Driver Security staff Query opening hours

What is Storyboarding? Storyboarding originated as a technique for directors in the motion picture industry Visualises new interactions for each use case in a graphic-novel format, often with very rough sketches to explain how a proposed interaction will work The emphasis is on speed, shared understanding, and thinking things through Stories only need to be as sophisticated or well-drawn as is necessary to meet these goals

Comic strip-level fidelity Image from xkcd.com

How to create Storyboards? You’re basically going to draw a comic strip, most likely with stickpeople Use speech/thought bubbles, captions, narration, movement lines, etc. to explain what’s happening Avoid focusing on screens/interfaces (that will come in the next stage) Remember to capture important things people think and feel, as well as what they say and do

How to create Storyboards (continued)? Pick a use case and make note of each of the actors identified Start at the beginning (exposition) and walk through each step, using the first frame or two to set context and the last one to show outcomes (resolution) Don’t get stuck in the details - many people use a thick pen to prevent writing too much or adding too many small notes Roughly two ways to do this Divide a page into panels, sketching as you go Write each frame on a post-it note, so you can move them around freely

How to create Storyboards (continued)?

Example Storyboards Image from https://www.pinterest.ie/applecrumbs2/ux-comics/?lp=true

Example Storyboards (continued) Image from http://homes.lmc.gatech.edu/~agrosz3/masters/design/scenarios-and-storyboards/

How to create Storyboards (continued)? An alternative approach is to walk through the physical story and take pictures at each critical point You can then doodle on these to show how things will look once your new interaction is in place, e.g. by drawing interfaces into new interaction This one kind of blurs the line between storyboarding, wireframing, and sketching Some people love the parsimony this provides Others find it defeats the purpose of the exercise by slowing down the process and entangling design assumptions at different stages of the process before they have matured

When to use Storyboarding? These are mainly used during prototyping as a way of fleshing out ideas quickly Some people also use them to analyse the as-is, due the ability to create rapid visual summaries General preference to do this only when the process underlying an as-is interaction is poorly understood Even then, it’s arguably better to add visual stories to the journey map, so that you don’t sacrifice deeper analysis

Where to use Storyboarding Storyboarding brings together people from all backgrounds at the earliest point in prototyping This is the best time to resolve arguments or conflicting preferences for subsequent development It may also prompt a return to ideation, as the details of a new interaction bring additional limitations to light

Building your report Working together, draw up a quick use case diagram for your favourite idea (it doesn’t have to be comprehensive for the purposes of this exercise) Identify the actors Identify the use cases, linking each to one or more actors Pick one use case to flesh out in storyboard form Working individually, roughly sketch out that use case Compare your sketches and look for differences Working together, create a new storyboard that makes sense to everyone

Posting online Draw your use case diagram listing key use cases Include a storyboards for one these key use cases (or more if you have space and want feedback) Make an effort to keep it on the same page, even if it means including fewer storyboards

Reading Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2012). The narrative storyboard: telling a story about use and context over time. Interactions, 19(1), 64–69. Interaction Design Foundation: The Basics of User Experience Design (https://www.interaction-design.org/) Löwgren, J., & Stolterman, E. (2007). Thoughtful Interaction Design: A Design Perspective on Information Technology. MIT Press, USA.