Midterm review packet stolen borrowed from prof marti hearst
This presentation is the property of its rightful owner.
Sponsored Links
1 / 77

Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst PowerPoint PPT Presentation


  • 91 Views
  • Uploaded on
  • Presentation posted in: General

Midterm Review Packet Stolen 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.

Download Presentation

Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Midterm review packet stolen borrowed from prof marti hearst

Midterm Review PacketStolen Borrowed from Prof. Marti Hearst

HFID Spring 2005


Affordances

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

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


Affordances in screen based interfaces

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.

Based on slide by Saul Greenberg


Affordances in screen based interfaces1

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?

Based on slide by Saul Greenberg


Visual affordances of a scrollbar

Visual affordances of a scrollbar


Mappings

Mappings

  • Mapping:

    • Relationships between two things

      • Between controls and their results

    • Related to metaphor discussion

    • Related to affordances


Midterm review packet stolen borrowed from prof marti hearst

Slide adapted from Saul Greenberg


Mapping controls to physical outcomes

full mapping

paired

arbitrary

front

back

front

back

backright

frontleft

backleft

frontright

2 possibilities per side

=4 total possibilities

24 possibilities, requires:

-visible labels -memory

Mapping controls to physical outcomes


Mappings1

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

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

Based on slide by Saul Greenberg


Cultural associations

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

Based on slide by Saul Greenberg


Gulf of evaluation

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

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

Based on slide by Saul Greenberg


Bad example

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?

Based on slide by Saul Greenberg


Bad example1

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?

Based on slide by Saul Greenberg


The metaphor of direct manipulation

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

move

my.doc

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:

Slide adapted from Saul Greenberg


Direct manipulation

Direct manipulation

  • Representation directly determines what can manipulated

Slide adapted from Saul Greenberg


Games

Games

Slide adapted from Saul Greenberg


Is direct manipulation the way to go

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”)

Slide adapted from Saul Greenberg


Raskin on cognition

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 cognition1

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?

Image from Newsweek, Jan 2001


Raskin on cognition2

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

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


Midterm review packet stolen borrowed from prof marti hearst

Umm, thanks for the warning,

but what should I do?

What happens when you cancel a cancelled operation?

Do I have any choice in this?

Uhhh… I give up on this one


Midterm review packet stolen borrowed from prof marti hearst

“HIT ANY KEY TO CONTINUE”

Slide adapted from Saul Greenberg


Modes

Modes

  • What are they?

    • The same user actions have different effects in different situations.

    • Examples:

      • Adobe reader example: vs.

      • Powerpoint drawing example

      • Keycaps lock


Modes1

Modes

  • When are they useful?

  • Why can they be problematic?

  • How can these problems be fixed?


Modes2

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

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

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

How WireFraming Fits In

Kelly Goto & Eric Ott of Macromedia

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


Midterm review packet stolen borrowed from prof marti hearst

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


Today

Today

  • Evaluation based on Cognitive Modeling

  • Comparing Evaluation Methods


Another kind of evaluation

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


Goms at a glance

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

Slide adapted from Melody Ivory


Model human processor mhp

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

Slide adapted from Melody Ivory

Adapted from slide by Dan Glaser


Original goms cmn goms

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)

Slide adapted from Melody Ivory


Cmn goms

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

Slide adapted from Melody Ivory


Keystroke level model

Keystroke-Level Model

  • Simpler than CMN-GOMS

  • Model was developed to predict time to accomplish a task on a computer

  • Predicts 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


Midterm review packet stolen borrowed from prof marti hearst

t sec.

KLM-GOMS

(What Raskin refers to as GOMS)

Keystroke level model

1. Predict

2. Evaluate

x sec.

Action 1

Action 2

y sec.

Action 3

+

z sec.

Time using

interface 1

Time using

interface 2

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

Raskin excludes

Symbols and values

Remarks

Time (s)

Operator

Press Key

Mouse Button Press

Point with Mouse

Home hand to and from keyboard

Drawing - domain dependent

Mentally prepare

Response from system - measure

0.2

.10/.20

1.1

0.4

-

1.35

-

K

B

P

H

D

M

R

Assumption: expert user

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

0.2

.10/.20

1.1

0.4

-

1.35

-

K

B

P

H

D

M

R

Raskin’s rules

Rule 0: Initial insertion of candidate M’s

M before K

M before P iff P selects command

i.e. not when P points to arguments

Rule 1: Deletion of anticipated M’s

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

e.g. when you point and click

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

0.2

.10/.20

1.1

0.4

-

1.35

-

K

B

P

H

D

M

R

Raskin’s rules

Rule 2: Deletion of M’s within cognitive units

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

e.g. 4564.23

Rule 3: Deletion of M’s before consecutive terminators

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

e.g. )’

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

0.2

.10/.20

1.1

0.4

-

1.35

-

K

B

P

H

D

M

R

Raskin’s rules

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

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

Rule 5: Deletion of overlapped M’s

Do not count any M that overlaps an R.

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

0.2

.10/.20

1.1

0.4

-

1.35

-

K

B

P

H

D

M

R

Example 1

Temperature Converter

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

Convert F to C.

Convert C to F.

Apply Rule 0

HPBHKKKKK

HMPMBHMKMKMKMKMK

Apply Rules 1 and 2

HMPBHMKKKKMK

Convert to numbers

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

=7.15

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

0.2

.10/.20

1.1

0.4

-

1.35

-

K

B

P

H

D

M

R

Example 1

Temperature Converter

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

Convert F to C.

Convert C to F.

Apply Rule 0

HPBHKKKKK

HMPMBHMKMKMKMKMK

Apply Rules 1 and 2

HMPBHMKKKKMK

Convert to numbers

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

=7.15

Slide adapted from Newstetter & Martin, Georgia Tech


Example 2

Example 2

  • GUI temperature interface

  • Assume a button for compressing scale

  • Ends up being much slower

    • 16.8 seconds/avg prediction


Using klm and information theory to design more efficient interfaces raskin

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

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 interfaces1

Using KLM to Make More Efficient Interfaces

  • Second Alternative:

    • Translates to both simultaneously

C

F

MKKKK = 2.15 sec


Goms in practice

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

Slide adapted from Melody Ivory


Drawbacks

Drawbacks

  • Assumes an expert user

  • Assumes an error-free usage

  • Overall, very idealized


Midterm review packet stolen borrowed from prof marti hearst

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

Slide adapted from Newstetter & Martin, Georgia Tech


Midterm review packet stolen borrowed from prof marti hearst

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 Newstetter & Martin, Georgia Tech


Fitts law

Fitts’ Law

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

Target 1

Target 2

Same ID → Same Difficulty

Slide adapted from Pourang Irani


Fitts law1

Fitts’ Law

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

Target 1

Target 2

Smaller ID → Easier

Slide adapted from Pourang Irani


Fitts law2

Fitts’ Law

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

Target 1

Target 2

Larger ID → Harder

Slide adapted from Pourang Irani


Determining constants for fitts law

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

Slide adapted from Pourang Irani


Formal usability studies

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

Adapted from slide by James Landay


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 design1

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 design2

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 design3

Experiment Design

  • We want to isolate the effect of each component for the given workload type.

  • How do we do this?

    • WL1CPU1 Mem1Disk1

    • WL1CPU1Mem1Disk2

    • WL1CPU1Mem1Disk3

    • WL1CPU1Mem2Disk1

    • WL1CPU1Mem2Disk2

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


Experiment design4

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

Interactions among Attributes

Interacting

Non-interacting

A1 A2

B135

B269

A1A2

B135

B268

B2

B2

B1

B1

A1

A2

A1

A2

A2

A2

A1

A1

B1

B2

B1

B2


Experiment design5

Experiment Design

  • Another strategy: figure out which attributes are important first

  • Do 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 design6

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

Between-Groups Design

  • Wilma and Betty use one interface

  • Dino and Fred use the other


Within groups design

Within-Groups Design

Everyone uses both interfaces


Between groups vs within groups

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

Adapted from slide by James Landay


Between groups vs within groups1

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

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

More Special Considerations

High variability among people

  • especially when involved in reading/comprehension tasks

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


  • Login