Interaction Design with Personas and Scenarios

132
INTERACTION DESIGN (IXD)

description

From the recent class "Fundamentals of User Experience" given 12/13/2013 in NYC

Transcript of Interaction Design with Personas and Scenarios

Page 1: Interaction Design with Personas and Scenarios

INTERACTION DESIGN(IXD)

INTERACTION DESIGN IS THE CREATION OF A DIALOGUE BETWEEN A PERSON AND A DESIGNED ARTIFACT - A PRODUCT SERVICE OR SYSTEM

4TODAYrsquoS CLASS

Goal-directed Design

User Research

Scenarios

Task Analysis

Use Cases

Feature Design

Personas

PERSONAS ampSCENARIOSAdvanced Barbies for Design Excellence

ldquoA persona is a userarchetype you can use to help guide decisionsabout product featuresnavigation interactions and even visual designrdquo- Kim Goodwin Cooper

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 2: Interaction Design with Personas and Scenarios

INTERACTION DESIGN IS THE CREATION OF A DIALOGUE BETWEEN A PERSON AND A DESIGNED ARTIFACT - A PRODUCT SERVICE OR SYSTEM

4TODAYrsquoS CLASS

Goal-directed Design

User Research

Scenarios

Task Analysis

Use Cases

Feature Design

Personas

PERSONAS ampSCENARIOSAdvanced Barbies for Design Excellence

ldquoA persona is a userarchetype you can use to help guide decisionsabout product featuresnavigation interactions and even visual designrdquo- Kim Goodwin Cooper

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 3: Interaction Design with Personas and Scenarios

4TODAYrsquoS CLASS

Goal-directed Design

User Research

Scenarios

Task Analysis

Use Cases

Feature Design

Personas

PERSONAS ampSCENARIOSAdvanced Barbies for Design Excellence

ldquoA persona is a userarchetype you can use to help guide decisionsabout product featuresnavigation interactions and even visual designrdquo- Kim Goodwin Cooper

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 4: Interaction Design with Personas and Scenarios

User Research

Scenarios

Task Analysis

Use Cases

Feature Design

Personas

PERSONAS ampSCENARIOSAdvanced Barbies for Design Excellence

ldquoA persona is a userarchetype you can use to help guide decisionsabout product featuresnavigation interactions and even visual designrdquo- Kim Goodwin Cooper

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 5: Interaction Design with Personas and Scenarios

PERSONAS ampSCENARIOSAdvanced Barbies for Design Excellence

ldquoA persona is a userarchetype you can use to help guide decisionsabout product featuresnavigation interactions and even visual designrdquo- Kim Goodwin Cooper

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 6: Interaction Design with Personas and Scenarios

ldquoA persona is a userarchetype you can use to help guide decisionsabout product featuresnavigation interactions and even visual designrdquo- Kim Goodwin Cooper

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 7: Interaction Design with Personas and Scenarios

Personas bring users into focus

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 8: Interaction Design with Personas and Scenarios

WHY DO WE HAVE THEM

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 9: Interaction Design with Personas and Scenarios

The average user doesnrsquot existWe canrsquot design for everyone

But maybe we can get it right for the right people

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 10: Interaction Design with Personas and Scenarios

YOU ARE NOT THE USERBut you can play one on TV

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 11: Interaction Design with Personas and Scenarios

Empathy amp Insight

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 12: Interaction Design with Personas and Scenarios

To remember all that research

MNEMONIC

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 13: Interaction Design with Personas and Scenarios

Personas are arepresentative behaviorand activity profile for acustomer base

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 14: Interaction Design with Personas and Scenarios

Personas

From CarbonIQ circa 2000

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 15: Interaction Design with Personas and Scenarios

FOR EXAMPLE

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 16: Interaction Design with Personas and Scenarios

Grace (62 female widowed Little Rock AR)ldquoI like playing my favorite games online but if I can play with friends well thatrsquos even betterrdquo 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 doesnrsquot like using it Doesnrsquot know what an OS is Tends to click yes if the browser prompts her to do anything and will click wildly until things workHistory with Shockwave andor AtomFilms Plays crossword puzzles daily and saves them Plays card games PhotoJam but is offended by South Park cartoonsShockwaversquos 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)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 17: Interaction Design with Personas and Scenarios

Sarah (22 female single Washington DC)ldquoI like AtomFilms because itrsquos just about the filmsrdquo 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 ($35Kyr)History with Shockwave andor AtomFilms First came to AtomFilms because she did a search on Sundance content Shersquos heard about the merger with AtomFilms and is very worried about AtomFilms losing its edge or begin buried in the Shockwavecom site She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave Shockwaversquos 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)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 18: Interaction Design with Personas and Scenarios

Scott (17 male single Shaumburg IL)ldquoI want something cool and really on the edge Something you canrsquot get on TVrdquo2 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-imageHistory with Shockwave andor AtomFilms hersquos been to Shockwave a few times and usually clicks games as soon as the navigation bar loads He likes playing arcade games and ldquoshoot lsquoem uprsquosrdquo Spend two hours playing ldquoKing of the Hill paintballrdquo recentlyShockwaversquos opportunity he is already hanging out in the games section regularly If shockwave can introduce him to itrsquos sick and twisted material it can keep him on the website longer and use his tendency to send out links to spread the word

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 19: Interaction Design with Personas and Scenarios

How to createbull Summarize findings distribute to stakeholdersbull Hold a work session with stakeholders amp development team to brainstorm personas

bull Prioritize and cull lesser personas to develop primary and supporting personas

Persona development

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 20: Interaction Design with Personas and Scenarios

Sort your findings

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 21: Interaction Design with Personas and Scenarios

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

5 MINUTES

Specific Each piece of information should be as precise as possible Throw out information like ldquoUsers like it to be easyrdquo and keep information like ldquoUsers need to be able to complete a process in half an hourrdquo

Relevant Relevant to your product not to every site on the Web Donrsquot report ldquoUsers like free stuffrdquo but include ldquoMany users request free evaluation periods for software to know if paying will be worth itrdquo

Universal Find things that are true for the entire site not for a single item on a single page Weed out things like ldquoUsers couldnrsquot find the Submit button on thecheckout pagerdquo but leave in ldquoWe have a type of user who knows what he wants already and needs a way to speed through finding and buyingrdquo

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 22: Interaction Design with Personas and Scenarios

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

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 23: Interaction Design with Personas and Scenarios

Make pseudo-people

10 MINUTES GROUP TOGETHER LIKE

SHARE

Start adding depth to the personas

ENRICH

Frequency of Use

Weekly

Daily All the

time

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 24: Interaction Design with Personas and Scenarios

SHARE

Start adding depth to the personas

ENRICH

Frequency of Use

Weekly

Daily All the

time

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 25: Interaction Design with Personas and Scenarios

Start adding depth to the personas

ENRICH

Frequency of Use

Weekly

Daily All the

time

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 26: Interaction Design with Personas and Scenarios

Frequency of Use

Weekly

Daily All the

time

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 27: Interaction Design with Personas and Scenarios

Novice Expert

Computer and IT experience

Capability

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 28: Interaction Design with Personas and Scenarios

Examples

Eats lunch at

desk each dayEats

lunch with team

Eats out with

clients

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 29: Interaction Design with Personas and Scenarios

Examples

Family archivist

Avoids grandparents

New dad shares photos

daily

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 30: Interaction Design with Personas and Scenarios

Examples

Can find browser if pressedWrites own

SQL queries

Excel whiz

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 31: Interaction Design with Personas and Scenarios

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 32: Interaction Design with Personas and Scenarios

CREATE DETAILS

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 33: Interaction Design with Personas and Scenarios

[Personarsquos name][A tag line for the persona]About [Name]bull Who are theybull What is their backgroundbull What is their contextbull Whatrsquos important to thembull What are their pain points and

frustrations

Key goals amp needsbull Goals

bull Motivationsbull Driversbull Needs

A picture or photo of the

personaldquoA quote the persona

might sayrdquo

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 34: Interaction Design with Personas and Scenarios

They can be simple

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 35: Interaction Design with Personas and Scenarios

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

You can make them very fancy

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 36: Interaction Design with Personas and Scenarios

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 37: Interaction Design with Personas and Scenarios

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 38: Interaction Design with Personas and Scenarios

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 isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 39: Interaction Design with Personas and Scenarios

Have a made a dream user that isnrsquot common

ARE THEY TOO USEFUL

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 40: Interaction Design with Personas and Scenarios

ROLE PLAY

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 41: Interaction Design with Personas and Scenarios

REFINE FURTHER

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 42: Interaction Design with Personas and Scenarios

Prioritize personas

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 43: Interaction Design with Personas and Scenarios

To assure that design decisions dont becomegeneric in the face of too many audiences To allow for prioritization of research efforts to Create another filter by which feature levelprioritization can occur

Prioritization of Personas is essential

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 44: Interaction Design with Personas and Scenarios

primary

secondary

special

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 45: Interaction Design with Personas and Scenarios

primary

secondary

special

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 46: Interaction Design with Personas and Scenarios

Names Matter

Think of your persona as a brand

People are more likely to remember a memorable name

egPhoebe the photographer

Stuart the studentEnrique the engineerThink memorable but

believable

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 47: Interaction Design with Personas and Scenarios

TobyThe Cambridge new comerAbout Toby (28)bull Currently lives in Cambridge with his girlfriendbull Moved to Cambridge from London 6 months agobull Is an English amp drama teacher at a Cambridge high

schoolbull Is keen on making some new friends in Cambridge bull Uses the Internet most days and will use email

and Facebook to keep in touch with friends

Key goals amp needsbull To know where places arebull To find out what is going

on locallybull To make new fiends

ldquoI use the Internet for everythingrdquo

Photos of real people

From An introduction to personas for technical authors by Neil Turner httpwwwslidesharenetneiljamesturneran-introduction-to-personas-for-technical-authors

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 48: Interaction Design with Personas and Scenarios

Choose thoughtfully

A person photo should beA good sizeA head shot

Natural not too stagedRoyalty free

Some good websites for finding photos are

FlickrStockxchng

FotoliaGoogle images

Bad watermark staged and hersquos kinda slimey

Good real person and easy to like and want to help

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 49: Interaction Design with Personas and Scenarios

EXERCISE ADD DETAIL

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 50: Interaction Design with Personas and Scenarios

TIPS AND TRICKS

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 51: Interaction Design with Personas and Scenarios

Keep Alive

Irsquom worried about Sandy Can she use

the profile

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 52: Interaction Design with Personas and Scenarios

Omit needless words

Only include information that is important when it comes to

designing for that personThrow away any superfluous

information (unless of course it impacts the design) eg

Their favourite filmWhat car they drive

Who their best friend is

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 53: Interaction Design with Personas and Scenarios

Donrsquot reinvent for every project

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 54: Interaction Design with Personas and Scenarios

Keep them near

bull Hang them on your wallbull Make poster placemats puppetsbull Role-play personasbull Evaluate with them

Use personas

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 55: Interaction Design with Personas and Scenarios

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 56: Interaction Design with Personas and Scenarios

From Todd Warfelrsquos Persona Talk httpwwwslidesharenettoddwarfeldata-driven-personas

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 57: Interaction Design with Personas and Scenarios

THE PROBLEM WITH PERSONAS

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 58: Interaction Design with Personas and Scenarios

Irsquove never been a big believer in personas

Theyrsquore artificial abstract and fictitious I donrsquot think you can build a great product

for a person that doesnrsquot exist And I

definitely donrsquot 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 donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 59: Interaction Design with Personas and Scenarios

Personas donrsquot talk back Personas canrsquot answer questions Personas donrsquot have opinions Personas canrsquot tell you when something just doesnrsquot feel right Personas canrsquot tell you when a sentence doesnrsquot make sense Personas donrsquot get frustrated Personas arenrsquot pressed for time Personas arenrsquot moody Personas canrsquot click things Personas canrsquot make mistakes Personas canrsquot make value judgments Personas donrsquot use products Personas arenrsquot real

Personas Donrsquot

ldquo

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 60: Interaction Design with Personas and Scenarios

SCENAROS

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 61: Interaction Design with Personas and Scenarios

User Research

Segments

Personas

Task Analysis

Use Cases

Feature Design

Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 62: Interaction Design with Personas and Scenarios

Pick a personaWhat is thatrsquos 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 lifersquos hurdles areovercome with your product

No buttons no errors No design yet

A software that works

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 63: Interaction Design with Personas and Scenarios

65Steve Mulderrsquos Advice

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

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 64: Interaction Design with Personas and Scenarios

Add business constraints in

Keep the story as positive as possible

Add in log inregistration

Add in check out

Bring business and the user goals together

Resolve tensions

66

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 65: Interaction Design with Personas and Scenarios

From Steve Mulderrsquos The User is Always right httpwwwslidesharenetMulderMediathe-user-is-always-right-making-personas-work-for-your-site

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 66: Interaction Design with Personas and Scenarios

ADJUST FOR FREQUENCY

68

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 67: Interaction Design with Personas and Scenarios

Daily-Use Scenarios

Usually only 2-3 of these

Clear training quickly removed

Shortcuts amp power tools

Customization

Tell the story of the 300th use as well as the

1st

NOT ALL APPS HAVE DAILY USE

69

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 68: Interaction Design with Personas and Scenarios

Infrequent Common Scenarios

Users do it only once in a while

Many users do it ndash core to business

Expected to ldquojust workrdquo

Users unlikely to pay close attention

Needs excellent unobtrusive help

Will be taught each use

70

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 69: Interaction Design with Personas and Scenarios

Necessary-Use Scenarios

Must be done but arenrsquot done often

User needs to get right be comfortable it

worksChanging printer cartridges clearing memory fighting a virus visiting a potentially infected website deleting a lot of files

Must have good helppedagogy

Must have excellent error handling

No need for customization or shortcuts

71

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 70: Interaction Design with Personas and Scenarios

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)

72

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 71: Interaction Design with Personas and Scenarios

73

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 72: Interaction Design with Personas and Scenarios

74

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 73: Interaction Design with Personas and Scenarios

Exercise Revise your scenarios Add new ones

Daily Common Infrequent

75

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 74: Interaction Design with Personas and Scenarios

COMMUNICATING SCENARIOS

76

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 75: Interaction Design with Personas and Scenarios

77

When Stan is out of the office and working at a clientrsquos location the last thing he feels like doing at the end of a long day is entering his hours into his companyrsquos time tracking tool So he usually puts this off until Friday and then grimaces to himself at 600 as he launches the VPN tool logs in and then points his Web browser to the intranet home page Fortunately therersquos a link to the time tracking tool right on the home page along with other commonly used toolsOnce in the time tracking tool hersquos 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 hersquos 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 SubmitAfter the confirmation message appears the Web browser redirects Stan to the intranet home page where he immediately notices that yesterdayrsquos company presentation is now available He missed the meeting so he quickly downloads the presentation to look at while hersquos on the flight home tomorrow While itrsquos 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 20 means to the business He canrsquot 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

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 76: Interaction Design with Personas and Scenarios

78Storyboards

Kim Goodwin Designing for the

digital age

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 77: Interaction Design with Personas and Scenarios

79Comics

Kevin Change See What I Mean

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 78: Interaction Design with Personas and Scenarios

81

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 79: Interaction Design with Personas and Scenarios

Emotion matters but it isnrsquot hard to communicate

(from Kevin Chengrsquos See What I Mean)

82

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 80: Interaction Design with Personas and Scenarios

You can show time passinghellip

(from Kevin Chengrsquos See What I Mean)

83

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 81: Interaction Design with Personas and Scenarios

84Canrsquot draw

Stick figuresPhotosClipart

Philgregtv Boxesandarrowscomt Kevin Change See What I Mean

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 82: Interaction Design with Personas and Scenarios

85Regardless of how you present them what you want to leave with is a clear idea of what requirements and features you have

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 83: Interaction Design with Personas and Scenarios

TASK ANALYSIS amp USE CASES

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 84: Interaction Design with Personas and Scenarios

User Research

Segments

Personas

Scenarios

Use Cases

Feature Design

Task Analysis

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 85: Interaction Design with Personas and Scenarios

Task analysis

Can be used to Understand current behavior

Optimize current behavior

Design for new behavior

In Designing youBreak down a story into discrete tasks

Identify branching decision points

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 86: Interaction Design with Personas and Scenarios

Task Analysis during

Research

Why the user is performing the task (that is the underlying goal) Frequency and importance of the task Cues mdash what initiates or prompts the execution of the task Dependencies mdash what must be in place to perform the task as well as what isdependent 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 mdash errors and exception cases How errors and exceptions are corrected

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 87: Interaction Design with Personas and Scenarios

From a McDonaldrsquos patent application on sandwich making

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 88: Interaction Design with Personas and Scenarios

TASK ANALYSISHow to Design

93

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 89: Interaction Design with Personas and Scenarios

Persona Michael

Scenario Picking films to see

From Information Architecture Blueprints for the Web by Christina Wodtke

Festival Planner asks Michael if hersquos interested in any particular directors or actors Michael indicates people he thinks have promise He notices some names he doesnrsquot 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 hersquos put in a bit of effort at this point Hersquos pleased it didnrsquot 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 hersquos interested in any particular genre of film and if hersquos traveling for business pleasure or both The Planner asks him if hersquos interested only in films that havenrsquot been signed to a distributor or if hersquos interested in all films He indicates that hersquos interested only in unsigned films Finally Festival Planner asks him if hersquos 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 ldquosee all for this time slotrdquo One film for each time slot is indicated as his ldquobest pickrdquo Each shows how well it meets his taste and needs Or he can choose to ldquorestrdquo 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 itrsquos availablemdashhersquos very excited by that If he canrsquot see them all at least he can get a sense of what hersquos missing

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 90: Interaction Design with Personas and Scenarios

HIGHLIGHT YOUR VERBS

95

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 91: Interaction Design with Personas and Scenarios

Goal Michael wants to quickly

set up a schedule for Sundance

1 Understand how it works2 Choose films of interest3 Select film state of availability (signed unsigned)4 Select film scheduling (dovetail or overlap)5 View recommendation6 Select films of choice7 Sign up for reports8 Save work (available in previous steps)9 Email schedule

96

From Information Architecture Blueprints for the Web by Christina Wodtke

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 92: Interaction Design with Personas and Scenarios

PULL OUT THE STEPS

97

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 93: Interaction Design with Personas and Scenarios

Goal Michael wants to quickly

set up a schedule for Sundance

Next Break down into subtasks2 Choose films of interest

a Select directors of interestb Select actors of interestc Select genres of interest

98

From Information Architecture Blueprints for the Web by Christina Wodtke

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 94: Interaction Design with Personas and Scenarios

FIND SUBTASKS

99

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 95: Interaction Design with Personas and Scenarios

Goal Michael wants to quickly

set up a schedule for Sundance 100

From Information Architecture Blueprints for the Web by Christina Wodtke

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 96: Interaction Design with Personas and Scenarios

TRY A SKETCH

101

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 97: Interaction Design with Personas and Scenarios

Visual VocabularyA simple useful set of shapes to communicate interaction and hierarchy used for both flows and sitemaps

102

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 98: Interaction Design with Personas and Scenarios

From Jesse James

Garrettrsquos Reverse

engineered Yahoo

Mail

103

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 99: Interaction Design with Personas and Scenarios

104

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 100: Interaction Design with Personas and Scenarios

REVERSE ENGINEER A COMPETITORExercise

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 101: Interaction Design with Personas and Scenarios

User Research

Segments

Personas

Scenarios

Task Analysis

Feature Design

Use Cases

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 102: Interaction Design with Personas and Scenarios

Use cases

A use case from our task analysis

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 managershellip 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 sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 103: Interaction Design with Personas and Scenarios

First name all your use cases (or user stories or scenarios)(you can get these from your sitepathsystem diagram or AOF)

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 104: Interaction Design with Personas and Scenarios

Example Log in Use CaseLoginBrief DescriptionThis use case describes how a user logs into the Course Registration SystemBasic FlowThis use case starts when an actor wishes to log into the Course Registration SystemThe system requests that the actor enter hisher name and passwordThe actor enters hisher name and passwordThe system validates the entered name and password and logs the actor into the systemAlternative FlowsInvalid Name Password If in the Basic Flow the actor enters an invalid name andor 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 endsPre-ConditionsNonePost-ConditionsIf 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 ldquoalternaterdquo

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 105: Interaction Design with Personas and Scenarios

User SystemUser inserts card Requests PINUser enters Pin Displays choices

1 Get balance2 Withdraw money3 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 lt balance asks for confirmation

I prefer the two column approach with user on one side system on the other Note I do not say ldquopushes buttonrdquo or the like anywhere save interface design for late just focus on interaction

Break it

down

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 106: Interaction Design with Personas and Scenarios

And User StoriesbullStudents can purchase monthly parking passes onlinebullParking passes can be paid via credit cardsbullParking passes can be paid via PayPal tradebullProfessors can input student marksbullStudents can obtain their current seminar schedulebullStudents can order official transcriptsbullStudents can only enroll in seminars for which they

have prerequisitesbullTranscripts will be available online via a standard

browser

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

Example user stories

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 107: Interaction Design with Personas and Scenarios

Can task analysis and use cases limitIf 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

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 108: Interaction Design with Personas and Scenarios

Design a way to enjoy flowers

But if I ask you to think of a way to enjoy plants and

flowers

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 109: Interaction Design with Personas and Scenarios

PRINCIPLESAnd laws and guidelines

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 110: Interaction Design with Personas and Scenarios

SOME LAWS

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 111: Interaction Design with Personas and Scenarios

Fittsrsquos LawFittsrsquos 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 Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 112: Interaction Design with Personas and Scenarios

The Magical Number Seven +- 1

Is a myth

Law of the Conservation of Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 113: Interaction Design with Personas and Scenarios

Law of the Conservation of Complexitystates that some complexity is inherent in every process There is a point beyond which you canrsquot simplify the process any further you can only move the inherent complexity from one place to anotherLarry Tesler

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 114: Interaction Design with Personas and Scenarios

Universal Principles

Direct ManipulationAffordancesFeedbackMental ModelStandardsPoka-yoke

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 115: Interaction Design with Personas and Scenarios

Direct Manipulation

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 116: Interaction Design with Personas and Scenarios

Affordances

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 117: Interaction Design with Personas and Scenarios

Feedback

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 118: Interaction Design with Personas and Scenarios

Feedback

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 119: Interaction Design with Personas and Scenarios

Feedback

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 120: Interaction Design with Personas and Scenarios

DiscussDo you need a message Is it enough it always shows What if technology doesnrsquot 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 Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 121: Interaction Design with Personas and Scenarios

Inline feedback vs validation Luke Wrobowskihttpalistapartcomarticleinline-validation-in-web-forms

Traditional Inline

>
>

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 122: Interaction Design with Personas and Scenarios

Feedback MattersInline feedback gave bull a 22 increase in success ratesbull a 22 decrease in errors madebull a 31 increase in satisfaction

ratingbull a 42 decrease in completion

times andbull a 47 decrease in the number of

eye fixations

ldquoYoursquod rather know about your mistakes as you go alongrdquoldquoItrsquos much better than getting all the way down and hitting lsquosubmitrsquo only to find out that it doesnrsquot like your username Itrsquos much better when it tells you as you go alongrdquo

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01 2009

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 123: Interaction Design with Personas and Scenarios

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

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 124: Interaction Design with Personas and Scenarios

ErrorsPreventAllow fixesCOMPASSIONAvoid learned Dismissal

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 125: Interaction Design with Personas and Scenarios

Standards

Obey standards unless there is a truly superior alternative - Alan Cooper

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 126: Interaction Design with Personas and Scenarios

Contextual Principles

What you know about the contextusersactivity Eg 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 TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 127: Interaction Design with Personas and Scenarios

Tivo TennantsItrsquos entertainment stupidItrsquos TV stupidItrsquos video dammitEverything is smooth and gentleNo modality or deep hierarchyRespect the viewerrsquos privacyItrsquos a robust appliance like a TV

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 128: Interaction Design with Personas and Scenarios

WHAT ARE YOUR LAWS

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137
Page 129: Interaction Design with Personas and Scenarios

137QampA

HEADER

  • Slide 1
  • Interaction Design is the creation of a dialogue between a pers
  • Slide 3
  • Slide 4
  • Slide 5
  • Personas amp Scenarios
  • Slide 7
  • Slide 8
  • Why do we have them
  • The average user doesnrsquot exist
  • You are not the User
  • Empathy amp Insight
  • mnemonic
  • Personas are a representative behavior and activity profile for
  • Personas
  • For example
  • Slide 17
  • Grace
  • Sarah
  • Scott
  • Persona development
  • Sort your findings
  • 5 minutes
  • 1 minute
  • 10 minutes group together like
  • Share
  • Enrich
  • Frequency of Use
  • Capability
  • Examples
  • Examples (2)
  • Examples (3)
  • Slide 33
  • Create details
  • Slide 35
  • They can be simple
  • You can make them very fancy
  • Sanity Check
  • Are They Real
  • Are they Useful
  • Are they Too useful
  • Role Play
  • Refine further
  • Prioritize personas
  • Prioritization of Personas is essential
  • Slide 46
  • Slide 47
  • Names Matter
  • Photos of real people
  • Choose thoughtfully
  • Exercise add detail
  • Tips and tricks
  • Keep Alive
  • Omit needless words
  • Donrsquot reinvent for every project
  • Use personas
  • Slide 57
  • Slide 58
  • The problem with personas
  • Slide 60
  • Personas Donrsquot
  • SCENAROS
  • Slide 63
  • Pick a persona
  • Steve Mulderrsquos Advice
  • Add business constraints in
  • Slide 67
  • Adjust for frequency
  • Daily-Use Scenarios
  • Infrequent Common Scenarios
  • Necessary-Use Scenarios
  • Edge-Case Scenario
  • Slide 73
  • Slide 74
  • Exercise Revise your scenarios Add new ones
  • Communicating Scenarios
  • Slide 77
  • Storyboards
  • Comics
  • Slide 81
  • Slide 82
  • Slide 83
  • Slide 84
  • Slide 85
  • Task Analysis amp Use Cases
  • Slide 88
  • Slide 89
  • Task Analysis during Research
  • Slide 91
  • Slide 92
  • Task Analysis
  • Slide 94
  • Highlight youR verbs
  • Goal Michael wants to quickly set up a schedule for Sundance
  • Pull out the steps
  • Goal Michael wants to quickly set up a schedule for Sundance (2)
  • Find subtasks
  • Goal Michael wants to quickly set up a schedule for Sundance (3)
  • Try a sketch
  • Visual Vocabulary
  • From Jesse James Garrettrsquos Reverse engineered Yahoo Mail
  • Slide 104
  • Reverse Engineer a Competitor
  • Slide 106
  • Use cases
  • First name all your use cases (or user stories or scenarios)
  • Example Log in Use Case
  • Slide 110
  • And User Stories
  • Can task analysis and use cases limit
  • Design a way to enjoy flowers
  • Principles
  • Some Laws
  • Fittsrsquos Law
  • The Magical Number Seven +- 1
  • Law of the Conservation of Complexity
  • Universal Principles
  • Direct Manipulation
  • Affordances
  • Feedback
  • Feedback (2)
  • Feedback (3)
  • Discuss
  • Inline feedback vs validation Luke Wrobowski httpalistapart
  • Feedback Matters
  • The Poka-Yoke Principle
  • Errors
  • Standards
  • Contextual Principles
  • Tivo Tennants
  • What are your laws
  • Slide 137