CPSC 481 - Tutorial 2TCSD Example Part 2

(based on previous tutorials by Alice Thudt, Fateme Rajabiyazdi, David Ledo, Brennan Jones, Sowmya Somanath, and Kevin Ta)

Introduction

Contact Info• li26@ucalgary.ca

• Please always include [CPSC 481] in the subject header

• Expect replies in:

• 24 hours on weekdays

• 48 hours on weekends

• http://pages.cpsc.ucalgary.ca/~li26/481/

Today

• Presentation #1 of TCSC step 1 & 2

• Task-Centered System Design (TCSD) step 3 & 4

• Example

• Deliverables for next week

Presentations

Presentations• Max 7 mins!

• Looking for: • Strong presentation style • Clear background and environment information • Realistic users and their work contexts • Solid description of a well chosen (basic) user task • Requirements properly categorized

• Watch out for: • Poor justifications for choices • Missing important information • Poorly chosen and designed task

Presentation by Groups

Your turn !!

Prototype

Prototype

• Assignment #1 step 3: you will need to develop low fidelity prototypes

• Prototypes should fulfill the major requirements you have specified in step 2

Next Week Deliverables

• Presentation #2: max 15 mins

• 1 well evolved Lo-Fi prototype

• 1 walkthrough for the Lo-Fi prototype

Lo-Fi Prototype

• Quick and easy

• Can be rough!

• Do not make you committed to your designs

Lo-Fi Prototype (cont.)

1. Paper sketches

2. Pictive method

3. Storyboard method

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 Method

2. Pictive Method• Use poster boards and sticky notes to represent different layers of

your interface

• Draw various views of UI elements on different sticky notes

• pressed button, clicked button, etc.

• Stick them on the poster board during the demo to show how it responses under activities

3. Storyboard Method

3. Storyboard Method

• 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 same time

TCSD Steps 3 & 4

Scenarios

• Scenario != User-task !!

• A scenario is a step by step description of how a user 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 task into a scenario before performing the walkthrough evaluation

Walkthrough Algorithmselect one of the task scenarios; for (each user’s step / action in the task) {

try { build a believable story that motivates the user’s action; rely on user’s expected knowledge and training about the system;

} catch (exception) { 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

} }

TCSD Example Part 2 (Step 3 & 4)

Main Screen• Circulate: general circulate functions

• Patron Update: update patron information (expire data, personal info, etc.)

• Item Update: update info about holdings

• Utilities: other functions

• Quit

User Task

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-Help Books for Dummies> and asks that they be checked out. Marie doesn’t have her library card so Joan finds Maries 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.

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?

Summary• Librarian had to navigate too many screens to do this task

• The flow from start to end was overly complex • The librarian had to navigate and work with three screens to do a very

routine checkout task

• Some sub-dialogs were awkward • Why can’t she type the bar code directly on the screen, and see the

results immediately? • Why does she have to go to a separate screen to see the fines • Why does she have to sum the fines up herself?

• There are major concerns!

Deliverables

Design Portfolio

• For your project you should have about 5 ~ 7 user tasks

• For each user task create several Lo-Fi prototypes

• Select one prototype you like the most, and perform a walkthrough evaluation for each of the (5 ~ 7) tasks

Design Portfolio (cont.)• NO computer assisted prototypes

• Must be hand-drawn

• No interface builders

• Focus on key parts and general interaction not prettiness or completeness

• It’s an exploration of ideas that helps you recognize problems

• Does NOT have to be perfect!

Next Week• Choose one important user task example

• Create several Lo-Fi prototypes for that particular task

• Of the many you create select one prototype you like the most and present it

• For the chosen prototype and user task, perform a walkthrough

• Presentation #2

Presentation #2• Prototype

• Describe the most evolved prototype • But show at least 2 images of other prototypes you explored

• Walkthrough • Pick one prototype, convert your tasks to scenarios to preform

walkthrough evaluations • For each walkthrough, synthesize and summarize the problems,

successes, and major areas for improvement

Walkthrough Evaluation TableStep # Step Description Does the user have

knowledge to do this step?Are users motivated

in this step?Comments on

solutions for this step

1

2

3

…

Presentation #2 (cont.)• 15 mins

• Explain a single chosen (most evolved) prototype design

• Show some simple interactions with your interface (e.g. searching or information input)

• Walkthrough one important task

• Show what the interface will look like in each step

Presentation #2 (cont.)• 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

DeliverablesTCSD steps 1 2 3 4

task prototype walk-through

Presentation #2 1 1 + some pics 1

Portfolio 5 ~ 7 several, but select one for evaluation 5 ~ 7

Prototyping Tips• Start with MANY paper sketches to explore various ideas

• Use paper sketches to present you prototype iterations for assignment #1

• Use pictive method for walkthrough and tutorial presentation

• Use storyboard method for your portfolio writeup! I have to be able to understand it!

Prototyping Tips (cont.)One approach:

• Each of you design your own interface

• Meet and critique others’ designs

• Extract good (and bad) aspects of interfaces and combine them

• Analyze that prototype and built your “final” one based on improvements from the previous prototype

Prototyping Tips (cont.)• Multiple 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

• Convince me you’ve thought about different angles!

Prototyping Tips (cont.)

• Quantity: to explore various ideas

• Evolution: improve across iterations

Thank You