university of washington hcde 518 personas, scenarios, & storyboards hcde 518 autumn 2011 with...

University of Washington HCDE 518

Personas, Scenarios, & Storyboards

HCDE 518Autumn 2011

With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry


Agenda Announcements, Hand in

assignments Mid-quarter eval review Sketching Critiques Break 5 mins Lecture – Personas Design Activity Break – 10 mins Lecture – Scenarios &

Storyboards Design Activity

Break – 5 mins Next Class Group Project Work Time


Announcements, Questions

R4 due now R3 grades posted P1 due next week!

Questions?


Mid-Quarter Eval Review


Sketching Critiques – 20 minutes

Break into groups of 3 people Take turns showing and explaining your 3 sketches

with each other Critics should offer advice and feedback about the

idea Strengths, Weaknesses, Originality, Feasibility Sketcher: take notes about what feedback was offered Critic: be critical, but constructive and courteous! Each critic should sign and date the page after the sketches


BREAK – 5 MINUTES


LECTURE – PERSONAS


PersonasScenarios & Storyboards


What is a persona?

A persona is a archetypal character that is meant to represent a group of users in a role who share common goals, attitudes and behaviors when interacting with a particular product or service


User Goals Personas should each have three to four goals

(1) Life goals, which are personal aspirations e.g., wanting to retire before the age of 50

(2) Experience goals describe how the user wants to feel while interacting with a product; they are personal and universal e.g., wanting to be competent while using the product

(3) End goals, which are tangible outcomes the user has in mind when using the product e.g., want to be updated about finances over last month

Typically experience/end goals are more helpful to designers


Purpose Empathy

We are engaged by fictional characters all the time in movies and books.

Focus Constraints on the user population so that a design team can

focus on a specific subset of users in specific situations while interacting with the to-be-designed product

Emancipates designers from problems that might arise when considering a full spectrum of users

Concentrate on the highest priority set of user goals and needs. Communication

Conduits for conveying a broad range of quantitative and qualitative data

Assumptions about users made explicit


Avoiding Stereotypes

In the void of user research, designers have only their assumptions and intuitions guide their work

“the whole point in creating personas is to get past our personal opinions and presuppositions.” Goodwin, 2002

Thus, make sure your personas to do not fall into your stereotypes of people in your target user groups!


Personas vs. Roles

Personas do not necessarily equal roles e.g., parent, doctor, programmer, actor, etc.

People within the same roles can have very different needs and goals e.g., new programmer vs. experience programmer e.g., parent of 1 vs. parent of 8 e.g., oncologist vs. podiatrist


Persona Types Primary – Chunks greater than ~30% Secondary – Chunks between ~5-30% Supplemental – Chunks less than ~5% Customer – Buying technology, but not user

e.g., parent buying toy for toddler Served – Indirect stakeholders

e.g., patients of an electronic medical record Negative – Who you're NOT designing for

e.g., novices, older people, kids, etc.

Make sure you specify the type on your personas!


Three Basic Steps to Creating Personas

1) Collect data about users 2) Segment the users 3) Create personas


Example

Designing an interactive, mobile directory for people in Kyrgyzstan. Research by Cynthia Putnam (HCDE PhD Alum)


Personas need to be created using data from real users Can be qualitative or quantitative, but usually both

helps Qualitative helps get rich picture of ideas and people Quantitative from a large sample ensures that your

personas are representative of target users

Step 1: Collect Data


Step 1: Collect Data – Example Putnam used a combination of pre-existing

data types for Krgyz Personas Large scale survey Design Ethnography

Created with a proposed product in mind Mobile social software (MoSoSo) directory

Goal: provide accessible, reliable, and free information about phone numbers using social networks

E.g., Angie’s List, Amazon buying recommendations


Step 2: Segment the Users

Can use affinity diagramming to help sort through qualitative data

Use surveys to look for major groupings, especially based on user goals for technology or major motivations


Step 2: Segment the Users - Example• 460 respondents owned used and owned mobile

phones• “What was your motivation to acquire your

phone?”• Three logical groupings

– (1) Replacement for home phone motivations; – (2) Practical motivations

• Desire to make outgoing calls and pricing motivations– (3) Social motivations

• Desire to receive incoming calls and a need for a mobile phone because friends had them.


Segmentation Groups Replacement group:

45 (13%) individuals in the replacement motivation group 84% of this group claimed to not have a phone at home

Practical group: 194 (55%) individuals in the practical motivation group 99% gave a need to make calls when away from home or

work as the motivation Social group:

113 (32%) individuals in the social motivation group 85%wanted people to reach them at all times


Attitudes

People who do not use mobile

phones are missing out on

things

Mobile phones are mostly a

form of entertainment*

Mobile phones represent a

threat to local culture and ways

Mobile phones are confusing

and hard to use

Mobile phone access is too expensive**

Mobile phones enable me to

access relevant information*

Mobile phone use is

monitored*

People have too use Russian too often when they

use a moble phone**

It is difficult to use mobile

phones if you don’t know English ***

Mobile phones are importanto

my future career

Replacement 65% 42% 32% 21% 64% 93% 44% 69% 70% 77%

Practical/Price 62% 29% 21% 19% 66% 82% 61% 65% 45% 82%

Social 53% 35% 21% 18% 51% 79% 45% 50% 32% 83%

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%


Step 3: Create the Persona

Photo Name – first name starts with the first letter of the segmentation

(e.g., Shirin Social, Rosa Replacement) Quote that describes the user goals with the product Goals - a priority rating and specific objectives are also suggested Biographical profile and personal information that affects usage Computer, internet and other technology usage are common

components Key Point: Back up persona with data whenever possible!


Presentation Types Paper-based or digital mediums (most common)

Single Page Information Sheets Handouts Posters

Other types Beer glasses Action figures Key chains Facebook profiles


Step 3: Create the Persona

Parxat: Practical user Shirin: Social user Roza: Replacement user

Download Personas: http://courses.washington.edu/hcde518/readings/personas/


P1 – Personas

You will create at least 3 personas for your potential users of your proposed system

Make sure personas are based on your user research and convey user’s goals

Specify whether persona is primary, secondary, supplementary, etc.


Persona Templates

Download pre-made templates for formatting personas: http://zakiwarfel.com/archives/persona-

templates/ http://graffletopia.com/stencils/460 http://courses.washington.edu/hcde518/project/

PersonaSample.docx


Design Exercise: Persona Creation

System Goal – Design an interactive system to facilitate parent-pediatrician (child doctor) communication

Questions to ask: How might you gather the data? What would the user goals be?

Who might the different personas be? Primary, Secondary, Supplemental, Customer,

Served, Negative


BREAK – 10 MINUTES


LECTURE – SCENARIOS & STORYBOARDS


Three Ways of Telling Stories

Scenarios Written accounts and narratives of the experience Analogy: Books

Storyboards Visual storytelling with rough sketches/cartoons Analogy: Comics, Picture books

Video Scenarios/Storyboards Richer visual storytelling Analogy: Movies/TV


Storytelling

Can be used to both: Tell the users’ current situation Describe a users’ hypothetical experience using a

new technology design

Can be written, visual, or video-based Alternate ways of conveying a story


Personas + Scenarios

Scenarios are often used to convey the experience and frustrations with current technology

Often the scenarios tell a story about your personas


Written Scenarios

Allow the user to imagine themselves in a given situation Similar to books, imagination plays some role

This is good and bad Good for engagement Bad for specifics

Use personas as characters to help with empathy They should be fully developed


Example Scenario

Before the clinic visit, Sue, a CEO, describes how she feels: “you walk into an appointment already scared, already having half convinced yourself that the worst is about to happen…you can't listen as fully… the stress of being in these meetings, even for someone like me that functions well in high stress environments, whoosh.” During the visit, Sue sits on the exam table balancing her question list and pencil on her lap, while she attempts to maintain eye contact with Dr. Jones, to record notes, to communicate with hand motions, to track her list of questions, and to collect handouts that are given to her. At one point, Dr. Jones becomes frustrated when he discovers that Sue has neglected to bring in a list of her current medications with their dosages….


Scenario Continued

….Next, Dr. Jones commences to describe Sue’s treatment options at 204 words per minute (normal conversation rate is 125-175 words per minute). Sue exits the appointment realizing that she forgot to ask an important question about how to manage the surgical drains embedded in her body. In later discussions with the friend who she brought to the clinic with her, they discover that each came away with a different interpretation of the treatment options that Dr. Jones presented. Whose interpretation is correct? Additionally, as Sue looks through the collection of notes from a previous visit, she discovers the name of a genetics book, but she can’t remember why she recorded that information. Did the doctor recommend it? Was there a particular chapter to look at? How did this book relate to her specific health condition?


Video Scenarios

Similar to written ones, but acted out and filmed Advantages

Can be more engaging Specifics/prototypes are shown more easily

Disadvantages Requires actors Much more difficult to create May be harder for people to relate to


Example video scenarios

TransTracker http://courses.washington.edu/info360/

spring2009/videos/TransTrackerMED.mov (130 MB)

ParkSmart http://courses.washington.edu/info360/

spring2009/videos/ParkSmart.wmv (27 MB)

Made by students in James Landay’s HCI class


Storyboarding

What is it?


Uses / background

Very similar in nature to: Comic art / cartoons

Used in: Movie / multimedia design Product / software development


How is it done?

Determine the story A very iterative process through a lot of initial drafts Includes a lot of brainstorming Start with a scenario and break into logical segments

Sketch on pen + paper Generate more polished art for presentation


Storyboarding

Challenges Determining what to draw is hard Drawing is difficult! How is it presented? (time, length, attention)

Usefulness If done right, can help gain quick invaluable user

feedback on early ideas Quicker / easier than building the whole

application or a prototype


Examples

If you’re the user, how would you feel about this service? How do you think it would work?


Elements of a Storyboard

Visual storytelling

5 visual elements1. Level of detail2. Inclusion of text3. Inclusion of people & emotions4. Number of frames5. Portrayal of time

Truong et al., 2006


1. How Much Detail?

Guideline: too much detail can lose universality

Credit: Scott McCloud


1. How Much Detail?


2. Use of Text

Guideline: It’s often necessary, but keep it short


3. Include People and Emotions

Remember, the point of storyboards is to convey the experience of using the system

Guideline: Include people experiencing the design and their reactions to it (either good or bad)


4. How Many Frames?

Guideline: 4-6 frames/panes is ideal More is not always better. Why?

May lose focus of story May lose reader’s attention

What this means: Less work on the designer Must be able to succinctly tell story


4. How many frames?


5. Passage of Time

Guideline: Only use if it’s necessary to understand story


Drawing is hard…

It doesn’t have to be drawings..


Blur out unnecessary detail

Use Photoshop filter “cut out” or similar

Demo


Grab images form other sources

http://designcomics.org/


Get inspired by other comics

http://www.ok-cancel.com/


Summary

Think about how long you have a captive audience

Think about how much you want to tell Think about options for presenting sequences

of drawing


Design Activity: Storyboarding In small groups, spend 15 minutes doing a very rough sketch

of a storyboard solution for the following design concept: “A navigation system that helps long-distance cyclists find

restaurants and amenities” First write a short scenario and then draw pictures depicting

the scenes (stick figures are fine!) Think about:

Use of people and emotions Indicating passage of time Usage of text captions Amount of detail Number of frames (4-6)


BREAK – 10 MINUTES


Next Class

Wednesday, November 2 Ideation & Sketching

Upcoming Work P1 due on Wednesday! Reflection 5 Sketching, Week 6

Theme: Sketches for your project


GROUP PROJECT MEET TIME

university of washington hcde 518 personas, scenarios, & storyboards hcde 518 autumn 2011 with...

Documents