Cognitive Walkthrough: A Method for Evaluating Interface Design, Lecture notes of Computer Graphics and Animation

Download Cognitive Walkthrough: A Method for Evaluating Interface Design and more Lecture notes Computer Graphics and Animation in PDF only on Docsity!

Cognitive walkthrough:

description and example

Based on TaskCentered Design by

Clayon Lewis & John Rieman, CU Boulder

TaskCentered Design

Task-centered design focuses on REAL,

COMPLETE, REPRESENTATIVE tasks.

Traditional requirements analysis looks at

ABSTRACT, PARTIAL task elements.

How to evaluate a design without users? One

approach is a cognitive walkthrough.

What’s it good for?

Question assumptions about what the users will

be thinking

Identify controls that may be missing or hard to

find

Note inadequate feedback

Suggest difficulties with labels and prompts

The Vocabulary Problem

Vocabulary Problem

On a piece of paper write the name you would

give to a program that tells about interesting

activities occurring in some major

metropolitan area (e.g., this program would

tell you what is interesting to do on Friday or

Saturday night). Make the name 10 characters

or less

Cognitive Walkthrough Purpose

Focus most clearly on problems that users will

have when they first use an interface, without

training

Not a technique for evaluating the system

over time (e.g., how quickly a user moves

from beginner to intermediate)

Most effective if designers can really create a

mental picture of the actual environment of

use

How to do it

Prior to doing a walkthrough, you need four things:

1. You need a description of a prototype of the

interface. It doesn't have to be complete, but it

should be fairly detailed. Things like exactly what

words are in a menu can make a big difference.

2. You need a task description (for a representative

task).

3. You need a complete, written list of the actions

needed to complete the task.

4. You need an idea of who the users will be and

what kind of experience they'll bring to the job.

Goal: Create UML diagram in DIA

Want to create a simple UML diagram:

Representative Task

Steps

1. Put in UML mode

2. Add parent class (Student)

A. Select class tool

B. Draw class onto canvas by clicking

C. Change class name

3. Add name as private String

A. Bring up dialog, click on Attribute tab

B. Click New

C. Enter name

D. Change visibility to Private

E. Click OK

Steps, continued

5. Add CSMajor and MathMajor as children

A. Create CSMajor and MathMajor classes, as above

B. Line them up on the canvas

C. Select Generalization tool

D. Drag mouse from parent class to one child

E. Use Zigzagline to connect to second child

Step 1: UML mode

Screen comes up in database mode

I’m thinking: I want to create a UML diagram

Action:

I see a lot of symbols that aren’t UML.

I look through the menus, don’t see UML.

Finally notice drop down with Database. I try

it. Now I see UML.

Recommendation:

Highlight the drop down. It could be moved

up, but those tools don’t change. So it makes

sense where it is, but it’s mid-screen, hard to

notice.

Also, add a Diagram Type option to one of the

menus, maybe Select.

Step 2: Add parent class (Student)

Step 2B: Draw class onto canvas by clicking

Now I’ve selected the class tool

I’m thinking: OK, now I want to add

Student to my diagram. Do I click or

drag?

Action:

I click on the canvas.

Class is added, with name Class.

Recommend:

This seems clear, no

recommendation

Step 2: Add parent class (Student)

Step 2C: Change class name

Now I’ve added the class to my drawing

I’m thinking: I want to change

the name to Student.

Action:

I double-click where it says

Class.

Dialog comes up.

First text field is Class name. I

enter Student. Press OK.

Class name is changed to

Student.

Recommend:

This seems clear, no

recommendation

Step 3: Add name as private String

Steps 3B:Click New

Now I’m at the correct dialog

I’m thinking: I want to type in the

variable info.

Action:

I try to type in Name: field, but it’s

grayed out.

I consider just typing into the big text

box, but that doesn’t seem right.

I notice New, figure that’s what I

need.

Click it, I’m able to enter a Name and

Press OK.

Recommend:

We read right-to-left. I would

probably put buttons on left side of

text area. Maybe put default text

such as “No attributes defined” in the

Step 3: Add name as private String

Steps 3B:Change visibility to Private

Now my attribute is listed, but it has a +

I’m thinking: I missed something.

Action:

I bring dialog back up

Click on name

I quickly notice Visibility, change

to Private

Recommend:

I would default to Private (that’s

normally recommended except for

constants)

I would move Visibility higher in

list, after Type or Value