notes-fp511 -chapter 1 interaction framework and ergonomics

8/10/2019 Notes-fp511 -Chapter 1 Interaction Framework and Ergonomics

1/34

Lecture 4 Context

1 HCI Introduction

2 HCIThe Human Element

3 HCIThe Computer

4

HCIThe Interaction

5 Usability Paradigms

6 The Design Process

7 Models of the User in Design

8 Task Analysis9 Dialog Notations & Design

10 Models of the System

11 Support/Help

12 Evaluation13 Hypertext, Multimedia, WWW

SC3402 GUI Programming HCIThe Interaction 1


2/34

HCIThe Interaction

As stated in the last lecture, HCI is neither just the study of humans nor

just the study of technologyit is the bridge between the two.

In this lecture we consider the bridge, the interaction between the human

and the computer.

Lecture 4 Summary

Models of Interaction Ergonomics (including colour)

Interaction Styles

WIMP Interfaces Screen Design & Layout



3/34

Reading

Dix et al: Chapter 3 The interaction

Reading 2.1: Colour, Mayhew 1992

Reading 4.1: Dialog Styles, Mayhew 1992



4/34

Models of Interaction 1: basic ideas

Why develop a model for interaction?

To help us to understand an interactive dialogue.

To identify likely difficulties.

To provide a framework to compare different interaction styles.

Some concepts:

Users want to achieve goals in some domain.

Operations in the domain are tasks.

Task analysis investigates the problem in terms of domain, goals,

intentions, tasks (see lecture 8).

The system and the user have different languages

The core languagedescribes computation aspects of the domain

The task languagedescribes psychological aspects of domain



5/34

Models of Interaction 2: The execution evaluation cycle

Normans execution-evaluation cyclemost closely matches our intuitive view.

1. establishing the goal task language; imprecise

2. forming the intention specific3. specifying the action sequence

4. executing the action

5. perceiving the system state6. interpreting the system state

7. evaluating the system state with respect to the goals and intentions



6/34

Interface Problems

Since the human and computer do not recognise the same concepts (speak the

same language) interfaces cause problems. These problems can be described in

terms of:

gulf of execution difference between user determined action formulation

and the actions allowed by system

gulf of evaluation difference between physical presentation of system

state and user expectation

These gulfs can be bridged:

users can change to suit the interface

designers can design knowing the user

users can change their interpretation of system responses

designers can change output characteristics



7/34

Models of Interaction 2: The Interaction Framework

Normans model concentrates on the users view of interaction.

Abowd & Beale model UserSystem communication through the

interface.

observation

articulation performance

coretask

Input

User Syste

Outputpresentation

Interface

They considered four (4) components, each with its own language.

This more accurately models the overall interaction and leads to situation

analyses that locate sources of interface problems.



8/34

The Interaction Framework ...

Interaction problems are explained as language translation difficulties.

User Input: (articulating a goal)

How easy is it to translate a goal requirement into the input language? e.g.

Difficult: bank of light switches, stovetop element controls

Easy: virtual reality system

Input System

Can all system stimuli be articulated by user language? Consider remote control (or front panel) with limited functions.

System Output (execution & evaluation)

Can system output device provide a complete view of system state? e.g. Consider document editing with limited view of data



9/34

The Interaction Framework ...

Output User (interpretation by user)

Is information presented to user in a way that is easy to interpret. e.g.

Difficult to read unmarked analog clock.

Difficult to observe result of hierarchical system file copying usingcommand line interface

Comments

These two frameworks are quite general.

Frameworks help us to understand the interaction process.

Frameworks help us to judge overall usability of an entire interactive

system. Evaluation of a system can only be with respect to a set of goals and tasks

which the system is being used to achieve. (E.g. Word vsLATEX)



10/34

Ergonomics (Human Factors)

Ergonomics is the study of the physical characteristics of interaction,

particularly:

the design or controls (icons, physical input devices)

the physical environment where the interaction is situated

layout & physical qualities of the display (e.g. screen)

This is a huge and established field; we will consider briefly some aspects:

arrangement of controls

physical environment

health issues

use of colour



11/34

Ergonomics: the arrangement of controls

Control layout is important

Safety critical systems: poor layout disaster!

Routine applications: poor layout inefficiency, user dissatisfaction,

poor mental model building etc..

Controls can be and laid out in various ways:

functional task related controls grouped together

sequential layout in order of use

frequency common controls easy to access

Other factors

Controls should be easy to reach Controls should not be so close to each other that they hamper usage

Dangerous controls should be hard to reachprevents accidents



12/34

Ergonomics: the physical environment & health issues

Unsatisfactory working conditions can at best lead to stress and dissatisfaction

and at worst harm workers health. Some factors to consider:

physical position should be comfortable

temperature should not be extreme

lighting should be low-glare & sufficient

noise should not be excessive; high levels hamper perception

time dont expect extended use of an interactive system



13/34

Ergonomics: Colour

Colour is a powerful cue, but it is easy to misuse.

It should not be applied just because it is available.

Topics:

Colour Vision & Perception

Principles & Guidelines



14/34

Colour Vision

the eye consists of millions ofphoto receptorssensitive to light

two types of photo receptors

1. rods

not sensitive to colour

high density at periphery

highly sensitive

low resolution

2. cones

sensitive to colour; different cones for red, green and blue light

high density in centre (fovea)

less sensitive can tolerate bright light



15/34

How are colours generated?

Subtractive colour system

Non-luminous objects (e.g. paper) selectively absorb and reflect different

wavelengths of light, creating the perception of colour.

Additive colour systemLuminous objects (e.g. CRT screen) generate colour by addition of

Red/Green/Blue.



16/34

Other Colour models

As well as the RGB system, a number of other descriptive models are inuse.

The most common other model is the HLS (or HSB) system

HLS describes more closely the colours that we actually can see. (Manycolours that we can see are not describable in the RGB system.)

The HLS colour model has three (3) dimensions

1. hue the basic component

2. saturation the degree to which the hue differs from a neutral gray

3. lightness indicates the level of illumination:

Brightness substitutes for Lightness in the HBS model



17/34

The HLS colour solid



18/34

Colour Principles & Guidelines

See Reading 2.1 from Mayhew for more guidelines.

have some other redundant cue

optimal combinations are known

include a bright colour in the foreground

best background black

worst background brown or green use colour sparingly, design in B&W

use colour to group/highlight information

use colour to support search tasks avoid using colour in non-task-related ways



19/34

Colour Principles & Guidelines ...

allow customisation

ensure colours differ in lightness (aids colourblind users)

limit colour to eight (8) distinct colours; four (4) preferred

avoid saturated blues for text

choose foreground and background colour with care

colours are hard to distinguish when objects are small, far apart, or close

on colour spectrum



20/34

Interaction/Dialogue Styles

Dialoguerefers to the exchange of instructions and information that takes

place between a user and a computer.

There are a number of common styles including:

command line interface

menus & navigation

natural language

question/answer & query dialog

form-fills & spreadsheets

direct manipulation (WIMP)

point & click three dimensional

We will discuss dialog design in more detail later.



21/34

Command Line Interface

operating systems DOS/UNIX

short instructions for efficiency/repetition

good for experts

poor for novices

hard to remember, so choose command names carefully

operation DOS command Unix program

directory list dir ls

display file type cat

rename file rename mv

search in file grep

relies on recallrather than recognition



22/34

Menus & Navigation

a set of options

no need to remember, only recognise options must be self-explanatory

they can take up space so we have

pull-down/pop-up/pin-up/cascading/pie

features hierarchical, short-cut, icons, dividers, disabled/invisible entries,

menu items that display a dialog . . .

design & ordering is important; ordering choices: alpha

categorical (with dividers)

convention (e.g. File -> Exit) frequency most common near the top



23/34

Menu Design Guidelines

See Reading 4.1 from Mayhew.

Menu structure

Match menu structure to task structure

Provide user customisable menu structures

Minimise menu depth at expense of breadth

Use vertical menus on full text screens

Consider pie menus

Grey-out (novice) or delete (expert) inactive menu items

Group items into semantic categories

Choose brief, consistent menu labels

Add menu choice descriptors; e.g. micro-help in status line



24/34

Menu Design Guidelines ...

Menu choice ordering

Order and group items within menu by

frequency, category, temporal order

Menu choice selection

Use pointer or mnemonic codes

Only use cursor keys for short menus

Provide default selections

Distinguish between single & multi-choice items (radio buttons vs. check

buttons)

Provide menu selection feedback



25/34

Menu Design Guidelines ...

Menu invocation

Use permanent rather than pop-up menus

Use pop-up for experienced user

Menu navigation

Use consistent menu design & appearance across application

Consider providing menu context information

Consider providing shortcuts

Provide backwards navigationone or more steps



26/34

Natural Language

speech recognition or typed natural language; problems:

speech accent, inflection

typing slow, speeling

poor for experts, vague, ambiguous

Question/Answer & Query

input is constrained ATM, wizard dialogue

good for novices but restricted functionality

next question/action depends on last answer



27/34

Form-Fills/Spreadsheets

hard-copy metaphor

used for data entry & specifying a data retrieval operation

good for novices as it is familiar (similar to paper form)

need to allow editing of errors

need to allow easy movement between fields



28/34

Direct Manipulation (WIMP)

WIMP (Windows, Icons, Menus, Pointers) systems replace typedcommands.

They have the following features:

objects are visible and directly manipulable

rapid, reversible, incremental actions

Why are these systems popular?

novices learn quickly

programs tend to have the same look and feel

based on recognition not remembering

provide immediate feedback

contain recognisable widgets, e.g. buttons, dialogs

provide a feeling of control

There are conceptual problems; e.g. the gulfsof execution and evaluation.



29/34

Windows

Windows turn a physical display into several virtual displays.

optimise display space

interact with multiple sources

interact with multiple views

enable standardisation of interaction

What if we have many active windows?

eithersome obscured hard to find

orall visible too small, much scrolling

solutions: folders, rooms, virtual screens, iconified windows . . .An application might use multiple windows to organise separate but related

information, e.g. multiple Single Document Interface vsMultiple Document

Interface.



30/34

Window Widgets

Windowsthemselves include widgets: title bars, resize controls, min/max,

panes, etc.

Menushave already been covered.

There are various controlwidgets: buttons, checkboxes, radio buttons,sliders, scroll bars, custom-built, etc.

The concept of affordanceis particularly important here.

Dialog boxesare transient windowscontaining information andinput/output fields.

Usually they require user action before they can be removed (modal)

There are various cursortypes, e.g. pointer, text, cross-hair, hourglass,

user-defined, etc.

Some have information overloaded on them. (e.g. x,y posn)



31/34

Modal and modeless dialog boxes

A dialog box is a pop-up window.

Modal

Stops users work flow as main window is inaccessible

Very annoying if it is either an informational-only message, or asking aquestion that the user cannot easily answer.

Useful in some cases; e.g. File save dialog

Modeless

Extra window co-exists with parent

Can result in many windowsjunk that must be later cleared

Does not restrict work flow (unless it claims focus)

Guideline 4.1

Use pop-up dialog boxes with care. Do you really need one? If possible, use

an alternative, such as more intelligent coding or status information.



32/34

Graphical Representation

It would be ideal if the screen presented information familiar to us from

our environment.

The problem is the high cost of real-time image generation and screen

real-estate. We can represent a whole range of interface objects and represent

differences between objects through graphical coding.

reverse video to represent the current status of objects, e.g. selectedtext

abstract shapes for different objects

colour for various options



33/34

Icons

Icons embody the idea that different people have different cognitive styles.

Some users prefer text-oriented views and some prefer graphics.

An icon is an image, picture or symbol representing a concept.

Consider these guidelines when creating or allocating icons:

represent the object or action in a familiar manner

limit the number of icons

make the icon stand out

try 3D icons

make each one clearly visible from the background

ensure icon family harmony

group icons appropriately

add information to show use, e.g. tooltips



34/34

Interactivity & Interaction Context

Interactivityis the defining feature of an interactive system, e.g. the

interface semantics and closeness to real-time interaction (speech

recognition, visualisation, menu dynamics).

In older systems, order of interaction is pre-emptive. Newer systems stillhave some of these features, e.g. modal forms.

Of course all interaction occurs in some wider social and organisational

context.

People are usually involved and there are issues of desire to impress,

competition and fear of failure.

Motivation will reduce if systems do not match requirements but new

technology may increase motivation if systems are well designed and

integrated with the users work.


notes-fp511 -chapter 1 interaction framework and ergonomics

Documents