Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst HFID Spring 2005

Midterm Review PacketStolen Borrowed from Prof. Marti Hearst

HFID Spring 2005

Affordances

The perceived properties of an object that determine how it can be used.– Knobs are for turning.– Buttons are for pushing.

Some affordances are obvious, some learned– Glass can be seen through.– Glass breaks easily.

Sometimes visual plus physical feedback– Floppy disk example

• Rectangular – can’t insert sideways• Tabs on the disk prevent the drive from letting it be fully inserted

backwards

Norman’s Affordances

Affordances:– Have perceived properties that may or may not exist– Have suggestions or clues about to how to use these

properties– Can be dependent on the

• Experience• Knowledge• Culture of the actor

– Can make an action easy or difficult

From McGrenere & Ho, Proc of Graphics Interfaces, 2000

Based on slide by Saul Greenberg

Affordances in Screen-Based Interfaces

In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances– Display screen, pointing device, selection buttons,

keyboard– These afford touching, pointing, looking, clicking on

every pixel of the display.


Affordances in Screen-Based Interfaces

Most of this affordance is not used– Example: if the display is not touch-sensitive, even

though the screen affords touching, touching has no effect.

– Example: • does a graphical object on the screen afford clicking?• yes, but the real question is does the user perceive this

affordance; does the user recognize that clicking on the icon is a meaningful, useful action?

Visual affordances of a scrollbar

Mappings

Mapping: – Relationships between two things

• Between controls and their results– Related to metaphor discussion– Related to affordances

Slide adapted from Saul Greenberg

Mapping controls to physical outcomes

backright

frontleft

backleft

frontright

24 possibilities, requires: -visible labels -memory

arbitrary full mapping

back front front back

2 possibilities per side =4 total possibilities

paired

Mappings

For devices, appliances– Natural mappings use constraints and correspondences in the

physical world• Controls on a stove• Controls on a car

– Radio volume» Knob goes left to right to control volume» Should also go in and out for front to rear speakers

For computer UI design– Mapping between controls and their actions on the computer

• Controls on a digital watch• Controls on a word processor program


Transfer Effects

People transfer their expectations from familiar objects to similar new ones– positive transfer: previous experience applies to new

situation– negative transfer: previous experience conflicts with

new situation


Cultural Associations

Groups of people learn idioms– red = danger, green = go

But these differ in different places– Light switches

• America: down is off• Britain: down is on

– Faucets• America: counter-clockwise is on• Britain: counter-clockwise is off

Gulf of Evaluation

The amount of effort a person must exert to interpret – the physical state of the system– how well the expectations and intentions have been

met

We want a small gulf!


Example

Scissors– affordances:

• holes for insertion of fingers• blades for cutting

– constraints• big hole for several fingers, small hole for thumb

– mapping• between holes and fingers suggested and constrained by appearance

– positive transfer• learnt when young

– conceptual model• implications clear of how the operating parts work


Bad Example

Digital Watch– affordances

• four push buttons, not clear what they do– contraints and mapping unknown

• no visible relation between buttons and the end-result of their actions– negative transfer

• little association with analog watches– cultural standards

• somewhat standardized functionality, but highly variable– conceptual model

• must be taught; not obvious

How to design a better one?


Bad Example

Digital Watch– affordances

• four push buttons, not clear what they do– contraints and mapping unknown

• no visible relation between buttons and the end-result of their actions– negative transfer

• little association with analog watches– cultural standards

• somewhat standardized functionality, but highly variable– conceptual model

• must be taught; not obvious

How to design a better one?

The Metaphor of Direct Manipulation

Direct Engagement– the feeling of working directly on the task

Direct Manipulation– An interface that behaves as though the interaction was with a real-world

object rather than with an abstract system

Central ideas– visibility of the objects of interest– rapid, reversible, incremental actions– manipulation by pointing and moving– immediate and continuous display of results

Almost always based on a metaphor– mapped onto some facet of the real world task semantics)


Object-Action vs Action-Object

Select object, then do action– interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)

Advantages– closer to real world– modeless interaction– actions always within context of object

• inappropriate ones can be hidden– generic commands

• the same type of action can be performed on the object• eg drag ‘n drop:

my.doc

move


Direct manipulation

Representation directly determines what can manipulated


Games


Is direct manipulation the way to go?

Some Disadvantages– Ill-suited for abstract operations

• Spell-checker?

• Search database by scrolling or by query?

Solution: Most systems combine direct manipulation and abstractions

• Word processor:– WYSIWYG document (direct manipulation)– buttons, menus, dialog boxes (abstractions, but direct manipulation “in

the small”)

Image from Newsweek, Jan 2001

Raskin on Cognition

Cognitive Conscious / Unconscious– Examples?

• What is the last letter in your first name?– You know it but weren’t consciously accessing this information a moment ago,

but now you are.• How do your shoes feel right now?• How did “The Shining” make you feel?• Having a name on the “tip of your tongue”

– Differences?• New situations/routines• Decisions / one standard choice• Sequential / simultaneous

Image from Newsweek, Jan 2001

Raskin on Cognition

Locus of Attention– What is it?

• An idea/object/event about which you are intently and actively thinking.• The one entity on which you are currently concentrating

– You see and hear much more– E.g., white noise

» Turn the lights off, you have a full-fidelity recording of their sound in your mind, which fades quickly

– Why locus?• Focus implies volition; locus not always under conscious control• Attention can be either active or “going with the flow”

– Why is it important for HCI?

Raskin on Cognition

Locus of Attention– Why is it important for HCI?

• Cannot be conscious of more than one task at a time• Make the task the locus of attention

– Don’t count on people to read labels or directions• Beware of the power of mental habits

– Repetitive confirmations don’t work• Take advantage of it

– Do pre-loading while user thinking about next step– Streamline resumption of interrupted tasks

Cooper on error dialog boxes

Why are they problematic?How related to locus of attention?What are the alternatives?– Cooper is talking to programmers

• “Silicon Sanctimony”• You should feel as guilty as for using a goto – an

admission of failure in design

What happens when you cancel a cancelled operation?

Do I have any choice in this?

Umm, thanks for the warning,but what should I do?

Uhhh… I give up on this one


“HIT ANY KEY TO CONTINUE”

Modes

What are they?– The same user actions have different effects in different

situations.– Examples:

• Adobe reader example: vs. • Powerpoint drawing example• Keycaps lock

Modes

When are they useful?Why can they be problematic?How can these problems be fixed?

Modes

When are they useful?– Temporarily restrict users actions– When logical and clearly visible and easily switchable

• Drawing with paintbrush vs. pencil• Autocorrect (if easy to switch the mode)

Why can they be problematic?– Big memory burden– Source of many serious errors

How can these problems be fixed?– Don’t use modes – redesign the system to be modeless– Redundantly visible– Raskin -- quasimodes

A Summary Statement

Raskin, p. 69– “We must make sure that every detail of an interface

matches both our cognitive capabilities and the demands of the task…”

Wireframing

What is the main idea?– Separate content from layout and display– Next week:

• Use the page layout to signal the flow of interaction• Group conceptually related items together

– Nielsen: • What does the layout communicate?• Test if a page of content becomes more usable because of the layout• A template (for a home page) should contain what items?

How WireFraming Fits In

Kelly Goto & Eric Ott of Macromedia

http://www.gotomedia.com/macromedia/monterey/architecture/

From http://www.gotomedia.com/macromedia/monterey/architecture/

Today

Evaluation based on Cognitive ModelingComparing Evaluation Methods

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

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


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


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)


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

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

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


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


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


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. )’


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.


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


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

Example 2

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

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?

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

Using KLM to Make More Efficient Interfaces

Second Alternative: – Translates to both simultaneously

MKKKK = 2.15 sec

C

F


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

Drawbacks

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


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


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)

Slide adapted from Pourang Irani

Fitts’ Law

Same ID → Same Difficulty

Target 1 Target 2

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


Fitts’ Law

Smaller ID → Easier

Target 2Target 1



Fitts’ Law

Larger ID → Harder

Target 2Target 1



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

Adapted from slide by James Landay

Formal Usability Studies

When useful– to determine time requirements for task completion– to compare two designs on measurable aspects

• time required• number of errors• effectiveness for achieving very specific tasks

Require Experiment Design

Experiment Design

Experiment design involves determining how many experiments to run and which attributes to vary in each experiment

Goal: isolate which aspects of the interface really make a difference

Experiment Design

Decide on – Response variables

• the outcome of the experiment• usually the system performance• aka dependent variable(s)

– Factors (aka attributes))• aka independent variables

– Levels (aka values for attributes)– Replication

• how often to repeat each combination of choices

Experiment Design

Example: – Studying a system (ignoring users)

Say we want to determine how to configure the hardware for a personal workstation – Hardware choices

• which CPU (three types)• how much memory (four amounts)• how many disk drives (from 1 to 3)

– Workload characteristics• administration, management, scientific

Experiment Design

We want to isolate the effect of each component for the given workload type.How do we do this?– WL1 CPU1 Mem1 Disk1– WL1 CPU1 Mem1 Disk2– WL1 CPU1 Mem1 Disk3– WL1 CPU1 Mem2 Disk1– WL1 CPU1 Mem2 Disk2– …

There are (3 CPUs)*(4 memory sizes)*(3 disk sizes)*(3 workload types) = 108 combinations!

Experiment Design

One strategy to reduce the number of comparisons needed:– pick just one attribute– vary it– hold the rest constant

Problems:– inefficient– might miss effects of interactions

Interactions among Attributes

A1 A2B1 3 5B2 6 8

A1 A2B1 3 5B2 6 9

A1

B1B1

A2

A1

B2

A2

B2

Non-interacting Interacting

A2A2 A1A1

B1 B2B1 B2

Experiment Design

Another strategy: figure out which attributes are important firstDo this by just comparing a few major attributes at a time – if an attribute has a strong effect, include it in future

studies– otherwise assume it is safe to drop it

This strategy also allows you to find interactions between attributes

Experiment Design

Common practice: Fractional Factorial Design– Just compare important subsets– Use experiment design to partially vary the

combinations of attributes

Blocking– Group factors or levels together– Use a Latin Square design to arrange the blocks

Between-Groups Design

Wilma and Betty use one interface

Dino and Fred use the other

Within-Groups Design

Everyone uses both interfaces

Adapted from slide by James Landay

Between-Groups vs. Within-Groups

Between groups – 2 or more groups of test participants– each group uses only 1 of the systems

Within groups – one group of test participants– each person uses all systems

• can’t use the same tasks on different systems

Between-Groups vs. Within-Groups

Within groups design– Pros:

• Is more powerful statistically (can compare the same person across different conditions, thus isolating effects of individual differences)

• Requires fewer participants than between-groups

– Cons:• Learning effects• Fatigue effects

Special Considerations for Formal Studies with Human Participants

Studies involving human participants vs. measuring automated systems– people get tired– people get bored– people (may) get upset by some tasks– learning effects

• people will learn how to do the tasks (or the answers to questions) if repeated• people will (usually) learn how to use the system over time

More Special Considerations

High variability among people

– especially when involved in reading/comprehension tasks

– especially when following hyperlinks! (can go all over the place)

Documents

Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst HFID Spring 2005