CPSC 481 - WEEK #2Sowmya Somanath
[email protected](based on previous tutorials by Alice Thudt, Fateme
Rajabiyazdi, and David Ledo)
About Me
• PhD student at the Interactions Lab• Supervised by Dr. Ehud Sharlin• DIY, Programmable Electronics, Maker Culture
Contact Me• [email protected]• Please include CPSC 481 in the subject
Tutorial Website• http://pages.cpsc.ucalgary.ca/~ssomanat/
CPSC481.htm
Plan for today
• Presentation of TCSD step 1 & 2
• TCSD step 3 & 4
• Deliverables for next week
Presentations
Presentations• 7 minutes!
• Looking for:• – Strong presentation style• – Clear background information• – Solid description of well chosen task(s)• – Requirements properly categorized
• Watch out for:• – Poor justifications for choices• – Missing (logically) important information• – Poorly chosen tasks
• Background information
• Expected users and their work contexts
• Concrete task examples
• List of requirements
TCSD Steps 1 & 2
Presentation by Groups
Your turn!!
Prototypes
Prototypes
• For step 3 of assignment 1 you will need to develop low fidelity prototypes.
• Your prototypes should fulfill the major requirements you have specified in step 2.
Next Week Deliverables
• 1 well evolved low-fi prototype
• 1 walkthrough for the well evolved low-fi prototype.
• 15 minutes presentation
Low-Fidelity Prototype
• Quick and easy: can be rough!
• Do not make you committed to your designs
Prototypes
Today we will discuss:
1. Paper Sketches2. Pictive method3. Storyboard method
1. Paper Sketches
1. Paper Sketches
1. Paper Sketches
• Define rough layout of the interface
• Simple and quick
• But each prototype should still contain the core screens that illustrate how the system will look as a whole
• Good for layout but limited as to what you can show
2. Pictive Methods
• Use poster boards and sticky notes to represent different layers of your interface:
– Draw various views of a button such as when it’s pressed, clicked, and etc. on different sticky notes and stick them on the poster board during the demo to show how it changes when pressed or clicked
2 transparencies
3. Storyboard Methods
Select “File”
Frames and Transitions
3. Storyboard Methods
• Good when no one is there to demonstrate
• You can use poster boards, flip pads or paper cutouts for representing a series of screens
• Hint: if you have a consistent background you can photocopy it to save some time
TCSD Steps 3 & 4
Scenarios
Scenario ≠ User-Task !!
• A scenario is a step by step description of how auser accomplishes the tasks using the prototype interface
Walkthroughs
• Walkthroughs are a way to evaluate the usability of your prototypes
• You are required to do a walkthrough evaluation for each of your task examples
• You need to first convert your tasks into scenarios before performing the walkthrough evaluation
Walkthrough Algorithm
• Select one of the task scenarios • For each of the user’s step/action in the task:
• Can you build a believable story that motivates the user’s actions?
• Can you rely on user’s expected knowledge and training about system?
• If you cannot: • You have located a problem in the interface • Note the problem and any comments or solutions
that come to mind • Once a problem is identified, assume it has been
repaired • Go to the next step in the task
TCSD Example - Part 2
Main Screen
generalcirculatefunctions
updateinformation
about apatron’s
expiry date,personal info
etc.
update infoabout
holdings
a place to putother
functions
Joan Hart, a regular and experienced library employee,is working behind the counter. Marie Smith, a regular
library customer brings three books to the counter<The Lions of Al Rassan, Ender’s Shadow, Self-HelpBooks for Dummies> and asks that they be checkedout. Marie doesn’t have her library card so Joan findsMaries library number, checks out the books for her
and reminds Marie that she has some late fines to pay.Marie says she will pay for them next time. Joan gives
Marie the books, and Marie leaves.
User Task
To find Marie’slibrary card, Joanmust navigate tosearch the screenby selecting patronsearch option
Why is patronsearch undercirculate?Menus should bebetter organized!
… then entersMary’s name andpresses searchbutton.
Why does thewhole name haveto be entered?Format?Possibly integratedynamic search?
The name was notspelled correctly, sothe system returnsthe closestmatches. Sheselects the rightone.
A lot of matches arereturned.
Checking out thebooks Librarianhas to selectcirculate and thencheck-out.
but this is tedious…
To manually checkout, select themenu item andtype in the number.
Not easy to find themenu item.Number format?
Verifying if thereturned book iscorrect.
What happens ifshe mistyped thenumber? She has torepeat the wholeprocess.
To check the finesshe has to navigateto a differentscreen.
The librarians mightnot be motivated todo it or forget thisstep.
She sees the fines,adds them up andreminds the patronof the outstandingamount.
Why does she haveto calculate in herhead? How are thefines cleared?
• Librarian had to navigate too many screens to do this task:
1. The flow from start to end was overly complex2. The librarian had to navigate and work with three screens
to do a very routine checkout task.
• Some sub-dialogs were awkward:3. Why can’t she type the bar code directly on the screen,
and see the results immediately?4. Why does she have to go to a separate screen to see the
fines, why does she have to sum the fines up herself?These are major concerns!
Summary
Next Week Deliverables
Deliverables for Next Week
1. Choose one important user task example.2. Create several low-fi prototypes for that user
task.3. Of the many you create select one prototype
you like the most and present that.4. For the chosen prototype and user task,
perform a walkthrough.
Deliverables for Portfolio
1. For your project you should have about 5-7 user tasks.
2. For each of those tasks create several low-fi prototypes.
3. Of the many you create select one prototype you like the most.
4. For the chosen prototype perform a walkthrough for each of the tasks (~5-7).
Deliverables for Next Week
1. Prototypes:
• Presentation: describe the most evolved prototype. • But show me atleast 2 images of other prototypes
you explored.
Deliverables for Next Week
NOTE about Prototypes:
• NO computer assisted prototypes• Must be hand-drawn• No interface builders• Focus on key parts and general interaction not
prettiness or completeness• It does not have to be perfect! It’s an exploration
of ideas that helps you recognize problems.
Deliverables for Next Week
2. Walkthroughs:
• For the 1 prototype design you pick, convert your tasks to scenarios to perform walkthrough evaluations (use the upcoming table for the assignment write up)
• For each walkthrough, synthesize and summarize the problems, successes, and major areas for improvement (this can be done in point form)
Table for Walkthrough Evaluation
Step # Step Description
Does the user have the
knowledge to do this step?
Are users motivated to do this step?
Comments on solutions for
this step
• 15 mins
• Explain your single chosen (most evolved) prototype design.
• Show some sample interactions with your interface (e.g. searching or entering information).
Presentations
• Explain the walkthrough for one important task.
• Show what the interface will look like at each step.
• Talk about whether the user has enough knowledge to perform the action at each step.
• Talk about whether the user is motivated to perform the action at each step (e.g. do I really want to scroll through 200 names).
• Comment on the user's action at each step (e.g. possible solutions to problems or why the interface works well here)
• Be honest with the critiques for your interface
Presentations
• Start with MANY paper sketches to explorevarious ideas
• Use paper sketches to present you prototypeiterations for assignment 1
• Use pictive method for walkthrough and tutorialpresentation
• Use storyboard method for your portfolio writeup!I have to be able to understand it!
Some Prototyping Tips
One example approach:
• Each of you design your own interface without discussing
• Meet and critique each others’ designs
• Extract good and bad aspects of each interface and combined them
• Analyze that prototype and built your “final” one based on improvements from the previous prototype.
Some Prototyping Tips
• Do several iterations!
• Explore various design ideas
• Critically evaluate each to decide which has the most potential.
• Think about which individual components of each design have potential.
• We want to see how you are improving from one prototype to the next: evaluate your iterations!
• Convince me you’ve thought about different angles!
Some Prototyping Tips
Important!
• Quantity: to explore various ideas
• Evolution: improve across iterations