Top Banner
SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004
38

SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Dec 21, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

SIMS 213: User Interface Design & Development

Marti HearstTues, April 6, 2004

Page 2: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Today

Evaluation based on Cognitive ModelingComparing Evaluation Methods

Page 3: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Another Kind of Evaluation

Evaluation based on Cognitive Modeling Fitts’ Law

Used to predict a user’s time to select a target

Keystroke-Level Model low-level description of what users would

have to do to perform a task. GOMS

structured, multi-level description of what users would have to do to perform a task

Page 4: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Melody Ivory

GOMS at a glance

Proposed by Card, Moran & Newell in 1983– Apply psychology to CS

• employ user model (MHP) to predict performance of tasks in UI

– task completion time, short-term memory requirements

– Applicable to • user interface design and evaluation• training and documentation

– Example of• automating usability assessment

Page 5: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Melody Ivory

Model Human Processor (MHP)

Card, Moran & Newell (1983)– most influential model of user interaction

• used in GOMS analysis– 3 interacting subsystems

• cognitive, perceptual & motor• each with processor & memory

– described by parameters» e.g., capacity, cycle time

• serial & parallel processing

Adapted from slide by Dan Glaser

Page 6: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Melody Ivory

Original GOMS (CMN-GOMS)

Card, Moran & Newell (1983)Engineering model of user interaction

• Goals - user’s intentions (tasks)– e.g., delete a file, edit text, assist a customer

• Operators - actions to complete task– cognitive, perceptual & motor (MHP)– low-level (e.g., move the mouse to menu)

Page 7: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Melody Ivory

CMN-GOMS

Engineering model of user interaction (continued)• Methods - sequences of actions (operators)

– based on error-free expert– may be multiple methods for accomplishing same goal

» e.g., shortcut key or menu selection

• Selections - rules for choosing appropriate method– method predicted based on context

– hierarchy of goals & sub-goals

Page 8: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Keystroke-Level Model

Simpler than CMN-GOMSModel was developed to predict time to accomplish a task on a computerPredicts expert error-free task-completion time with the following inputs:– a task or series of subtasks– method used– command language of the system– motor-skill parameters of the user– response-time parameters of the system

Prediction is the sum of the subtask times and overhead

Page 9: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

KLM-GOMS

Keystroke level model

1. Predict

(What Raskin refers to as GOMS)

Action 1

Action 2

Action 3

x sec.

y sec.

z sec.+

t sec.

2. Evaluate

Time usinginterface 1 Time using

interface 2

Page 10: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Symbols and values

KBPHD

MR

Press KeyMouse Button PressPoint with MouseHome hand to and from keyboardDrawing - domain dependent

Mentally prepareResponse from system - measure

0.2.10/.201.10.4-

1.35-

Operator Remarks Time (s)

Raskin excludes

Assumption: expert user

Page 11: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Raskin’s rules

KBPHD

MR

0.2.10/.201.10.4-

1.35-

Rule 0: Initial insertion of candidate M’s

Rule 1: Deletion of anticipated M’s

M before KM before P iff P selects command

If an operator following an M is fully anticipated, delete that M.

i.e. not when P points to arguments

e.g. when you point and click

Page 12: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Raskin’s rules

KBPHD

MR

0.2.10/.201.10.4-

1.35-

Rule 2: Deletion of M’s within cognitive units

Rule 3: Deletion of M’s before consecutive terminators

If a string of MK’s belongs to a cognitive unit, delete all M’s but the first.

If a K is a redundant delimiter, delete the M before it.

e.g. 4564.23

e.g. )’

Page 13: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Raskin’s rules

KBPHD

MR

0.2.10/.201.10.4-

1.35-

Rule 4: Deletion of M’s that are terminators of commands

Rule 5: Deletion of overlapped M’s

If K is a delimiter that follows a constant string, delete the M in front of it.

Do not count any M that overlaps an R.

Page 14: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Example 1

KBPHD

MR

0.2.10/.201.10.4-

1.35-

Temperature Converter

Choose which conversion is desired, then type the temperature and press Enter.

Convert F to C.Convert C to F.

HPBHKKKKK

HMPMBHMKMKMKMKMK

HMPBHMKKKKMK

Apply Rule 0

Apply Rules 1 and 2

Convert to numbers

.4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2

=7.15

Page 15: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Example 1

KBPHD

MR

0.2.10/.201.10.4-

1.35-

Temperature Converter

Choose which conversion is desired, then type the temperature and press Enter.

Convert F to C.Convert C to F.

HPBHKKKKK

HMPMBHMKMKMKMKMK

HMPBHMKKKKMK

Apply Rule 0

Apply Rules 1 and 2

Convert to numbers

.4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2

=7.15

Page 16: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Example 2

GUI temperature interfaceAssume a button for compressing scaleEnds up being much slower– 16.8 seconds/avg prediction

Page 17: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Using KLM and Information Theory to Design More Efficient Interfaces (Raskin)

Armed with knowledge of the minimum information the user has to specify:– Assume inputting 4 digits on average– One more keystroke for C vs. F– Another keystroke for Enter

Can we design a more efficient interface?

Page 18: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Using KLM to Make More Efficient Interfaces

First Alternative:

To convert temperatures, Type in the numeric temperature,Followed by C for Celcius or

F for Fahrenheit. The converted Temperature will be displayed.

MKKKKMK = 3.7 sec

Page 19: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Using KLM to Make More Efficient Interfaces

Second Alternative: – Translates to both simultaneously

MKKKK = 2.15 sec

C

F

Page 20: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Melody Ivory

GOMS in Practice

Mouse-driven text editor (KLM)CAD system (KLM)Television control system (NGOMSL)Minimalist documentation (NGOMSL)Telephone assistance operator workstation (CMP-GOMS)– saved about $2 million a year

Page 21: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Drawbacks

Assumes an expert userAssumes an error-free usageOverall, very idealized

Page 22: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Fitts’ Law

Models movement time for selection tasks

The movement time for a well-rehearsed selection task • increases as the distance to the target increases• decreases as the size of the target increases

Page 23: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Newstetter & Martin, Georgia Tech

Fitts’ Law

Time (in msec) = a + b log2(D/S+1)where a, b = constants (empirically derived) D = distance S = size

ID is Index of Difficulty = log2(D/S+1)

Page 24: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

Fitts’ Law

Same ID → Same Difficulty

Target 1 Target 2

Time = a + b log2(D/S+1)

Page 25: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

Fitts’ Law

Smaller ID → Easier

Target 2Target 1

Time = a + b log2(D/S+1)

Page 26: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

Fitts’ Law

Larger ID → Harder

Target 2Target 1

Time = a + b log2(D/S+1)

Page 27: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

Determining Constants for Fitts’ Law

To determine a and b design a set of tasks with varying values for D and S (conditions)

For each task condition – multiple trials conducted and the time to execute each is recorded and

stored electronically for statistical analysis

Accuracy is also recorded– either through the x-y coordinates of selection or – through the error rate — the percentage of trials selected with the cursor

outside the target

Page 28: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

A Quiz Designed to Give You Fitts

http://www.asktog.com/columns/022DesignedToGiveFitts.html

Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least one reason why labeled tools can be accessed faster. (Assume, for this, that the user knows the tool and does not need the label just simply to identify the tool.)

Page 29: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

A Quiz Designed to Give You Fitts

1. The label becomes part of the target. The target is therefore bigger. Bigger targets, all else being equal, can always be acccessed faster. Fitt's Law.

2. When labels are not used, the tool icons crowd together.

Page 30: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

A Quiz Designed to Give You Fitts

You have a palette of tools in a graphics application that consists of a matrix of 16x16-pixel icons laid out as a 2x8 array that lies along the left-hand edge of the screen. Without moving the array from the left-hand side of the screen or changing the size of the icons, what steps can you take to decrease the time necessary to access the average tool?

Page 31: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Slide adapted from Pourang Irani

A Quiz Designed to Give You Fitts

1. Change the array to 1X16, so all the tools lie along the edge of the screen.

2. Ensure that the user can click on the very first row of pixels along the edge of the screen to select a tool. There should be no buffer zone.

Page 32: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation Methods

Jeffries et al., 1991

Page 33: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation Methods

“User Interface Evaluation in the Real World: A Comparison of Four Techniques” (Jeffries et al., CHI 1991)

Compared:– Heuristic Evaluation (HE)

• 4 evaluators, 2 weeks time– Software Guidelines (SG)

• 3 software engineers, familiar with Unix– Cognitive Walkthrough (CW)

• 3 software engineers, familiar with Unix– Usability Testing (UT)

• Usability professional, 6 participants

The Interface:– HP-VUE, a GUI for Unix (beta version)

Page 34: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation MethodsJeffries et al., CHI ‘91

Page 35: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation MethodsJeffries et al., CHI ‘91

On a 9 point scaleHigher is more critical

Page 36: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation MethodsJeffries et al., CHI ‘91

Page 37: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation MethodsJeffries et al., CHI ‘91

Page 38: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004.

Comparing Evaluation MethodsJeffries et al., CHI ‘91

Conclusions:– HE is best from a cost/benefit analysis, but requires

access to several experienced designers– Usability testing second best – found recurring,

general, and critical errors but is expensive to conduct– Guideline-based evaluators missed a lot but did not

realize this• They were software engineers, not usability specialists

– Cognitive walkthrough process was tedious