DASAR PERANCANGAN INTERAKSI

Interaksi Manusia dan Komputer

Computer Science UGM

MATERI AFTER MID

Dasar Perancangan Interaksi

Tipe-tipe Interaksi Menu , Form Fillin dan Kotak Dialog Command Language Interface Direct Manipulation

Perancangan Pesan Sistem, Tampilan Layar dan Warna

Evaluasi Desain Antarmuka

Antarmuka Masa Lalu dan Masa Depan

BIG IDEA

User modeling KLM (Keystroke Level Model) GOMS Model (Goals Operators Methods Selection) Action Analysis

3 Golden Rules untuk desain antar muka (Theo Mandel, Ph.D)

Places Users in Control

Reduces user’s memory load

Make the User interface consistent

describes the process of building up and modifying a user model

The main goal of user modeling is customization and adaptation of systems to the user's specific needs

The system needs to "say the 'right' thing at the 'right' time in the 'right' way"

USER MODELING

Dasar Perancangan Interaksi -IMK

HUMAN COMPUTER INTERACTION –USER MODELING

HCI

Not just human factor

No strong agreement

Not just computer factor

Main emphasis :USER INTERFACE DESIGN

• HARDWARE• BEHAVIOR OF SOFTWARE• SUPPORTING DOCUMENT

INVOLVES

• Time to learn• Speed of performance• User error rates• Retention over time• Subjective satisfaction

• Designed by programmers• Functionality dominates

software design and marketing

• Designer intuition is often used rather than user modeling ( not good)

Typical Human Factors Measures

UI come from ?

HCI GOALS FOR DESIGNERS

Improve user's quality of life by building quality (not flashy) interactive systems

Promote attention to user interface issues which should be considered by managers

Become successful designers of systems that go beyond intuitive concepts like "user friendliness" and focus on supporting the user's real task goals

Analysis Early Design Late Design Implementation Deployment

Go

als

Met

ho

ds

Art

ifac

tsExplore design space

Paper prototypesTask scenarios

Refine selected design

Empirical study

UI guidelines

Functional test

Functional prototype

Implement and integrate

Empirical study

UI guidelines

Functional test

Functionalinterface & system

Gather requirements for next release

Field study

Critical incident walkthroughs

Interviews and surveys

Usability report

Contextual inquiry

Surveys

Observations

Interviews

Task analysis

User descriptions

Affinity diagramsDesign brief

Task descriptions

Identify:Usability goals

ContentUsers & tasks

Sketching & brainstorming

Cognitive walkthrough

GOMS

Heuristic evaluation

Action analysis

Context of TCUID - Task Centered User Interface Design

7

MOTIVATION FOR INCLUDING HUMAN FACTORS IN USER INTERFACE DESIGN

Life critical systems

Industrial and commercial uses

Personal applications

Exploratory, creative, and cooperative systems

ACCOMMODATING HUMAN DIVERSITY IN DESIGN

Physical workspaces

Cognitive and perceptual ability differences

Personality differences

Cultural and international diversity

User disabilities

Elderly users

US MILITARY STANDARDS FOR HUMAN ENGINEERING AND DESIGN

Achieve required performance

Minimize personnel training requirements

Achieve required reliability

Foster design standardization

HOW IS THIS DONE?

Ensure functionality by basing design on user task analysis

System reliability requires designer attention to details like privacy, security, and data integrity

Standardization requires attention to issues like system integration, consistency, and portability

Schedule and budget must allow for human factors work like user analysis and testing

TASK PERFORMANCE

TASK PERFORMANCE IS CRITICAL IN

airline and automobile displays

emergency management systems

process control systems

customer service systems and more

SHOULD MEASURE TASK PERFORMANCE EARLY TO

minimize task performance on high-frequency tasks

select among alternative designs

ensure that critical performance goals will be satisfied

cost justify replacement of an existing system

APPROACHES TO USER INTERFACE DESIGN

Human Factors: prototype and test

Cognitive theory: production system

Engineering models: KLM (keystroke level model) GOMS Models (goals, operators, methods, selection rules)

REAL-WORLD EXAMPLE

• For every second saved in operator support, a company could save 3 million dollars per year– NYNEX estimate for its operator support, [Gray et al., GOMS Meets the Phone Company,

Interact, 1990]

• Replace old workstations with new workstations– promised to reduce operator support time by 2.5s– weigh against investment of the new systems (about 1000 workstations at $10,000 each)

• Conduct empirical study to compare operator performance on old and new systems

• Perform GOMS analysis to help explain results14

FINDINGS

• Operators slower on new workstations– would have cost another $3 million per year

• GOMS analysis showed that an operator had to perform more operations along the critical path for the new systems– GOMS is a predictive and explanatory model

15

KLM (KEYSTROKE LEVEL MODEL)

User Modeling

KEYSTROKE LEVEL MODEL (KLM)

Choose representative user task scenarios

Specify design to point that keystrokes defining actions can be listed

List keystrokes (operators) required to perform task

Insert mental operators at points user needs to stop and think

Look up standard execution time for each operator

Add up the execution times for the operators

Total is estimated time to complete task

STANDARD EXECUTION TIMES

K - key press (0.2 sec = 55 wpm)

P - point with mouse (1.1 sec)

B - mouse button press (0.1 sec)

BB - press and release button (0.2 sec)

H - home hands to keyboard or mouse (0.4 sec)

M - mental act of thinking (1.2 sec)

CURRENT DESIGN: DELETE A FILE BY DRAGGING IT TO THE TRASH ICON

1. Point to file icon (P)

2. Press & hold mouse button (B)

3. Drag file to trash icon (P)

4. Release mouse button (B)

5. Point to original window (P)

3P + 2B = 3.5 sec.

K - key press (0.2 sec = 55 wpm)P - point with mouse (1.1 sec)B - mouse button press (0.1 sec)BB - press and release button (0.2 sec)H - home hands to keyboard or mouse (0.4 sec)M - mental act of thinking (1.2 sec)

REMEMBER …

NEW DESIGN: ADDING A COMMAND TO MENU

1. Point to file icon (P)

2. Click button (BB)

3. Point to file menu (P)

4. Press and hold button (B)

5. Point to add command (P)

6. Release mouse button (B)

7. Point to original window (P)

4P + 4B = 4.8 sec.

K - key press (0.2 sec = 55 wpm)P - point with mouse (1.1 sec)B - mouse button press (0.1 sec)BB - press and release button (0.2 sec)H - home hands to keyboard or mouse (0.4 sec)M - mental act of thinking (1.2 sec)

ASSUMPTIONS

These previous scenarios work only work if the user is currently able to view all the needed windows and icons.

If the trash icon for example is buried under other windows the first procedure is slowed down quite a bit.

INSERTING MENTAL OPERATORS: WHERE DOES THE USER STOP AND THINK?

1. Initiating a process.

2. Making strategic decisions.

3. Retrieving a chunk from user’s short term memory

4. Finding something on the screen.

5. Verifying intended action is complete.

MENTAL OPERATORS NEW VS EXPERIENCED USERS

New users stop and check feedback after every step

New users have small chunks

Experienced users have elaborate chunks

Experienced users may overlap mental operators with physical operators

DELETE A FILE BY DRAGGING ICON TO TRASH

1. Initiate delete. (M)

2. Find file icon. (M)

3. Point to file icon. (P)

4. Press & hold button. (B)

5. Verify icon reverse video. (M)

6. Find trash icon. (M)

7. Drag file to trash icon. (P)

8. Verify trash reverse video. (M)

9. Release button. (B)

10. Verify bulging trash icon. (M)

11. Find original window. (M)

12. Point to window. (P)

3P + 2B + 7M = 12.6 sec.

K - key press (0.2 sec = 55 wpm)P - point with mouse (1.1 sec)B - mouse button press (0.1 sec)BB - press and release button (0.2 sec)H - home hands to keyboard or mouse (0.4 sec)M - mental act of thinking (1.2 sec)

PLACEMENT OF MENTAL OPERATORS

Hard to do - requires good intuition from designer

Consistency in the number of Mental's assigned is more important than exact positioning

GOMS MODELUser Modeling

GOMS

• Goals: what a user wants to accomplish• Operators: mental or physical actions that change the state of the user or

system• Methods: groups of goals and operators• Selection rules: determine which method to apply, if more than one available

GOMS

• A method to describe tasks and how a user performs those tasks with a specific design– bridges task analysis with a specific interface design– error-free, goal-directed, and rational behavior

• Views humans as information processors– small number of cognitive, perceptual, and motor operators characterize user

behavior

• To apply GOMS:– analyze task to identify user goals (hierarchical)– identify operators to achieve goals– sum operator times to predict performance

GOMS CAN BE USED TO

• Develop task-centered documentation• Predict time to learn how to perform tasks• Predict likelihood of errors• Predict time to perform tasks

– predictions tied to specific interface designs

APPLY GOMS WHEN

30

• Want a formal method of writing tasks– enables you to identify intersections across tasks, but requires

a consistent vocabulary– generates discussion (concrete representation)– matches tasks to specific interface design

• Want to make tasks more efficient– or just the repetitive parts of larger tasks– even creative tasks have repetitive parts

John, B.E. 1995 31

WHO CAN USE GOMS

32

• Just about everyone– formal training not required; experience helps

• Have multiple people perform analysis and compare results– results are often surprisingly consistent

HOW TO USE GOMS

33

• Analyze hierarchical structure of a task – coarse analysis focuses more on the cognitive structure of a

task– fine analysis focuses more on the structure imposed by the

specific interface design• Analyze alternative methods• Assign operators to base level goals• Assign times to operators• Sum the operator times

More available in TCUID chapter 4

OPERATOR TIME

Press key on keyboard 280 ms

Use mouse to point to object on screen 1500 ms

Move hand to pointing device 300 ms

Move eyes to location on screen 230 ms

Retrieve item from memory 1200 ms

Learn a single step in a procedure 25 seconds

Select among methods 1200 ms

This example is extracted from:

David Kieras, A Guide to GOMS Task Analysis,

University of Michigan Technical Report,

Spring, 1994.

USER GOALS

Delete a file.

Move a file.

Delete a directory.

Move a directory.

To accomplish goal of deleting a file:

1. Accomplish goal of dragging file to trash.

2. Return with goal completed.

To accomplish goal of moving a file:

1. Accomplish goal of dragging file to destination.

2. Return with goal completed.

To accomplish goal of deleting a directory:

1. Accomplish goal of dragging directory to trash.

2. Return with goal completed.

To accomplish goal of moving a directory:

1. Accomplish goal of dragging directory to trash.

2. Return with goal completed.

GENERALIZED METHODS

Method for accomplishing goal of deleting an object:

1. Accomplish goal of dragging object to trash.

2. Return with goal completed.

Method for accomplishing goal of moving an object:

1. Accomplish goal of dragging object to destination.

2. Return with goal completed.

SUB METHODAccomplish goal of dragging item to destination:

1. Locate icon on screen.

2. Move cursor to item icon location.

3. Hold mouse button.

4. Locate destination icon.

5. Move cursor to destination icon.

6. Verify destination icon reverse video.

7. Release mouse button.

8. Return with goal accomplished.

GOMS EXAMPLE

• Retrieve the article entitled “Why Goms?”– written by Bonnie John, 1995, in ACM DL

GOAL STRUCTURE

• Goal: Retrieve article from ACM DL– Goal: Go to ACM

• Goal: Enter ACM URL• Goal: Submit URL

– Goal: Go to DL• Goal: Locate DL link• Goal: Select the link

– Goal: Select method• [Method: Search method• Goal: Search for article

– Goal: Enter search parameters– Goal: Submit search– Goal: Identify article from results

• Goal: Select the article]• [Method: Browse method - <take home exercise>]

– Goal: Save article to disk• Goal: Initiate save action• Goal: Select location• Goal: save article to that location

ANOTHER EXAMPLE GOMS

Source :

The Psychology of Human-Computer Interaction By Stuart Card, Tom Moran and Allen Newell, Lawrence Erlbaum, 1983

GOAL: Text Correcting

OPERATOR: Get next task

METHOD: Use line feed

METHOD: Use search and replace

SELECTION: select method

METHOD: count lines and move n-lines

Ran tests and Subjects to assess preferences and times

Methods depend on context: # of lines down, distinctness of string, nearby breaks

People have preferred methods

GOAL: edit manuscriptGOAL: edit unit – task repeat

GOAL: acquire unit – task if not rememberedGET next page if at end of pageGET next task

GOAL: execute unit task if edit task foundGOAL: locate line if task not on current line

VERIFY locationGOAL: modify text

SELECT GOAL use QS methodSPECIFY commandSPECIFY argument

GOAL: use LF methodSPECIFY command repeat until at line

- - - - - - - - - - - - - - ARGUMENT LEVEL GOMS MODEL

Fitting Model to Data/Calibrating the Model

Protocol studies using video

Analyze video

To determine method

Calculate time for each GOM action

Get next page 2.14 sec.

Get next task 1.92 sec.Locate line 3.98 sec.Modify text 3.85 sec.

Specify command 1.47 sec.Specify argument 1.46 sec.Look at .31 sec.Move hand .19 sec.Search for .72 sec.

CAN GOMS BE TRUSTED?

47

• Predictions made by GOMS models validated in many research studies– assumes that you have a valid model!

• Build initial model based your own understanding of a task’s execution– record other users performing the task– compare predicted versus actual sequence– refine and iterate

GOMS WORTH THE EFFORT WHEN

48

• Want quantitative estimates of human performance without having to– build a working system– train people to use the system to measure performance– measure performance for many users

GOMS : PROS AND CONS

49

• Pros– predict human performance before committing to a specific design in

code or running empirical studies– no special skills required– many studies have validated the model (it works)

• Cons– assumes error-free, skilled behavior– no formal recipe for how to perform decomposition– may require significant time investment

GOMS MODELGOALS OPERATORS METHODS SELECTION RULES

Advantages

GOMS models are executable

GOMS models allow simulated execution of user task

Provide a rigorous description of what user must learn

Provide estimate of size or complexity of interface (number of distinct methods and their length)

Can estimate both learning time (about 30 sec per step and execution time (total of KLM operators)

Allow designer to evaluate the effect of reusing or sharing methods among several tasks

METHOD FOR GOMS MODEL CONSTRUCTION

Make a list of top-level user goals

Write a step-by-step method for accomplishing each goal on list

Continue refining each step that is not a keystroke level operator by defining it as a subgoal and add it to the list of user goals

Continue processing user goals until list is empty (meaning that all user goals are defined in terms of keystrokes)

If there are multiple methods to accomplish a goal supply decision rules to choose which method to invoke

ACTION ANALYSIS

User Modeling -IMK

ACTION ANALYSIS

53

• Write down each step that a user must perform in your interface to achieve a task

• Multiple number of steps by [2, 3] secs– provides range of [best, worst] performance

ACTION ANALYSIS EXAMPLE

54

– Enter URL String– Press “Enter” key– Find “digital library link”– Select the link– [assume search method]– Enter title of article into search field– Select “Search”– Find “Why GOMS” link– Select the link– Select “Save” button– Select folder location– Select “Save” button on dialog

12 Steps = [24, 36] seconds

My actual time = 28 seconds

ACTION ANALYSIS EXAMPLE

55

– Enter URL String– Press “Enter” key– Find “digital library link”– Select the link– [assume search method]– Enter title of article into search field– Select “Search”– Find “Why GOMS” link– Select the link– Select “Save” button– Select folder location– Select “Save” button on dialog

PROS AND CONS

56

• Pros– faster to perform– easier for a beginner– good for less performance critical apps

• Cons– less accurate (higher variance)– more difficult to compare alternative designs that are close in

predicted performance

QUIZ TIME

Use KLM, GOMS and Action Analysis to analys activity : Hidden Extension file!

Next Chapter

THE GOLDEN RULES OF USER

INTERFACE DESIGNDasar Perancangan Interaksi-IMK

USER INTERFACE DESIGN PRINCIPLES

“The golden rule of design: Don’t do to others what others have done to you. Remember the things you don’t like in software interfaces you use. Then make sure you don’t do the same things to users of interfaces you design and develop.” Tracy Leonard (1996)

Why should you need to follow user interface principles?

In the past, computer software was designed with little regard for the user, so the user had to somehow adapt to the system.

This approach to system design is not at all appropriate today—the system must adapt to the user. This is why design principles are so important

GOLDEN RULES OF USER INTERFACE DESIGN

1. Place users in control of the interface2. Reduce users’ memory load3. Make the user interface consistent.

1. Know the user2. Minimize memorization3. Optimize operations4. Engineer for errors.

3 Golden Rules By Mandel

Hansen’s Interface Design Principle (1971)

Update

GOLDEN RULE #1 :PLACE USERS IN CONTROL OF THE INTERFACE

Use modes judiciously (modeless)

Allow users to use either the keyboard or mouse (flexible)

Allow users to change focus (interruptible)

Display descriptive messages and text(Helpful)

Provide immediate and reversible actions, and feedback (forgiving)

Provide meaningful paths and exits (navigable)

Accommodate users with different skill levels (accessible)

Make the user interface transparent (facilitative)

Allow users to customize the interface (preferences)

Allow users to directly manipulate interface objects (interactive).

Analogi

GOLDEN RULE #2: REDUCE USERS’ MEMORY LOAD

Relieve short-term memory (remember)

Rely on recognition, not recall (recognition)

Provide visual cues (inform)

Provide defaults, undo, and redo (forgiving)

Provide interface shortcuts (frequency)

Promote an object-action syntax (intuitive)

Use real-world metaphors (transfer)

User progressive disclosure (context)- show them what they need, when they need it, and where they want it

Promote visual clarity (organize)

GOLDEN RULE #3: MAKE THE INTERFACE CONSISTENT

Sustain the context of users’ tasks (continuity)

Maintain consistency within and across products (experience)

Keep interaction results the same (expectations)

Provide aesthetic appeal and integrity (attitude)

Encourage exploration (predictable)

SOURCE

Slide “User Modeling” By Bruce R. Maxim , UM-Dearborn

Slide “GOMS-action”

Slide Design of Design Environment , Georgia Institute of Technology

Tutorial The Golden Rules of User Interface Design, Theo Mandel