SlideShare a Scribd company logo
1 of 132
Download to read offline
INTERACTION
DESIGN
(IXD)
INTERACTION DESIGN IS THE CREATION
OF A DIALOGUE BETWEEN A PERSON AND
A DESIGNED ARTIFACT - A PRODUCT,
SERVICE, OR SYSTEM.
Interaction Design with Personas and Scenarios
TODAY’S CLASS

Goaldirected
Design

4
User
Research

Personas
Scenarios
Task
Analysis
Use Cases
Feature
Design
Advanced Barbies for Design Excellence

PERSONAS &
SCENARIOS
“A persona is a user
archetype you can use
to help guide decisions
about product features,
navigation,
interactions, and even
visual design.”
- Kim Goodwin, Cooper
Personas bring users into focus
WHY DO WE HAVE THEM?
The average user doesn’t exist.
We can‟t design for everyone

But maybe we can get it right for the right people
But you can play one on TV

YOU ARE NOT THE USER
Empathy & Insight
To remember all that research

MNEMONIC
Personas are a
representative behavior
and activity profile for a
customer base.
Personas

From CarbonIQ , circa 2000
FOR EXAMPLE
Interaction Design with Personas and Scenarios
Grace

(62/ female/ widowed/ Little Rock, AR.)
“I like playing my favorite games online, but if I can
play with friends, well that‟s even better!”
Personal Background: Her husband has passed
on. She has two grown kids, both of whom live far
away. She misses the kids, but has a fairly large
circle of friends that she spends time with.
Technical Proficiency Profile: Limited. Can use her
browser and her email. MS Word confuses her,
and she doesn‟t like using it. Doesn‟t know what an
OS is. Tends to click yes if the browser prompts
her to do anything, and will click wildly until things
work.
History with Shockwave and/or AtomFilms: Plays
crossword puzzles daily and saves them. Plays
card games, PhotoJam, but is offended by South
Park cartoons
Shockwave‟s opportunity: If Grace can be
convinced to participate in community activities,
she will become a loyal user of the site. She needs
to be sheltered from the sick and twisted content,
however.
Sarah

(22/ female/ single/ Washington, DC.)
“I like AtomFilms because it‟s just about the films”
Personal Background: Liberal arts education at
college in the Midwest Just graduated and moved
to DC. Has a dog Likes music and art. Went to
Lilith Fair. Sends out mass emails about causes
she cares about, or jokes.
Profession: Editor for non-profit organization
($35K/yr)
History with Shockwave and/or AtomFilms: First
came to AtomFilms because she did a search on
Sundance content. She‟s heard about the merger
with AtomFilms, and is very worried about
AtomFilms losing its edge, or begin buried in the
Shockwave.com site. She thinks some
controversial material might be hidden if AtomFilm
gets merged with Shockwave.
Shockwave‟s opportunity: If Shockwave can prove
they are trustworthy enough to coax her into
signing up, she will become a loyal visitor and
shortlist subscriber. If she feels clicking through
ads will help Shockwave support independent film,
she will.
Scott

(17/ male/ single/ Shaumburg, IL.)
“I want something cool and really on the edge.
Something you can‟t get on TV”
#2 most common user
Profession: Full time student (studies exercise and
sport science)
Personal Background: Youngest kid in family of
five. Likes to be seen as a little rebellious. Excited
to be in college, but not really brave enough yet to
actually do anything rebellious, so uses Internet to
express his self-image.
History with Shockwave and/or AtomFilms: he‟s
been to Shockwave a few times, and usually clicks
games as soon as the navigation bar loads. He
likes playing arcade games, and “shoot „em up‟s.”
Spend two hours playing “King of the Hill paintball”
recently.
Shockwave‟s opportunity: he is already hanging
out in the games section regularly. If shockwave
can introduce him to it‟s sick and twisted material,
it can keep him on the website longer, and use his
tendency to send out links to spread the word.
Persona development

‣

How to create:
• Summarize findings, distribute to stakeholders.
• Hold a work session with stakeholders & development team to
brainstorm personas.
• Prioritize and cull lesser personas to develop primary and supporting
personas.
Sort your findings
Specific: Each piece of information should be as
precise as possible. Throw out information like, “Users
like it to be easy,” and keep information like, “Users
need to be able to complete a process in half an hour.”
Relevant: Relevant to your product, not to every site
on the Web. Don‟t report, “Users like free stuff,” but
include, “Many users request free evaluation periods
for software to know if paying will be worth it.”
Universal: Find things that are true for the entire site,
not for a single item on a single page. Weed out things
like, “Users couldn‟t find the Submit button on the
checkout page,” but leave in, “We have a type of user
who knows what he wants already and needs a way to
speed through finding and buying.”
Specific: Each piece of information should be as
precise as possible. Throw out information like, “Users
like it to be easy,” and keep information like, “Users
need to be able to complete a process in half an hour.”
Relevant: Relevant to your product, not to every site
on the Web. Don‟t report, “Users like free stuff,” but
include, “Many users request free evaluation periods
for software to know if paying will be worth it.”
Universal: Find things that are true for the entire site,
not for a single item on a single page. Weed out things
like, “Users couldn‟t find the Submit button on the
checkout page,” but leave in, “We have a type of user
who knows what he wants already and needs a way to
speed through finding and buying.”

Write out everything you can think of that you observed on post its

5 MINUTES
Write out age(s), genders, ethnicities and other demographics

1 MINUTE
Make pseudo-people

10 MINUTES GROUP TOGETHER LIKE
SHARE
Start adding depth to the personas

ENRICH
Frequency of Use

Weekly
?

Daily

All the
time?
Capability

Computer and IT experience

Novice

Expert
Examples

Eats lunch
at desk
each day

Eats out
with clients

Eats lunch
with team
Examples

New dad,
shares photos
daily

Family archivist
Avoids
grandparents
Examples

Can find
browser if
pressed

Excel whiz

Writes own
SQL queries
From Todd Warfel‟s Persona Talk http://www.slideshare.net/toddwarfel/data-driven-personas
CREATE DETAILS
[Persona’s name]
[A tag line for the persona]
About [Name]
• Who are they?
• What is their background?
• What is their context?
• What’s important to them?
• What are their pain points and
frustrations?

A picture or photo of
the persona

“A quote the persona
might say”

Key goals & needs
• Goals
• Motivations
• Drivers
• Needs

From An introduction to personas for technical authors by Neil Turner http://www.slideshare.net/neiljamesturner/an-introduction-to-personas-for-technical-authors
They can be simple
You can make them very fancy

From Todd Warfel‟s Persona Talk http://www.slideshare.net/toddwarfel/data-driven-personas
SANITY CHECK
Do I know people like this?

ARE THEY REAL?
Is it worth targeting them? Do I have information I can use to make decisions?

ARE THEY USEFUL?
Have a made a dream user that isn’t common?

ARE THEY TOO USEFUL?
ROLE PLAY
REFINE FURTHER
Prioritize personas
Prioritization of Personas is essential
To assure that design decisions don't become
generic in the face of too many audiences
‣ To allow for prioritization of research efforts
‣ to Create another filter by which feature level
prioritization can occur
‣
secondary

primary
special
secondary

primary
special
Names Matter

Think of your persona as a brand
‣ People are more likely to remember a memorable name e.g.
‣ Phoebe the photographer
‣ Stuart the student
‣ Enrique the engineer
‣ Think memorable, but believable!
‣
Photos of real people

Toby

The Cambridge new comer
About Toby (28)
•
•
•
•
•

Currently lives in Cambridge with his girlfriend
Moved to Cambridge from London 6 months ago
Is an English & drama teacher at a Cambridge high
school
Is keen on making some new friends in Cambridge
Uses the Internet most days and will use email
and Facebook to keep in touch with friends

“I use the Internet for
everything”

Key goals & needs
• To know where places are
• To find out what is going
on locally
• To make new fiends

From An introduction to personas for technical authors by Neil Turner http://www.slideshare.net/neiljamesturner/an-introduction-to-personas-for-technical-authors
Choose thoughtfully
‣

A person photo should be:
‣
‣

A head shot

‣

Natural, not too staged

‣

‣

A good size

Royalty free

Some good websites for finding photos are:
‣

Flickr

‣

Stock.xchng

‣

Fotolia

‣

Bad: watermark,
staged, and he’s
kinda slimey

Google images

Good: real person,
and easy to like and
want to help
EXERCISE: ADD DETAIL
TIPS AND TRICKS
Keep Alive
I’m worried about
Sandy. Can she use
the profile?
Omit needless words

Only include information that is important when it comes to designing
for that person
‣ Throw away any superfluous information (unless of course it impacts
the design) e.g.
‣ Their favourite film
‣ What car they drive
‣ Who their best friend is
‣
Don‟t reinvent for every project
Use personas

‣

Keep them near
•
•
•
•

Hang them on your wall
Make poster, placemats, puppets
Role-play personas
Evaluate with them
From Steve Mulder‟s The User is Always right http://www.slideshare.net/MulderMedia/the-user-is-always-right-making-personas-work-for-your-site
From Todd Warfel‟s Persona Talk http://www.slideshare.net/toddwarfel/data-driven-personas
THE PROBLEM WITH PERSONAS
I‟ve never been a big
believer in personas.
They‟re artificial, abstract,
and fictitious. I don‟t think
you can build a great
product for a person that
doesn‟t exist. And I
definitely don‟t think you
can build a great product
based on a composite
sketch of 10 different
people all rolled into one
(or two or three)
Personas Don‟t

“

Personas don’t talk back. Personas can’t answer questions. Personas
don’t have opinions. Personas can’t tell you when something just doesn’t
feel right. Personas can’t tell you when a sentence doesn’t make sense.
Personas don’t get frustrated. Personas aren’t pressed for time. Personas
aren’t moody. Personas can’t click things. Personas can’t make mistakes.
Personas can’t make value judgments. Personas don’t use products.
Personas aren’t real.
SCENAROS
User
Research
Segments
Personas

Scenarios
Task
Analysis
Use Cases
Feature
Design
Pick a persona
What is that’s personas GOAL for
using your product?
Tell their story.

The most perfect, magical story of them
using your software and everything
is good.
All of life’s hurdles are
overcome with your product.
No buttons, no errors. No design yet.
A software that works.
Steve Mulder’s Advice
65
Set the scene.
‣ Where are they? What is the situation?
‣ Establish the goal or conflict.
‣ What worries them? What is the dream?
‣ Overcome crises along the way.
‣ What are the kind of hurdles on usually run into?
‣ Achieve resolution.
‣ How will your software save the day?
‣ Reach denouement.
‣ Then what? How do they leave?
‣
66
Add business constraints in
Keep the story as positive as possible
Add in log in/registration
Add in check out
Bring business and the user goals together
Resolve tensions
From Steve Mulder‟s The User is Always right http://www.slideshare.net/MulderMedia/the-user-is-always-right-making-personas-work-for-your-site
68

ADJUST FOR FREQUENCY
69
Daily-Use Scenarios
Usually only 2-3 of these
Clear training, quickly removed
Shortcuts & power tools
Customization
Tell the story of the 300th use as well as the 1st

NOT ALL APPS HAVE DAILY USE
70
Infrequent, Common Scenarios
Users do it only once in a while
Many users do it – core to business
Expected to “just work”
Users unlikely to pay close attention
Needs excellent unobtrusive help
Will be taught each use
71
Necessary-Use Scenarios
Must be done, but aren’t done often
User needs to get right, be comfortable it works
Changing printer cartridges, clearing memory,
fighting a virus, visiting a potentially infected
website, deleting a lot of files
Must have good help/pedagogy
Must have excellent error handling
No need for customization or shortcuts
72
Edge-Case Scenario
Unusual situations
Programmers must handle, or code will not work
Design can largely ignore beyond quick fixes.
Work on last (or not at all)
73
74
Exercise: Revise your scenarios. Add new ones.
75
Daily?

Common Infrequent?
76

COMMUNICATING SCENARIOS
When Stan is out of the office and working at a client’s location, the last thing he feels like doing at the end of a
long day is entering his hours into his company’s time tracking tool. So he usually puts this off until Friday and

77
then grimaces to himself at 6:00 as he launches the VPN tool, logs in, and then points his Web browser to the

intranet home page. Fortunately, there’s a link to the time tracking tool right on the home page, along with other
commonly used tools.

Once in the time tracking tool, he’s happy to see that it remembers his activities from the previous week, so all he
has to do is enter new hours for this week for the same activities. He started a new project this week, so he clicks
New Project and selects his client from the list that appears, then easily enters his hours. Soon he’s finished, and
what used to take a half hour now takes ten minutes. He glances at the total to make sure all the hours are there,
then clicks Submit.
After the confirmation message appears, the Web browser redirects Stan to the intranet home page, where he
immediately notices that yesterday’s company presentation is now available. He missed the meeting, so he quickly

downloads the presentation to look at while he’s on the flight home tomorrow. While it’s downloading, he sees
from a dashboard on the home page that the company message board has come to life with a discussion about
what Web 2.0 means to the business. He can’t resist clicking to see what Riccardo has to say on this topic, and
before he knows it spends 15 minutes reading various posts. He even posts a quick URL of a Google Maps mashup
he just found.
Storyboards
78

‣

Kim Goodwin, Designing for the digital age
Comics
79

Kevin Change, See What I Mean
81
82

Emotion matters, but it isn’t hard to communicate!
(from Kevin Cheng’s See What I Mean)
83

You can show time passing….
(from Kevin Cheng’s See What I Mean)
Can’t draw?

84

Stick figures!
Photos!
Clipart!

 Philgreg.tv
 Boxesandarrows.com
t Kevin Change, See What I
Mean
Regardless of how
you present them,
what you want to
leave with is a
clear idea of what
requirements and
features you have.

85
TASK ANALYSIS & USE CASES
User
Research
Segments
Personas
Scenarios

Task Analysis
Use Cases
Feature
Design
Task analysis
Can be used to
‣ Understand current behavior
‣ Optimize current behavior
‣ Design for new behavior
In Designing you
‣ Break down a story into
discrete tasks
‣ Identify branching decision
points
Why the user is performing the task (that is, the underlying
Task Analysis during Research

goal)
Frequency and importance of the task
Cues — what initiates or prompts the execution of the task
Dependencies — what must be in place to perform the task,
as well as what is
dependent on the completion of the task
People who are involved and their roles and responsibilities
Specific actions that are performed
Decisions that are made

Information that is used to support decisions
What goes wrong — errors and exception cases
How errors and exceptions are corrected
From a
McDonald‟s
patent
application on
sandwich
making
Interaction Design with Personas and Scenarios
9
3

How to Design

TASK ANALYSIS
Scenario: Picking films to see

Persona: Michael
From Information Architecture: Blueprints for the Web by
Christina Wodtke

Festival Planner asks Michael if he’s interested in any particular
directors or actors. Michael indicates people he thinks have promise.
He notices some names he doesn’t know and reads short bios of them.
He adds a couple to watch. He notices he can save this information by
simply adding his email address and a password. He decides he
really ought to because he’s put in a bit of effort at this point. He’s
pleased it didn’t ask him for any more personal information; he gets so
tired of typing in this and that for registration on every site he comes
across. Festival Planner next asks him if he’s interested in any
particular genre of film and if he’s traveling for business, pleasure, or
both. The Planner asks him if he’s interested only in films that haven’t
been signed to a distributor, or if he’s interested in all films. He
indicates that he’s interested only in unsigned films. Finally, Festival
Planner asks him if he’s willing to see overlapping films, or if he wants
the planner to make sure his films dovetail. Michael would rather see
complete films, but this is a business trip. He sighs and picks overlap.
Festival Planner now gives him a schedule to review, with three films
to pick from and an option to “see all for this time slot.” One film for
each time slot is indicated as his “best pick.” Each shows how well it
meets his taste and needs. Or he can choose to “rest” and not select a
film for that time period. Michael goes through the schedule. His
wristwatch beeps, and he absent-mindedly shuts it off. He continues
to select his films. As he chooses films, he notices an option to get a
report on any film when it’s available—he’s very excited by that. If he
can’t see them all, at least he can get a sense of what he’s missing!
9
5

HIGHLIGHT YOUR VERBS
Goal: Michael wants to quickly set up

1. Understand how it works.

a schedule for Sundance.

2. Choose films of interest.

9
3. Select film state of availability (signed, unsigned).
6
4. Select film scheduling (dovetail or overlap).
5. View recommendation.
6. Select films of choice.
7. Sign up for reports.
8. Save work (available in previous steps).
9. Email schedule.

From Information Architecture: Blueprints for the Web by
Christina Wodtke
9
7

PULL OUT THE STEPS
Goal: Michael wants to quickly set up
a schedule for Sundance.

From Information Architecture: Blueprints for the Web by
Christina Wodtke

Next: Break down into subtasks
2. Choose films of interest.
a. Select directors of interest.
b. Select actors of interest.
c. Select genres of interest.

9
8
9
9

FIND SUBTASKS
Goal: Michael wants to quickly set up
a schedule for Sundance.

From Information Architecture: Blueprints for the Web by
Christina Wodtke

1
0
0
1
0
1
TRY A SKETCH
Visual Vocabulary
A simple, useful set of shapes to communicate
interaction and hierarchy, used for both flows and
sitemaps.

1
0
2
From Jesse James
Garrett’s Reverse
engineered Yahoo Mail

1
0
3
1
0
4
Exercise

REVERSE ENGINEER A COMPETITOR
User
Research
Segments
Personas
Scenarios

Task
Analysis

Use Cases
Feature
Design
A use case from our task analysis
Use cases
This is just more formal and careful documented
task analysis, useful to programmers.
It covers both the dream scenario, but also any
issues inherent in the actual system.
Both user AND system behavior is outlined.
Used in specifications documents. Often written by
product managers… but is that a good idea?

From Information Architecture: Blueprints for the Web by
Christina Wodtke
First, name all your use cases (or user stories, or scenarios)
(you can get these from your sitepath/system diagram or AOF)
Example: Log in Use Case
Login
Brief Description
This use case describes how a user logs into the Course Registration System.
Basic Flow
This use case starts when an actor wishes to log into the Course Registration System.The system requests that the actor enter his/her name and
password.
The actor enters his/her name and password.
The system validates the entered name and password and logs the actor into the system.
Alternative Flows
Invalid Name / Password
If in the Basic Flow the actor enters an invalid name and/or password, the system displays an error message. The actor can choose to either
return to the beginning of the Basic Flow or cancel the login, at which point the use case ends.
Pre-Conditions
None
Post-Conditions
If the use case was successful, the actor is now logged into the system. If not the system state is unchanged.

Next, break it into its component tasks. List expected series of task first,
then list all the scenarios for when things go wrong under “alternate.”
I prefer the two column approach, with user on
one side, system on the other.
Note: I do not say “pushes button.” or the like
anywhere: save interface design for late, just
focus on interaction

User
User inserts card

Requests PIN

User enters Pin

Break
it down

System
Displays choices
1. Get balance
2. Withdraw money
3. Make deposit

(1) User selects Get Balance

Displays current balance

(2)User selects withdraw money

System ask the user for an amount

User enters an amount

Systems checks balance. If <
balance, asks for confirmation
Example user stories.

And User Stories?
Agile, Short, can be tested, no design indicated
Stakeholders write user stories.
Use the simplest tool.
Remember non-functional requirements.
Indicate the estimated size.
Indicate the priority.
Optionally include a unique identifier.

• Students can purchase monthly parking passes online.
• Parking passes can be paid via credit cards.
• Parking passes can be paid via PayPal ™.
• Professors can input student marks.
• Students can obtain their current seminar schedule.
• Students can order official transcripts.
• Students can only enroll in seminars for which they have
prerequisites.
• Transcripts will be available online via a standard browser.
Can task analysis and use cases
limit?
If I ask you to
make a vase
you might
come up with
a vast number
of variations of
form, but it
would mostly
look like one
of these
Design a way to enjoy flowers

But if I ask you to
think of a way to
enjoy plants and
flowers?
And laws and guidelines

PRINCIPLES
SOME LAWS
Fitts‟s Law
Fitts‟s Law simply states that the time it takes to move from a starting position to a final target is
determined by two things: the distance to the target and the size of the target.
The Magical Number Seven +- 1

Is a myth
Law of the
Conservation of
Complexity
states that some complexity is inherent in every process. There is a point beyond which you can‟t
simplify the process any further; you can only move the inherent complexity from one place to
another.
Larry Tesler
Universal Principles

Direct Manipulation
Affordances
Feedback
Mental Model
Standards
Poka-yoke
Direct
Manipulation
Affordances
Feedback
Feedback
Feedback
Discuss
Do you need a message?
Is it enough it always shows?
What if technology doesn‟t allow it to be on top (more recent, etc) Should you force it there to make
sure user knows its posted?
Inline feedback vs validation: Luke Wrobowski
http://alistapart.com/article/inline-validation-in-web-forms

Traditional

Inline
Feedback Matters
Inline feedback gave:
•
•
•
•
•

a 22% increase in success rates,
a 22% decrease in errors made,
a 31% increase in satisfaction rating,
a 42% decrease in completion times,
and
a 47% decrease in the number of eye
fixations.

Inline Validation in Web Forms
by LUKE WROBLEWSKI September 01, 2009

“You‟d rather know about your
mistakes as you go along.”

“It‟s much better than getting all the
way down and hitting „submit,‟ only
to find out that it doesn‟t like your
username. It‟s much better when it
tells you as you go along.”
The Poka-Yoke
Principle
Poka-Yoke roughly translates in English to mistake proofing: avoiding (yokeru) inadvertent errors
(poka). Designers use Poka-Yoke when they put constraints on products to prevent errors, forcing
users to adjust their behavior and correctly execute an operation.
Errors

Prevent
Allow fixes
COMPASSION
Avoid learned Dismissal
Standards
"Obey standards unless there
is a truly superior alternative"
- Alan Cooper
Contextual Principles

What you know about the context/users/activity. E.g.
‣ Recipes must be scannable
‣ User should know where they are in a recipe
‣ Recipes allow users to find ingredients for shopping and mise en place by listing them apart from
instructions
You make them up
Tivo Tennants

It‟s entertainment, stupid.
It‟s TV, stupid.
It‟s video, dammit.
Everything is smooth and gentle.
No modality or deep hierarchy.
Respect the viewer‟s privacy.
It‟s a robust appliance, like a TV.
WHAT ARE YOUR LAWS?
HEADER

Q&A

1
3
7

More Related Content

More from Christina Wodtke

Design Strategies for Understanding
Design Strategies for UnderstandingDesign Strategies for Understanding
Design Strategies for UnderstandingChristina Wodtke
 
Visual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing StudiesVisual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing StudiesChristina Wodtke
 
Lecture 010 Polishing the UI
Lecture 010 Polishing the UILecture 010 Polishing the UI
Lecture 010 Polishing the UIChristina Wodtke
 
Lean Teams are Learning Teams
Lean Teams are Learning TeamsLean Teams are Learning Teams
Lean Teams are Learning TeamsChristina Wodtke
 
Game Design Fundamentals Megadeck
Game Design Fundamentals MegadeckGame Design Fundamentals Megadeck
Game Design Fundamentals MegadeckChristina Wodtke
 
Visual Thinking: Working with Pictures
Visual Thinking: Working with PicturesVisual Thinking: Working with Pictures
Visual Thinking: Working with PicturesChristina Wodtke
 
Design the team you need to succeed
Design the team you need to succeedDesign the team you need to succeed
Design the team you need to succeedChristina Wodtke
 
Class 6 Identifying and Validating Assumptions
Class 6   Identifying and Validating AssumptionsClass 6   Identifying and Validating Assumptions
Class 6 Identifying and Validating AssumptionsChristina Wodtke
 
Teaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction DesignTeaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction DesignChristina Wodtke
 
The Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 NeedfindingThe Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 NeedfindingChristina Wodtke
 
The Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offeringThe Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offeringChristina Wodtke
 
The Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product IdeationThe Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product IdeationChristina Wodtke
 
In Defense of Childish Things
 In Defense of Childish Things In Defense of Childish Things
In Defense of Childish ThingsChristina Wodtke
 
Radical Focus: Accomplish big goals with objectives and key results
Radical Focus: Accomplish big goals with objectives and key resultsRadical Focus: Accomplish big goals with objectives and key results
Radical Focus: Accomplish big goals with objectives and key resultsChristina Wodtke
 

More from Christina Wodtke (20)

It's complicated
It's complicatedIt's complicated
It's complicated
 
Reboot Your Team
Reboot Your TeamReboot Your Team
Reboot Your Team
 
Design Strategies for Understanding
Design Strategies for UnderstandingDesign Strategies for Understanding
Design Strategies for Understanding
 
Visual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing StudiesVisual Thinking Stanford Continuing Studies
Visual Thinking Stanford Continuing Studies
 
Lecture 010 Polishing the UI
Lecture 010 Polishing the UILecture 010 Polishing the UI
Lecture 010 Polishing the UI
 
WIAD Boston
WIAD BostonWIAD Boston
WIAD Boston
 
Lean Teams are Learning Teams
Lean Teams are Learning TeamsLean Teams are Learning Teams
Lean Teams are Learning Teams
 
Game Design Fundamentals Megadeck
Game Design Fundamentals MegadeckGame Design Fundamentals Megadeck
Game Design Fundamentals Megadeck
 
Visual Thinking: Working with Pictures
Visual Thinking: Working with PicturesVisual Thinking: Working with Pictures
Visual Thinking: Working with Pictures
 
Design the team you need to succeed
Design the team you need to succeedDesign the team you need to succeed
Design the team you need to succeed
 
Class5 Business Design
Class5 Business DesignClass5 Business Design
Class5 Business Design
 
Class 6 Identifying and Validating Assumptions
Class 6   Identifying and Validating AssumptionsClass 6   Identifying and Validating Assumptions
Class 6 Identifying and Validating Assumptions
 
Making the Complex Clear
Making the Complex ClearMaking the Complex Clear
Making the Complex Clear
 
Teaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction DesignTeaching Game Design to Teach Interaction Design
Teaching Game Design to Teach Interaction Design
 
The Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 NeedfindingThe Creative Entrepreneur: Stanford Class2 Needfinding
The Creative Entrepreneur: Stanford Class2 Needfinding
 
The Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offeringThe Creative Entrepreneur: Stanford Class4 From story to offering
The Creative Entrepreneur: Stanford Class4 From story to offering
 
The Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product IdeationThe Creative Entrepreneur: Stanford Class3 New Product Ideation
The Creative Entrepreneur: Stanford Class3 New Product Ideation
 
In Defense of Childish Things
 In Defense of Childish Things In Defense of Childish Things
In Defense of Childish Things
 
Design All The Things
Design All The ThingsDesign All The Things
Design All The Things
 
Radical Focus: Accomplish big goals with objectives and key results
Radical Focus: Accomplish big goals with objectives and key resultsRadical Focus: Accomplish big goals with objectives and key results
Radical Focus: Accomplish big goals with objectives and key results
 

Recently uploaded

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Recently uploaded (19)

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Interaction Design with Personas and Scenarios

  • 2. INTERACTION DESIGN IS THE CREATION OF A DIALOGUE BETWEEN A PERSON AND A DESIGNED ARTIFACT - A PRODUCT, SERVICE, OR SYSTEM.
  • 6. Advanced Barbies for Design Excellence PERSONAS & SCENARIOS
  • 7. “A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions, and even visual design.” - Kim Goodwin, Cooper
  • 8. Personas bring users into focus
  • 9. WHY DO WE HAVE THEM?
  • 10. The average user doesn’t exist. We can‟t design for everyone But maybe we can get it right for the right people
  • 11. But you can play one on TV YOU ARE NOT THE USER
  • 13. To remember all that research MNEMONIC
  • 14. Personas are a representative behavior and activity profile for a customer base.
  • 18. Grace (62/ female/ widowed/ Little Rock, AR.) “I like playing my favorite games online, but if I can play with friends, well that‟s even better!” Personal Background: Her husband has passed on. She has two grown kids, both of whom live far away. She misses the kids, but has a fairly large circle of friends that she spends time with. Technical Proficiency Profile: Limited. Can use her browser and her email. MS Word confuses her, and she doesn‟t like using it. Doesn‟t know what an OS is. Tends to click yes if the browser prompts her to do anything, and will click wildly until things work. History with Shockwave and/or AtomFilms: Plays crossword puzzles daily and saves them. Plays card games, PhotoJam, but is offended by South Park cartoons Shockwave‟s opportunity: If Grace can be convinced to participate in community activities, she will become a loyal user of the site. She needs to be sheltered from the sick and twisted content, however.
  • 19. Sarah (22/ female/ single/ Washington, DC.) “I like AtomFilms because it‟s just about the films” Personal Background: Liberal arts education at college in the Midwest Just graduated and moved to DC. Has a dog Likes music and art. Went to Lilith Fair. Sends out mass emails about causes she cares about, or jokes. Profession: Editor for non-profit organization ($35K/yr) History with Shockwave and/or AtomFilms: First came to AtomFilms because she did a search on Sundance content. She‟s heard about the merger with AtomFilms, and is very worried about AtomFilms losing its edge, or begin buried in the Shockwave.com site. She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave. Shockwave‟s opportunity: If Shockwave can prove they are trustworthy enough to coax her into signing up, she will become a loyal visitor and shortlist subscriber. If she feels clicking through ads will help Shockwave support independent film, she will.
  • 20. Scott (17/ male/ single/ Shaumburg, IL.) “I want something cool and really on the edge. Something you can‟t get on TV” #2 most common user Profession: Full time student (studies exercise and sport science) Personal Background: Youngest kid in family of five. Likes to be seen as a little rebellious. Excited to be in college, but not really brave enough yet to actually do anything rebellious, so uses Internet to express his self-image. History with Shockwave and/or AtomFilms: he‟s been to Shockwave a few times, and usually clicks games as soon as the navigation bar loads. He likes playing arcade games, and “shoot „em up‟s.” Spend two hours playing “King of the Hill paintball” recently. Shockwave‟s opportunity: he is already hanging out in the games section regularly. If shockwave can introduce him to it‟s sick and twisted material, it can keep him on the website longer, and use his tendency to send out links to spread the word.
  • 21. Persona development ‣ How to create: • Summarize findings, distribute to stakeholders. • Hold a work session with stakeholders & development team to brainstorm personas. • Prioritize and cull lesser personas to develop primary and supporting personas.
  • 22. Sort your findings Specific: Each piece of information should be as precise as possible. Throw out information like, “Users like it to be easy,” and keep information like, “Users need to be able to complete a process in half an hour.” Relevant: Relevant to your product, not to every site on the Web. Don‟t report, “Users like free stuff,” but include, “Many users request free evaluation periods for software to know if paying will be worth it.” Universal: Find things that are true for the entire site, not for a single item on a single page. Weed out things like, “Users couldn‟t find the Submit button on the checkout page,” but leave in, “We have a type of user who knows what he wants already and needs a way to speed through finding and buying.”
  • 23. Specific: Each piece of information should be as precise as possible. Throw out information like, “Users like it to be easy,” and keep information like, “Users need to be able to complete a process in half an hour.” Relevant: Relevant to your product, not to every site on the Web. Don‟t report, “Users like free stuff,” but include, “Many users request free evaluation periods for software to know if paying will be worth it.” Universal: Find things that are true for the entire site, not for a single item on a single page. Weed out things like, “Users couldn‟t find the Submit button on the checkout page,” but leave in, “We have a type of user who knows what he wants already and needs a way to speed through finding and buying.” Write out everything you can think of that you observed on post its 5 MINUTES
  • 24. Write out age(s), genders, ethnicities and other demographics 1 MINUTE
  • 25. Make pseudo-people 10 MINUTES GROUP TOGETHER LIKE
  • 26. SHARE
  • 27. Start adding depth to the personas ENRICH
  • 29. Capability Computer and IT experience Novice Expert
  • 30. Examples Eats lunch at desk each day Eats out with clients Eats lunch with team
  • 31. Examples New dad, shares photos daily Family archivist Avoids grandparents
  • 32. Examples Can find browser if pressed Excel whiz Writes own SQL queries
  • 33. From Todd Warfel‟s Persona Talk http://www.slideshare.net/toddwarfel/data-driven-personas
  • 35. [Persona’s name] [A tag line for the persona] About [Name] • Who are they? • What is their background? • What is their context? • What’s important to them? • What are their pain points and frustrations? A picture or photo of the persona “A quote the persona might say” Key goals & needs • Goals • Motivations • Drivers • Needs From An introduction to personas for technical authors by Neil Turner http://www.slideshare.net/neiljamesturner/an-introduction-to-personas-for-technical-authors
  • 36. They can be simple
  • 37. You can make them very fancy From Todd Warfel‟s Persona Talk http://www.slideshare.net/toddwarfel/data-driven-personas
  • 39. Do I know people like this? ARE THEY REAL?
  • 40. Is it worth targeting them? Do I have information I can use to make decisions? ARE THEY USEFUL?
  • 41. Have a made a dream user that isn’t common? ARE THEY TOO USEFUL?
  • 45. Prioritization of Personas is essential To assure that design decisions don't become generic in the face of too many audiences ‣ To allow for prioritization of research efforts ‣ to Create another filter by which feature level prioritization can occur ‣
  • 48. Names Matter Think of your persona as a brand ‣ People are more likely to remember a memorable name e.g. ‣ Phoebe the photographer ‣ Stuart the student ‣ Enrique the engineer ‣ Think memorable, but believable! ‣
  • 49. Photos of real people Toby The Cambridge new comer About Toby (28) • • • • • Currently lives in Cambridge with his girlfriend Moved to Cambridge from London 6 months ago Is an English & drama teacher at a Cambridge high school Is keen on making some new friends in Cambridge Uses the Internet most days and will use email and Facebook to keep in touch with friends “I use the Internet for everything” Key goals & needs • To know where places are • To find out what is going on locally • To make new fiends From An introduction to personas for technical authors by Neil Turner http://www.slideshare.net/neiljamesturner/an-introduction-to-personas-for-technical-authors
  • 50. Choose thoughtfully ‣ A person photo should be: ‣ ‣ A head shot ‣ Natural, not too staged ‣ ‣ A good size Royalty free Some good websites for finding photos are: ‣ Flickr ‣ Stock.xchng ‣ Fotolia ‣ Bad: watermark, staged, and he’s kinda slimey Google images Good: real person, and easy to like and want to help
  • 53. Keep Alive I’m worried about Sandy. Can she use the profile?
  • 54. Omit needless words Only include information that is important when it comes to designing for that person ‣ Throw away any superfluous information (unless of course it impacts the design) e.g. ‣ Their favourite film ‣ What car they drive ‣ Who their best friend is ‣
  • 55. Don‟t reinvent for every project
  • 56. Use personas ‣ Keep them near • • • • Hang them on your wall Make poster, placemats, puppets Role-play personas Evaluate with them
  • 57. From Steve Mulder‟s The User is Always right http://www.slideshare.net/MulderMedia/the-user-is-always-right-making-personas-work-for-your-site
  • 58. From Todd Warfel‟s Persona Talk http://www.slideshare.net/toddwarfel/data-driven-personas
  • 59. THE PROBLEM WITH PERSONAS
  • 60. I‟ve never been a big believer in personas. They‟re artificial, abstract, and fictitious. I don‟t think you can build a great product for a person that doesn‟t exist. And I definitely don‟t think you can build a great product based on a composite sketch of 10 different people all rolled into one (or two or three)
  • 61. Personas Don‟t “ Personas don’t talk back. Personas can’t answer questions. Personas don’t have opinions. Personas can’t tell you when something just doesn’t feel right. Personas can’t tell you when a sentence doesn’t make sense. Personas don’t get frustrated. Personas aren’t pressed for time. Personas aren’t moody. Personas can’t click things. Personas can’t make mistakes. Personas can’t make value judgments. Personas don’t use products. Personas aren’t real.
  • 64. Pick a persona What is that’s personas GOAL for using your product? Tell their story. The most perfect, magical story of them using your software and everything is good. All of life’s hurdles are overcome with your product. No buttons, no errors. No design yet. A software that works.
  • 65. Steve Mulder’s Advice 65 Set the scene. ‣ Where are they? What is the situation? ‣ Establish the goal or conflict. ‣ What worries them? What is the dream? ‣ Overcome crises along the way. ‣ What are the kind of hurdles on usually run into? ‣ Achieve resolution. ‣ How will your software save the day? ‣ Reach denouement. ‣ Then what? How do they leave? ‣
  • 66. 66 Add business constraints in Keep the story as positive as possible Add in log in/registration Add in check out Bring business and the user goals together Resolve tensions
  • 67. From Steve Mulder‟s The User is Always right http://www.slideshare.net/MulderMedia/the-user-is-always-right-making-personas-work-for-your-site
  • 69. 69 Daily-Use Scenarios Usually only 2-3 of these Clear training, quickly removed Shortcuts & power tools Customization Tell the story of the 300th use as well as the 1st NOT ALL APPS HAVE DAILY USE
  • 70. 70 Infrequent, Common Scenarios Users do it only once in a while Many users do it – core to business Expected to “just work” Users unlikely to pay close attention Needs excellent unobtrusive help Will be taught each use
  • 71. 71 Necessary-Use Scenarios Must be done, but aren’t done often User needs to get right, be comfortable it works Changing printer cartridges, clearing memory, fighting a virus, visiting a potentially infected website, deleting a lot of files Must have good help/pedagogy Must have excellent error handling No need for customization or shortcuts
  • 72. 72 Edge-Case Scenario Unusual situations Programmers must handle, or code will not work Design can largely ignore beyond quick fixes. Work on last (or not at all)
  • 73. 73
  • 74. 74
  • 75. Exercise: Revise your scenarios. Add new ones. 75 Daily? Common Infrequent?
  • 77. When Stan is out of the office and working at a client’s location, the last thing he feels like doing at the end of a long day is entering his hours into his company’s time tracking tool. So he usually puts this off until Friday and 77 then grimaces to himself at 6:00 as he launches the VPN tool, logs in, and then points his Web browser to the intranet home page. Fortunately, there’s a link to the time tracking tool right on the home page, along with other commonly used tools. Once in the time tracking tool, he’s happy to see that it remembers his activities from the previous week, so all he has to do is enter new hours for this week for the same activities. He started a new project this week, so he clicks New Project and selects his client from the list that appears, then easily enters his hours. Soon he’s finished, and what used to take a half hour now takes ten minutes. He glances at the total to make sure all the hours are there, then clicks Submit. After the confirmation message appears, the Web browser redirects Stan to the intranet home page, where he immediately notices that yesterday’s company presentation is now available. He missed the meeting, so he quickly downloads the presentation to look at while he’s on the flight home tomorrow. While it’s downloading, he sees from a dashboard on the home page that the company message board has come to life with a discussion about what Web 2.0 means to the business. He can’t resist clicking to see what Riccardo has to say on this topic, and before he knows it spends 15 minutes reading various posts. He even posts a quick URL of a Google Maps mashup he just found.
  • 80. 81
  • 81. 82 Emotion matters, but it isn’t hard to communicate! (from Kevin Cheng’s See What I Mean)
  • 82. 83 You can show time passing…. (from Kevin Cheng’s See What I Mean)
  • 83. Can’t draw? 84 Stick figures! Photos! Clipart!  Philgreg.tv  Boxesandarrows.com t Kevin Change, See What I Mean
  • 84. Regardless of how you present them, what you want to leave with is a clear idea of what requirements and features you have. 85
  • 85. TASK ANALYSIS & USE CASES
  • 87. Task analysis Can be used to ‣ Understand current behavior ‣ Optimize current behavior ‣ Design for new behavior In Designing you ‣ Break down a story into discrete tasks ‣ Identify branching decision points
  • 88. Why the user is performing the task (that is, the underlying Task Analysis during Research goal) Frequency and importance of the task Cues — what initiates or prompts the execution of the task Dependencies — what must be in place to perform the task, as well as what is dependent on the completion of the task People who are involved and their roles and responsibilities Specific actions that are performed Decisions that are made Information that is used to support decisions What goes wrong — errors and exception cases How errors and exceptions are corrected
  • 92. Scenario: Picking films to see Persona: Michael From Information Architecture: Blueprints for the Web by Christina Wodtke Festival Planner asks Michael if he’s interested in any particular directors or actors. Michael indicates people he thinks have promise. He notices some names he doesn’t know and reads short bios of them. He adds a couple to watch. He notices he can save this information by simply adding his email address and a password. He decides he really ought to because he’s put in a bit of effort at this point. He’s pleased it didn’t ask him for any more personal information; he gets so tired of typing in this and that for registration on every site he comes across. Festival Planner next asks him if he’s interested in any particular genre of film and if he’s traveling for business, pleasure, or both. The Planner asks him if he’s interested only in films that haven’t been signed to a distributor, or if he’s interested in all films. He indicates that he’s interested only in unsigned films. Finally, Festival Planner asks him if he’s willing to see overlapping films, or if he wants the planner to make sure his films dovetail. Michael would rather see complete films, but this is a business trip. He sighs and picks overlap. Festival Planner now gives him a schedule to review, with three films to pick from and an option to “see all for this time slot.” One film for each time slot is indicated as his “best pick.” Each shows how well it meets his taste and needs. Or he can choose to “rest” and not select a film for that time period. Michael goes through the schedule. His wristwatch beeps, and he absent-mindedly shuts it off. He continues to select his films. As he chooses films, he notices an option to get a report on any film when it’s available—he’s very excited by that. If he can’t see them all, at least he can get a sense of what he’s missing!
  • 94. Goal: Michael wants to quickly set up 1. Understand how it works. a schedule for Sundance. 2. Choose films of interest. 9 3. Select film state of availability (signed, unsigned). 6 4. Select film scheduling (dovetail or overlap). 5. View recommendation. 6. Select films of choice. 7. Sign up for reports. 8. Save work (available in previous steps). 9. Email schedule. From Information Architecture: Blueprints for the Web by Christina Wodtke
  • 96. Goal: Michael wants to quickly set up a schedule for Sundance. From Information Architecture: Blueprints for the Web by Christina Wodtke Next: Break down into subtasks 2. Choose films of interest. a. Select directors of interest. b. Select actors of interest. c. Select genres of interest. 9 8
  • 98. Goal: Michael wants to quickly set up a schedule for Sundance. From Information Architecture: Blueprints for the Web by Christina Wodtke 1 0 0
  • 100. Visual Vocabulary A simple, useful set of shapes to communicate interaction and hierarchy, used for both flows and sitemaps. 1 0 2
  • 101. From Jesse James Garrett’s Reverse engineered Yahoo Mail 1 0 3
  • 102. 1 0 4
  • 105. A use case from our task analysis Use cases This is just more formal and careful documented task analysis, useful to programmers. It covers both the dream scenario, but also any issues inherent in the actual system. Both user AND system behavior is outlined. Used in specifications documents. Often written by product managers… but is that a good idea? From Information Architecture: Blueprints for the Web by Christina Wodtke
  • 106. First, name all your use cases (or user stories, or scenarios) (you can get these from your sitepath/system diagram or AOF)
  • 107. Example: Log in Use Case Login Brief Description This use case describes how a user logs into the Course Registration System. Basic Flow This use case starts when an actor wishes to log into the Course Registration System.The system requests that the actor enter his/her name and password. The actor enters his/her name and password. The system validates the entered name and password and logs the actor into the system. Alternative Flows Invalid Name / Password If in the Basic Flow the actor enters an invalid name and/or password, the system displays an error message. The actor can choose to either return to the beginning of the Basic Flow or cancel the login, at which point the use case ends. Pre-Conditions None Post-Conditions If the use case was successful, the actor is now logged into the system. If not the system state is unchanged. Next, break it into its component tasks. List expected series of task first, then list all the scenarios for when things go wrong under “alternate.”
  • 108. I prefer the two column approach, with user on one side, system on the other. Note: I do not say “pushes button.” or the like anywhere: save interface design for late, just focus on interaction User User inserts card Requests PIN User enters Pin Break it down System Displays choices 1. Get balance 2. Withdraw money 3. Make deposit (1) User selects Get Balance Displays current balance (2)User selects withdraw money System ask the user for an amount User enters an amount Systems checks balance. If < balance, asks for confirmation
  • 109. Example user stories. And User Stories? Agile, Short, can be tested, no design indicated Stakeholders write user stories. Use the simplest tool. Remember non-functional requirements. Indicate the estimated size. Indicate the priority. Optionally include a unique identifier. • Students can purchase monthly parking passes online. • Parking passes can be paid via credit cards. • Parking passes can be paid via PayPal ™. • Professors can input student marks. • Students can obtain their current seminar schedule. • Students can order official transcripts. • Students can only enroll in seminars for which they have prerequisites. • Transcripts will be available online via a standard browser.
  • 110. Can task analysis and use cases limit? If I ask you to make a vase you might come up with a vast number of variations of form, but it would mostly look like one of these
  • 111. Design a way to enjoy flowers But if I ask you to think of a way to enjoy plants and flowers?
  • 112. And laws and guidelines PRINCIPLES
  • 114. Fitts‟s Law Fitts‟s Law simply states that the time it takes to move from a starting position to a final target is determined by two things: the distance to the target and the size of the target.
  • 115. The Magical Number Seven +- 1 Is a myth
  • 116. Law of the Conservation of Complexity states that some complexity is inherent in every process. There is a point beyond which you can‟t simplify the process any further; you can only move the inherent complexity from one place to another. Larry Tesler
  • 123. Discuss Do you need a message? Is it enough it always shows? What if technology doesn‟t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • 124. Inline feedback vs validation: Luke Wrobowski http://alistapart.com/article/inline-validation-in-web-forms Traditional Inline
  • 125. Feedback Matters Inline feedback gave: • • • • • a 22% increase in success rates, a 22% decrease in errors made, a 31% increase in satisfaction rating, a 42% decrease in completion times, and a 47% decrease in the number of eye fixations. Inline Validation in Web Forms by LUKE WROBLEWSKI September 01, 2009 “You‟d rather know about your mistakes as you go along.” “It‟s much better than getting all the way down and hitting „submit,‟ only to find out that it doesn‟t like your username. It‟s much better when it tells you as you go along.”
  • 126. The Poka-Yoke Principle Poka-Yoke roughly translates in English to mistake proofing: avoiding (yokeru) inadvertent errors (poka). Designers use Poka-Yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation.
  • 128. Standards "Obey standards unless there is a truly superior alternative" - Alan Cooper
  • 129. Contextual Principles What you know about the context/users/activity. E.g. ‣ Recipes must be scannable ‣ User should know where they are in a recipe ‣ Recipes allow users to find ingredients for shopping and mise en place by listing them apart from instructions You make them up
  • 130. Tivo Tennants It‟s entertainment, stupid. It‟s TV, stupid. It‟s video, dammit. Everything is smooth and gentle. No modality or deep hierarchy. Respect the viewer‟s privacy. It‟s a robust appliance, like a TV.
  • 131. WHAT ARE YOUR LAWS?

Editor's Notes

  1. We’re going to take that literally, here. We’re going to try out playing the computer. Using bodystorming.
  2. Welcome to another session of “all the post-it notes must die!”
  3. Be a rolling suitcase (from blueprints)In the beginning, only flight attendants had rolling suitcases. They had them becausesomeone who understood the flight attendant’s job designed the suitcases for a veryspecific set of needs. Flight attendants needed to dash from flight to flight. They had tostay fresh for the long flight’s exertions, so they didn’t want to get tired carrying a heavybag. Many flight attendants were quite petite, so carrying a big bag could be tough. Andfinally were changing flights so often, they really needed to carry all their essentials onthe plane—they never knew when their job would send them to Tokyo when their bagswere already on their way to Paris.Does this sound familiar? Ordinary people go through the same pains when they fly. Wewant to carry all our valuables onto the plane with us. We need them to fi t in the overheadcompartment. We get tired of carrying bags in the long lines to the ticket counteror while dashing from Terminal C to Terminal F. And our bags often seem to be determinedto head for Paris when we are en route to Tokyo.A travel-savvy designer met a very specific need for a particular group extremely well,and ultimately he met the needs of flyers everywhere.
  4. Alex Reid is desperate to win back his pregnant fiancée after she walked out on him two weeks ago, so he&apos;s showing her that he&apos;s a sensitive new age dude with a baby belly just like hers!
  5. This is a casestudy form early work I did at carbonoiq, that can be shared. But you should probably put in your own.
  6. Elementary my dear Watson!Specifi c: Each piece of information should be as precise as possible. Throw outinformation like, “Users like it to be easy,” and keep information like, “Users needto be able to complete a process in half an hour.”{ Relevant: Relevant to your product, not to every site on the Web. Don’t report,“Users like free stuff,” but include, “Many users request free evaluation periods forsoftware to know if paying will be worth it.”{ Universal: Find things that are true for the entire site, not for a single item on asingle page. Weed out things like, “Users couldn’t fi nd the Submit button on thecheckout page,” but leave in, “We have a type of user who knows what he wantsalready and needs a way to speed through fi nding and buying.”
  7. A group doesn’t just have to be a demographic group. It could be based around similar attitudes, level of engagement, behaviour etc…ASK students to stop and write these different things on their post its.
  8. A group doesn’t just have to be a demographic group. It could be based around similar attitudes, level of engagement, behaviour etc…
  9. Comedy names, such as ‘Miguel the Mexican’ are best avoided, as are celebrity names, such as ‘Jo Lo’ or ‘Madonna’
  10. Comedy names, such as ‘Miguel the Mexican’ are best avoided, as are celebrity names, such as ‘Jo Lo’ or ‘Madonna’http://www.flickr.com/photos/12433334@N04/2390719990/in/photolist-4Dg4Lb-4Gqfa6-4Mbb3t-4MiAVW-4MkCWW-4NShzN-4Q4hVN-4Rcdv1-4XqeJg-521RhQ-5aFFTB-5f9HRd-5ocznq-5qPRzW-5Tg1Ui-5TkgrC-5Tkgub-5TkkdC-5Tkki1-5UfqRN-5Xgt8t-6gg3ej-6gg5p3-6ghCzf-6hRv2T-6pvxgQ-6su7Zr-6RemDm-6Rk8s2-6RpVSi-7ikFKo-7oGeUc-7rfpZs-bmR5K6-93AGYR-8gyUEC-ahi1ad-7Cf67a-dbbjEu-dq4khD-8r5t8d-8r5Cih-7zwDQf-7Xgegt-9xyerT-8r5Duf-eC1CSZ-avfmYw-eBZEKp-7DCYds-8ndChK
  11. If you’re designing a computer system to be used in schools, don’t base your personas on characters from 90210!
  12. The last example is from a company that used to send their personas birthday cards and would receive holiday postcards from their personas. It’s all about getting people regularly thinking about their users.
  13. These are some persona cards that were created to help everyone get to know the personas. You can see some information about the persona on the back of each card, together with what is important to them and a good quote.
  14. http://www.flickr.com/photos/ul_digital_library/with/8978093756/
  15. Open with an exercise, ~15 minutes for quiet individual scenario writing, then 15 to exchange them. Instructions for exchanging– keep each other honest, piont out where you are thinking too much about current constraints like paywalls, or design decisions like buttons and links. Focus on the experience. Meeting of Drama Society October 1973, Glucksman Library NO COPYRIGHT RESTRICTIONS
  16. Revisit your scenarios with this. Add in details. ~10-15 minutes.“Your mission is to document that experience from the persona’s point of view. I like to use the classic components of good storytelling when doing this.Set the scene.Where is the persona when he or she first discovers the need that will lead him or her to the Web site? When does it happen? Who else is around possibly influencing his or her decision? What else is going on at the time? Be as specific as possible to create a realistic story, just as you were with the persona details.Establish the goal or conflict.Visits to the site are triggered by goals, so something must have happened to prompt your persona to go to your site. What was it? Perhaps it occurred in typical narrative fashion, based on a conflict with someone else or an inner conflict that he or she needed to resolve. Be very clear about what your persona is trying to achieve by visiting the site, keeping in mind that he or she could have multiple goals.Overcome crises along the way.When the persona comes to the site, how does he or she enter? What decisions does he or she make along the way? How does the persona find what he or she’s looking for? Are there intermediate steps to describe? What challenges does the persona face along the way that the site helps with? Does the action all take place on your site, or does the persona use other sites, email, IM, phone calls, meetings with others, store visits, and so on? Even though this is an idealized story about how your site could satisfy this persona’s needs perfectly, be realistic about what he or she would actually do. How does the persona feel about the experience while going through it?Achieve resolution.How does the persona ultimately achieve his or her goal? What are the persona’s attitudes at the climax of his or her story? What are the most critical factors in helping the persona achieve his or her goal?Reach denouement.What does the persona do after succeeding? How does the persona leave the site? How does this story affect his or her work or life? What’s his or her perception afterward? How does the persona’s success impact your business?
  17. Now you can add in the businGlucksman Library NO COPYRIGHT RESTRICTIONSess needs. Discuss what het business wants and the user wants, and if there is a middle ground. Still don’t’ add in design …If you write “he submits the form” you are too detailed.
  18. Not everyone has the “no design” philosophy (as you can see) but it helps in this world of many different kinds of solutions.
  19. Users looking up a train schedule or tickets at amtrak… they don’t expect to have to deal with a tutorial, they just want in and out
  20. Which is this? How do you know? What is a good scenario for dealing with this?
  21. SDASM ArchivesSan Diego Air &amp; Space
  22. People may not read your scenarios
  23. Simpel wireframe+ text
  24. Comics for emotionhttp://kevnull.com/2011/09/see-what-i-mean-short-talk-at-wordcamp-sf.htmlhttp://boxesandarrows.com/comics-not-just-for-laughs/
  25. Parts of comic
  26. http://boxesandarrows.com/comics-not-just-for-laughs/http://www.almostexact.com/2011/08/how-to-test-a-new-website-or-concept/http://philgreg.tv/courses/comiclife/
  27. Regardless of how you present them, what you want to leave with is a clear idea of what requirements and features you have.User Stories – are just another way to phrase requirements – talk about them a little bit.
  28. This is a good 40 minute exercise.
  29. Notes: you need to have the scenarios out. Images in this presentation: http://www.flickr.com/photos/ul_digital_library/with/8978093756/
  30. Wallace &quot;Whitey&quot; Wolf, a Mechanic for the City Sweeps Out the Repair Garage ..., 10/1974US National Archive
  31. The U.S. National ArchivesMember since 2009Taken on August 12, 1942
  32. Mcdonalds uses task analysis to optimize for speed and accurate reproduction.
  33. Get out a scenarios
  34. Look for verbs, they indicate action.
  35. Pull the tasks out of the scenarios“Here we try to get the basic unique tasks. This sequence isn’t necessarily written instone. For example, in our design, we hope to make “Save work” available at any stage.However, we know that “Save work” is really, really important later in the process. So, fornow, we’ll leave it in the sequence of the scenario.”
  36. Pull the tasks out of the scenarios“Here we try to get the basic unique tasks. This sequence isn’t necessarily written instone. For example, in our design, we hope to make “Save work” available at any stage.However, we know that “Save work” is really, really important later in the process. So, fornow, we’ll leave it in the sequence of the scenario.”
  37. Diagram, rather than text. Same end result.
  38. Discuss: is design happening here? Who knows the users best? Who should write this?
  39. You may end up with a mashup of approaches.
  40. Limiting the number of menu tabs or the number of items in a dropdown list to the George Miller’s magic number 7 is a false constraint. Miller’s original theory argues that people can keep no more than 7 (plus or minus 2) items in their short-term memory. On a webpage, however, the information is visually present, people don’t have to memorize anything and therefore can easily manage broader choices.For example, research shows that broad and shallow menu structures may even work better than deeper menus. Also, link-rich e-commerce homepages, like that of Amazon with 90+ product category links, are found to be more usable than homepages with only a few links.http://uxmyths.com/post/931925744/myth-23-choices-should-always-be-limited-to-seven
  41. So bloody true. And mostly we move the complexity from the user to the designer.
  42. ExerciseHave a student write their name on a white board. Now tape the marker to a long stick (like a broom handle) and try again.
  43. Compare the keyboard buttons you can feel and push, to the hyper-flat keyboad. What is nicer to use? Is the ipad keyboard enough?
  44. On twitter, when you post you get feedback so you know your tweet went out. on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0Your new status is always posted on top, to let you know its there. Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  45. On twitter, when you post you get feedback so you know your tweet went out. on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0Your new status is always posted on top, to let you know its there. Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  46. On twitter, when you post you get feedback so you know your tweet went out. on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0Your new status is always posted on top, to let you know its there. Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  47. USB can only be put in one place.
  48. Does your software reflect how users think about the space? (we have covered this before)
  49. i.e. I don’t care if it’s stupid, use it.
  50. Can you think up some rules for your space, from what you’ve seen in user research?