Toolkit part 4 - A3 Posters: how to work with scenarios; filtering ideas; value chain; personas
Interaction Design with Personas and Scenarios
-
Upload
christina-wodtke -
Category
Design
-
view
5.368 -
download
3
description
Transcript of 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
[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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
From Jesse James
Garrettrsquos Reverse
engineered Yahoo
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-