The Interaction

PASCA – PIO

GUNADARMA UNIVERSITY

DEC 2012

OverviewInteraction Models

understand human-computer communication

ErgonomicsPhysical characteristics of interaction

ContextSocialOrganizational

Task AnalysisDomain - area of expertisee.g. web site design

Concepts - important aspectse.g. HTML, Java, JPEG, editor, browser

Task - operation within domaine.g. design a web page

Intention - specific action toward goale.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 windowIntention: Click the minimize buttonSequence: Find, move, clickExecute: Move hand, press finger downPerceive: Open eyes, lookInterpret: Button pressed, window smallerEvaluate: Mission accomplished

Problems

Gulf of ExecutionHow do I do X?Actions allowed by system should correspond to those intended by user

Gulf of EvaluationWhat 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

FunctionalRelated contols and displays groupedMultiple device remote controls

SequentialControls and displays grouped by task orderReal menus

FrequencyFrequently used controls easier to access

Physical Ergonomics

How comfortable is the user?Position - fatigueTemperature - concentrationLighting - eyestrain or glareNoise - hearing lossTime - exposureColor - eyestrain, color blindness

Social Context

How does social context affect interaction?

Others - desire to impress, competition, fear of failureMotivation - fear, allegiance, ambition, self-satisfaction

Inadequate systems cause frustration, lack of motivation

Interaction Styles

What is the nature of the interface?Command lineMenusNatural languageQuery dialogFormsWIMP (Window, Icon, Menu, Pointer)

Command LineFirst interactive dialog styleDirect - no parsing through choicesFlexible - options, iterationMemory - commands must be memorized

Consistent, meaningful namesvocabulary of the user

Slow learning curve

Menus

Shows available choicesFaster learning curveFamiliar from dining outIndirect - parse through all optionsText or graphicsKeyboard or mousePress the Windows key

Natural Language

Most attractive at first glanceAmbiguous sentences

The man hit the boy with the stickWho is holding the stick

Ambiguous wordsCumbersomeFast learning curveInvoke the stupid paper clip

Query Dialog

Questions and AnswerMultiple choice, true/false or codesFast learning curveRestricted domainsE.g. setting up an O/SSave the presentation to HTML

Forms

Familiarity with paper formsSlots to fill information inSome slots blankEasy movement (e.g. tab key, mouse)Fast learning curveDirectAdd student to rolodex

WIMP

WindowsIconsMenusPointersAlso…

ButtonsPallettesDialog Boxes

Windows

Multiple simultaneous tasks on screenLayout policies

Tiling - adjacent windows

Cascading - overlapping windows

Scrollbars - displayed portion of contentsDecorations

title

minimize, maximize, close buttons

IconsSimple pictoral representations

Minimized windowsSystem elements

Garbage canFloppy diskFolderGlobe

Pointers

Manifestation of the mouse on the screenBasically a moving iconshape indicates mode

arrow

hourglass

cross hairs

hot spot - pixel that pointer pointing at

Menus

Ordered lists of operationsSelected item is highlightedCascading sub-menusMenu bar

horizontal menu

cascading vertical sub-menus

Popup menus

More menusPinned menus

Keep popular items on the screen

Indicated with a thumbtack icon

Keyboard acceleratorsFunction keys, alt-keys

Efficient expert operation

Pie menus

Menu OrganizationHow are menu items organized

ImportanceFrequencySeparate opposite functionalityHick’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 menusIndividual buttons

Push button - invokes a command

Toggle button - changes state when clicked

Button groupsRadio buttons - only one selected

Check boxes - any combination

Toolbars

Collections of small buttonsFunctionally a menu of iconsCustomizableTrouble recognizing icons

place text next to/instead of icon

tool tips - text that appears when pointer still

Palettes - indicate mode

Dialog Boxes

Interactive communicationTask orientedWizardsAlertsExclusiveOn top

Screen Design and Layout

What goes wherePresenting informationAesthetics vs. utilityKnowing what to doCulture

Presenting Information

How is data best organized geometricallySorting

alphanumerically

size

first name/last name

Alignmentdecimal point

Aesthetics vs. Utility

How fancy can my interface be?Foreground/Background

Background should not be distractingHigh contrast

Countergap between foreground elements

User interest, noveltySales - the demo factor

Knowing What to Do

How can we make the interface obvious to the user?

Style guidesConsistency

Familiarity

Affordanceshandles lift

buttons push

Culture

Not everyone is WesternInternationalizationResources - allow customization

language

color

Icon meaningsmeaning of check marks vs. x marks