CPSC 481 - WEEK #2Sowmya Somanath

ssomanat@ucalgary.ca(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• ssomanat@ucalgary.ca• 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