SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005.

35
SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005
  • date post

    21-Dec-2015
  • Category

    Documents

  • view

    217
  • download

    0

Transcript of SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005.

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

SIMS 213: User Interface Design & Development

Marti HearstTues, April 19, 2005

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

Today

Evaluation based on Cognitive Modeling GOMS

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

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

have to do to perform a task. Fitts’ Law

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

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

Slide adapted from Chris Long

What is GOMS?

A family of user interface modeling techniquesGoals, Operators, Methods, and Selection rulesInput: detailed description of UI and task(s)Output: various qualitative and quantitative measures

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

Slide adapted from Chris Long

Engineering Model of Human Performance

From The Psychology of Human-Computer Interaction, by Card, Moran, and NewellQuantitative predictionsUsefully approximateBased on Model Human Processor

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

Slide adapted from Chris Long

Members of GOMS Family

Keystroke-Level Model (KLM) – – Card, Moran, Newell (1983)

CMN-GOMS – Card, Moran, Newell GOMS

Natural GOMS Language (NGOMSL) – -Kieras (1988+)

Critical Path Method or Cognitive, Perceptual, and Motor GOMS (CPM-GOMS) – John (1990+)

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

Slide adapted from Chris Long

What GOMS can model

Task must be goal-directed– Some activities are more goal-directed than others– Even creative activities contain goal-directed tasks

Task must a routine cognitive skill - as opposed to problem solving as in Cognitive WalkthroughSerial and parallel tasks

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

Slide adapted from Chris Long

GOMS Output

Functionality coverage and consistency– Does UI contain needed functions?– Are similar tasks performed similarly? (NGOMSL

only?)

Operator sequence– In what order are individual operations done?– Abstraction of operations may vary among models

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

Slide adapted from Chris Long

Output (cont’d)

Execution time– By expert– Very good rank ordering– Absolute accuracy ~10-20%

Procedure learning time (NGOMSL only)– Accurate for relative comparison only– Does not include time for learning domain knowledge

Error recovery

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

Slide adapted from Chris Long

Applications of GOMS analysis

Compare UI designsProfilingSensitivity and parametric analysisBuilding a help system– GOMS modelling makes user tasks and goals

explicit– Can suggest questions users will ask and the

answers

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

Slide adapted from Chris Long

Keystroke-Level Model

How to make a KLM– List specific actions user does to perform task

• Keystrokes and button presses• Mouse movements• Hand movements between keyboard & mouse• System response time (if it makes user wait)

– Add Mental operators– Assign execution times to steps– Sum execution times

Only provides execution time and operator sequence

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

KLM ExampleReplace all instances of a 4-letter word.

– (example from Hochstein)

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

Slide adapted from Chris Long

How to do (CMN-)GOMS Analysis

Choose GOMS family member, making sure GOMS is appropriate for youGenerate task description– Pick high-level user Goal– Write Method for accomplishing Goal - may invoke

subgoals– Write Methods for subgoals

• This is recursive• Stops when Operators are reached

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

Slide adapted from Chris Long

How to do GOMS Analysis

Evaluate description of taskApply results to UIIterate

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

Slide adapted from Chris Long

Operators vs. Methods

Operator: the most primitive actionMethod: requires several Operators or subgoal invocations to accomplishLevel of detail determined by– KLM level - keypress, mouse press– Higher level - select-Close-from-File-menu– Different parts of model can be at different levels of

detail

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

Slide adapted from Chris Long

GOMS Example 1: PDA Text Entry

goal: enter-text-Newton– move-pen-to-text-start– goal: enter-word-Newton ...repeat until no more words

• write-letter ...repeat until no more letters• [select: goal: correct-misrecognized-word] ...if incorrect

expansion of correct-misrecognized-word goal– move-pen-to-incorrect-letter– write-letter

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

Slide adapted from Chris Long

GOMS Example 2: Graph Drawer

goal: draw-graph– goal: draw-node ...repeat

until no more nodes• goal: draw-circle

– draw-circle-gesture– goal: verify-circle-

gesture» [select: goal:

correct-gesture] ...if misrecognized or drawn incorrectly

– goal: connect-node ...repeat until no more connections

» draw-line-gesture» move-pen-to-

node-just-drawn– goal: name-node

» make-naming-gesture

» goal:enter-text

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

Slide adapted from Chris Long

GOMS Example 2

expansion of correct-gesture goal– move-pen-to-undo-button– tap-undo-button

goal: copy-node– move-pen-to-node– draw-copy-gesture– drag-pen-to-destination

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

GOMS Example 3

Move text in a word processor– (example from Hochstein)

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

GOMS Example 3

Move text in a word processor– (example from Hochstein)

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

GOMS Example 3

Move text in a word processor– (example from Hochstein)

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

Slide adapted from Chris Long

Other GOMS techniques

NGOMSL– Regularized level of detail– Formal syntax, so computer interpretable– Gives learning times

CPM-GOMS– Closer to level of Model Human Processor– Much more time consuming to generate– Can model parallel activities

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

Slide adapted from Chris Long

Real-world GOMS Applications

KLM– Mouse-based text editor– Mechanical CAD system

NGOMSL– TV control system– Nuclear power plant operator’s associate

CPM-GOMS– Telephone operator workstation

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

Slide adapted from Chris Long

Advantages of GOMS

Gives several qualitative and quantitative measuresModel explains why the results are what they areLess work than user studyEasy to modify when interface is revisedResearch ongoing for tools to aid modeling process

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

Slide adapted from Chris Long

Disadvantages of GOMS

Not as easy as heuristic analysis, guidelines, or cognitive walkthroughOnly works for goal-directed tasksAssumes tasks are performed by expert usersEvaluator must pick users’ tasks/goalsDoes not address several important UI issues, such as– readability of text– memorability of icons, commands

Does not address social or organizational impact

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

Slide adapted from Chris Long

GOMS Summary

Provides info about many important UI propertiesDoes not tell you everything you want to know about a UISubstantial effort to do initial model, but still easier than user testingChanging later is much less work than initial generation

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

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 27: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005.

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 28: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005.

Slide adapted from Pourang Irani

Fitts’ Law

Same ID → Same Difficulty

Target 1 Target 2

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

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

Slide adapted from Pourang Irani

Fitts’ Law

Smaller ID → Easier

Target 2Target 1

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

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

Slide adapted from Pourang Irani

Fitts’ Law

Larger ID → Harder

Target 2Target 1

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

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

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 32: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005.

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

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

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, by Fitt's Law.

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

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

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 35: SIMS 213: User Interface Design & Development Marti Hearst Tues, April 19, 2005.

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.