53
CSE440: Introduction to HCI Methods for Design, Prototyping and Evaluating User Interaction Lecture 09: Personas & Storyboarding Nigini Oliveira Manaswi Saha Liang He Jian Li Zheng Jeremy Viny

CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

CSE440: Introduction to HCIMethods for Design, Prototyping and Evaluating User Interaction

Lecture 09:Personas & Storyboarding

Nigini OliveiraManaswi SahaLiang HeJian Li ZhengJeremy Viny

Page 2: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Project Status

Today

Page 3: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Personas

Page 4: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

“When you are designing for everyone, you are not designing for anyone.”

Page 5: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Personas

Page 6: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Benefits of Personas

ConcretenessRecognitionEvocativenessTaking into account the needs of all relevant users and stakeholdersCommunication with customers

Personas (and stories…) fight back cognitive laziness (i.e., being human)

Page 7: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Personas

Page 8: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Personas - Gender

GenderMag.org

Page 9: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Personas - Culture

https://www.researchgate.net/publication/278034641

Page 10: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Persona Development

Page 11: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Why Personas Fail

https://www.nngroup.com/articles/why-personas-fail/

They were created, but not used

No buy-in from leadership

Personas were created by UX people and imposed on others

People don’t know what personas are or why they’re useful

Page 12: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Team activity

As a group, develop 2 diverse personas for your project:

What are the main users that you are designing for? What characteristics do they share? How are they different from each other?Group these attributes to broadly define rolesTurn the roles into “real” personas

Use the handouts!

Page 13: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

With another group…

Take turns explaining your personas to the other group.

Critique the personas:Are the personas diverse and representative of the user population?Is there an adequate level of detail? Do you feel like you have a good understanding of the users?Do the personas adequately represent “market segments”?

Keep them: they will come in handy throughout the next few assignments!

Page 14: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storyboarding

Page 15: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Why do we need stories in design?

Page 16: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Why do we need stories in design?

How would you explain your favorite social media tool to someone living in 1995? E.g., yelp, twitter, snapchat,…

https://www.commoncraft.com/video/twitter

Page 17: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Three Ways of Telling Stories

ScenariosA short story about a specific user with a specific goalWritten accounts and narratives of the experience Analogy: Books

StoryboardsA series of sketches showing how a user might progress

through a task in a systemVisual storytelling with rough sketches/cartoonsAnalogy: Comics, Picture books

Video StoryboardsRicher visual storytellingAnalogy: Movies/TV

Page 18: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Sketching

Page 19: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storyboard

Page 20: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Another one

Page 21: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Another one

Page 22: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Why Storyboards? (If you have Scenarios)

As a visual representation, storyboards help thinking deeply about…

Specific environments where the system is usedPhysical constraints (size of system, space where it’s used…)Relationships among multiple people

Page 23: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Illustrating Time

Storyboards come from film and animation

Give a “script” of important eventsleave out the details concentrate on the important interactions

Page 24: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Allowing Exploration

Much faster and less expensive to produce

Can therefore explore more potential approaches

Notes help fill in missing pieces of the proposal

Page 25: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Effective to communicate

Effective storyboards can quickly convey information that would be difficult to understand in text

Imagine explaining the storyboard on the right in text, for various audiences

Can illustrate key requirementsand leave open less importantdetails of design

Page 26: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storytelling

Stories have an audienceOther designers, clients, stakeholders, managers, funding agencies,

potential end-users

Stories have a purposeGather and share information about people, tasks, goalsPut a human face on user dataSpark new design concepts and encourage innovationShare ideas and create a sense of history and purposeGiving insight into people who are not like usPersuade others of the value of contribution

"Maybe stories are data with a soul!" - Brene Brown

Page 27: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Stories Provide ContextCharacters

Who is involvedSetting

EnvironmentSequence

What task is illustratedWhat leads a person to use a designWhat steps are involved

SatisfactionWhat is the motivationWhat is the end resultWhat need is satisfied

Page 28: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Amal’s Guide to Storyboarding

Amal Dar Aziz

Page 29: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storytelling

Good storiesUnderstand audienceProvide context of useAre well-motivatedMemorableEvokes a reactionEvokes empathyIllustrate experience Convey emotionsShort and to-the-point

Bad storiesDo not account for audienceBoring or un-engagingFantastical or unrealisticWrong story for purpose Too long to hold attention

Page 30: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Elements of a Storyboard

Visual storytelling

5 visual elementsLevel of detailInclusion of textInclusion of people

and emotionsNumber of framesPortrayal of time

Truong et al, 2006

Page 31: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

1. How Much Detail?Too much detail can lose universality

Scott McCloud

Page 32: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

1. How Much Detail?

How to sketch people?

Star people by Bill Verplank

Page 33: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

1. How Much Detail?

Page 34: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

1. How Much Detail?

Page 35: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

2. Use of Text

Page 36: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

2. Use of TextIt is often necessary, but keep it short

Page 37: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

3. Include People and EmotionsInclude people experiencing the design and their reactions to it (good or bad)

The point of a storyboard is to convey the experience of using the system

Page 38: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

4. How Many Frames?4-6 frames is ideal for end-users

Less work to illustrateMust be able to succinctly tell story

More is not always betterMay lose focus of storyMay lose attention

Page 39: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

4. How Many Frames?

Page 40: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

4. How Many Frames?Remove unnecessary frames

Page 41: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

5. Passage of TimeOnly use of necessary to understand

Page 42: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Team activityAgain, using your project as a basis:

Create one storyboard that puts together… one previously defined persona,and one of the tasks you plan to support.

When you finish, get feedback from another team.

Page 43: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

More Examples and Tricks in Storyboarding

Page 44: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storyboards for Comparing Ideas

Authoritative

Supportive

Page 45: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storyboards for Comparing Ideas

Cooperative

Competitive

Page 46: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Storyboards for Comparing Ideas

Negative Reinforcement

Positive Reinforcement

Page 47: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Use Pictures (only if really necessary)

Page 48: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Existing Images from Other Sources

http://designcomics.org/

http://www.pdclipart.org/

Page 49: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Blur Out Unnecessary Detail

Using image editing software to simplify photos into sketches

Page 50: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Selective Use of Color

Page 51: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Selective Use of Color

Page 52: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Summary

Think about your audienceThink about your time constraintsThink about how much you want to tell Think about options for presenting your story

And finally: Think about your users (see Personas, up next)

Page 53: CSE440: Introduction to HCI - courses.cs.washington.edu · Other designers, clients, stakeholders, managers, funding agencies, potential end-users Stories have a purpose Gather and

Ask me something!