The Interaction

PASCA – PIO

GUNADARMA UNIVERSITY

DEC 2012

OverviewInteraction Models

understand human-computer communication

Ergonomics

Physical characteristics of interaction

Context

Social

Organizational

Task AnalysisDomain - area of expertise

e.g. web site design

Concepts - important aspects

e.g. HTML, Java, JPEG, editor, browser

Task - operation within domain

e.g. design a web page

Intention - specific action toward goal

e.g. insert a picture here

The human action cycle is a psychological model which describes the steps humans take when they interact with computer systems The three stages of the human action cycle (goal formation, execution and evaluation). The model is divided into three stages of seven steps in total, and is (approximately) as follows: Goal formation stage

1. Goal formation. Execution stage

2. Translation of goals into a set of (unordered) tasks required to achieve the goal. 3. Sequencing the tasks to create the action sequence. 4. Executing the action sequence.

Evaluation stage5. Perceiving the results after having executed the action sequence. 6. Interpreting the actual outcomes based on the expected outcomes.

7. Comparing what happened with what the user wished to happen.

The Execution-Evaluation Cycle

Execution

• Establish the goal

• Form the intention

• Specify the action sequence

• Execute the action

Evaluation

• Perceive the system state

• Interpret the system state

• Evaluate the system state

Pressing a Button

Goal: See what’s underneath a window

Intention: Click the minimize button

Sequence: Find, move, click

Execute: Move hand, press finger down

Perceive: Open eyes, look

Interpret: Button pressed, window smaller

Evaluate: Mission accomplished

Problems

Gulf of Execution

How do I do X?

Actions allowed by system should correspond to those intended by user

Gulf of Evaluation

What just happened?

Distance between physical presentation and the expectation of the user

Interface

Interaction Framework

SCore

UTask

OOutput

IInput

articulationperformance

presentation observation

Turning on the Lights

SCore

UTask

OOutput

IInput

articulationperformance

presentation observation

Turning on the Lights

SCore

UTask

OOutput

IInput

articulationperformance

presentation observation

switches

wiring flip

lights

circuit

power photons

Social Context

Ergonomics

DialogDesign

ScreenDesign

The Framework and HCI

S UO

I

The Ergonomics of Arrangement

Functional

Related contols and displays grouped

Multiple device remote controls

Sequential

Controls and displays grouped by task order

Real menus

Frequency

Frequently used controls easier to access

Physical Ergonomics

How comfortable is the user?

Position - fatigue

Temperature - concentration

Lighting - eyestrain or glare

Noise - hearing loss

Time - exposure

Color - eyestrain, color blindness

Social Context

How does social context affect interaction?

Others - desire to impress, competition, fear of failure

Motivation - fear, allegiance, ambition, self-satisfaction

Inadequate systems cause frustration, lack of motivation

Interaction Styles

What is the nature of the interface?

Command line

Menus

Natural language

Query dialog

Forms

WIMP (Window, Icon, Menu, Pointer)

Command LineFirst interactive dialog style

Direct - no parsing through choices

Flexible - options, iteration

Memory - commands must be memorized

Consistent, meaningful names

vocabulary of the user

Slow learning curve

Menus

Shows available choices

Faster learning curve

Familiar from dining out

Indirect - parse through all options

Text or graphics

Keyboard or mouse

Press the Windows key

Natural Language

Most attractive at first glance

Ambiguous sentences

The man hit the boy with the stick

Who is holding the stick

Ambiguous words

Cumbersome

Fast learning curve

Invoke the stupid paper clip

Query Dialog

Questions and Answer

Multiple choice, true/false or codes

Fast learning curve

Restricted domains

E.g. setting up an O/S

Save the presentation to HTML

Forms

Familiarity with paper forms

Slots to fill information in

Some slots blank

Easy movement (e.g. tab key, mouse)

Fast learning curve

Direct

Add student to rolodex

WIMP

Windows

Icons

Menus

Pointers

Also…

Buttons

Pallettes

Dialog Boxes

Windows

Multiple simultaneous tasks on screen

Layout policies

Tiling - adjacent windows

Cascading - overlapping windows

Scrollbars - displayed portion of contents

Decorations

title

minimize, maximize, close buttons

Icons

Simple pictoral representations

Minimized windows

System elements

Garbage can

Floppy disk

Folder

Globe

Pointers

Manifestation of the mouse on the screen

Basically a moving icon

shape indicates mode

arrow

hourglass

cross hairs

hot spot - pixel that pointer pointing at

Menus

Ordered lists of operations

Selected item is highlighted

Cascading sub-menus

Menu bar

horizontal menu

cascading vertical sub-menus

Popup menus

More menusPinned menus

Keep popular items on the screen

Indicated with a thumbtack icon

Keyboard accelerators

Function keys, alt-keys

Efficient expert operation

Pie menus

Menu OrganizationHow are menu items organized

Importance

Frequency

Separate opposite functionality

Hick’s Law, describes the time it takes for a person to make a decision as a result of the possible choices he or she has.

Time to decide = .15 lg(choices+1) seconds

Buttons

One item menus

Individual buttons

Push button - invokes a command

Toggle button - changes state when clicked

Button groups

Radio buttons - only one selected

Check boxes - any combination

Toolbars

Collections of small buttons

Functionally a menu of icons

Customizable

Trouble recognizing icons

place text next to/instead of icon

tool tips - text that appears when pointer still

Palettes - indicate mode

Dialog Boxes

Interactive communication

Task oriented

Wizards

Alerts

Exclusive

On top

Screen Design and Layout

What goes where

Presenting information

Aesthetics vs. utility

Knowing what to do

Culture

Presenting Information

How is data best organized geometrically

Sorting

alphanumerically

size

first name/last name

Alignment

decimal point

Aesthetics vs. Utility

How fancy can my interface be?

Foreground/Background

Background should not be distracting

High contrast

Counter

gap between foreground elements

User interest, novelty

Sales - the demo factor

Knowing What to Do

How can we make the interface obvious to the user?

Style guides

Consistency

Familiarity

Affordances

handles lift

buttons push

Culture

Not everyone is Western

Internationalization

Resources - allow customization

language

color

Icon meanings

meaning of check marks vs. x marks