F4115 : HCI

Human Computer Interaction (HCI)

Chapter 1.2.2 : The Interaction

Learning Outcome
By the end of this topic, students shall be able to : a) Describe Norman`s execution cycle b) Describe the interaction framework in HCI

c) Explain the role of ergonomics an interface design.

d) Describe the various interface styles

The Interaction
Interaction Models Ergonomics Interaction Styles Context
Translation between user & system Physical characteristics of interaction The nature of user/system dialog

Social, Organizational, Motivational

What is interaction ?

USER

Communication

SYSTEM

We can describe a interaction is a way to communicate between User and system/machine

Model of Interaction
Is a translation between user and system
1

Establishing the goal.

Formulates intention Specifies actions at interface Executes action Perceives system state

Interprets system state

Evaluates system state with respect to goal

Execution / Evaluation loop

Goal

Execution
System

Evaluation

User establishes the goal Formulates intention Specifies actions at interface Executes action Perceives system state Interprets system state Evaluates system state with respect to goal

Execution / Evaluation loop

Goal

Execution
System
User establishes the goal

Evaluation

Formulates intention Specifies actions at interface Executes action Perceives system state Interprets system state Evaluates system state with respect to goal

Execution / Evaluation loop

Goal

Execution
System

Evaluation

User establishes the goal

Formulates intention Specifies actions at interface Executes action

Perceives system state Interprets system state Evaluates system state with respect to goal

Execution / Evaluation loop

Goal

Execution
System

Evaluation

User establishes the goal Formulates intention Specifies actions at interface Executes action
Perceives system state Interprets system state Evaluates system state with respect to goal

Interaction framework
4 main components: system (S), user (U), input (I), output (O)

output

core
DIALOG SCREEN DESIGN EGRONOMICS

task

input

Interaction Framework (Dix, et al,2004)

Ergonomic
Study of the physical characteristics of interaction Also known as human factors but this can also be used to mean much of HCI! Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems

Ergonomic example :
Arrangement of controls and displays
controls grouped according to function or frequency of use, or sequentially Seating arrangements adaptable to cope with all sizes of user Physical position, environmental conditions (temperature, humidity), lighting, noise.

Surrounding environment

Health issues

Use of colour

Use of red for warning, green for okay, awareness of colour-blindness etc.

The Interaction style

1) Command line interface 2) Menus 3) Natural language 4) Question/answer and query dialog 5) Form-fill and spreadsheet 6) WIMP (Windows, Icons, Menus, Pointers) 7) Point and click 8) 3 dimensional interfaces

Command Line interface

Way of expressing instructions to the computer directly Suitable for repetitive tasks Better for expert users than novices Offers direct access to system functionality Command names/abbreviations should be meaningful!

Typical example: the Unix system

Menu
Set of options displayed on the screen Options visible (less recall - easier to use) Often options hierarchically grouped Restricted form of full WIMP system

Interation Framework (Dix, et al,2004)

Nature Language
Familiar to user

Speech recognition or typed natural language

Problems
Vague Ambiguous Hard to do well

Solutions

Try to understand a subset Pick on key words

Interation Framework (Dix, et al,2004)

Query Interface
Question/answer interfaces
user led through interaction via series of questions suitable for novice users but restricted functionality often used in information systems

Query languages (e.g. SQL)

used to retrieve information from database requires understanding of database structure and language syntax, hence requires some expertise

Form Fill
Primarily for data entry or data retrieval

Screen like paper form.

Data put in relevant place Requires :
good design obvious correction facilities

Interation Framework (Dix, et al,2004)

Spreadsheet
First spreadsheet VISICALC, followed by Lotus 1-2-3 MS Excel most common today Sophisticated variation of form-filling.
grid of cells contain a value or a formula formula can involve values of other cells

user can enter and alter data spreadsheet maintains consistency

e.g. sum of all cells in this column

Point & Click Interface

Just click something! icons, text links or location on map Used in : multimedia web browsers hypertext Minimal typing

3 Dimension (3D) interface

Virtual reality

Ordinary window systems

Highlighting Visual affordance Indiscriminate use just confusing!

flat buttons

3D workspaces

Use for extra virtual space Light and occlusion give depth Distance effects

click me!
or sculptured

Element of WIMP interface

Windows (W) ; Icon (I) ; Menu (M) ; Pointer (P)

Element of WIMP interface

Windows

Windows are areas of the screen that behave as if they were independent terminals in their own right.
A windows can usually contain text or graphics, and can be moved or resized. More than one windows can be on a screen at once, allowing separate tasks to be visible at the same time. User can direct their attention to the different windows as they switch from one thread of work to another.

Element of WIMP interface

Icon Small picture or image Represents some object in the interface often a window or action

Windows can be closed down (iconifying)

Icons can be many and various
highly stylized realistic representations.

small representation many accessible windows

Element of WIMP interface

Menu

Choice of operations or services offered on the screen Required option selected with pointer

Pop-up example

Problem : take a lot of screen space Solution : pop-up: menu appears when needed

Element of WIMP interface

Pointer

Important component
Uses mouse, track pad, joystick, trackball, cursor keys or keyboard shortcuts Wide variety of graphical images

Summary
In this chapter, we have learn about : Normans execution evaluation cycle Interaction framework in HCI The role of ergonomics an interface design Various of interface design