Human Computer Interaction

(CNSCC.202)

Lecture 4 The Interaction

Dr. Muhammad Azhar Iqbal
Lancaster University, UK

Acknowledgements: Damian Arellanes, Jiangtao Wang

Recap – Lecture 1
• What is HCI?
• discipline – design, evaluation and implementation of interactive
computing systems for human use and the study of major
phenomena surrounds them.
• What HCI involves?
• (understanding users/problems, designing solutions, evaluate user
behaviour)
• UI + UX
• Key components of HCI
• (Human, Computer, Interface)
• Why HCI is important?
• Economical, Social, and System View
• Timeline of significant events
• Vannevar Bush to MAC/Windows System.
Recap Lecture 2 – Humans
• Humans as users share common capabilities but are
individuals with differences. Individuals are limited in
their capacity to process information.
• Input and Output channels
• (visual channel, auditory channel, haptic channel,
movement)
• Information is stored in memory
• (sensory memory, short-term (working) memory, long-
term memory)
• Information is processed and applied
• (Reasoning, problem solving, skill acquisition, error)
• Emotion influences human capabilities
Recap Lecture 3 – Computers
• Typical Computer Architecture
• Types of Computers
• Input/Output Devices
• Text Entry Devices (keyboards, chorded keyboards, phone pads,
handwriting, speech)
• Positioning, Pointing and Drawing (mouse, touchpad
touch screens, tablets, eyegaze, cursors)
• Display Devices (bitmap screens (CRT & LCD), large & situated
displays digital paper)
• virtual reality and 3D interaction (positioning in 3D space
moving and grasping seeing 3D (helmets and caves))
• Physical controls, sensors etc. (sound, touch, feel, smell
• physical controls environmental and bio-sensing)
• Memory and Processing
• (STM, LTM, High processing speed)
What is interaction?

We have learned

“Human” in Lecture 2;

“Computer” in Lecture 3;

Human and Computer – Not isolated

communication
user system
Key points of the interaction

• interaction models
• translations between user and system

• interaction styles
• the nature of user/system dialog

• Ergonomics (human factors)

• physical characteristics of interaction
Today’s Lecture
• Interaction Models
• (terms of interaction, Norman model
(Execution/Evaluation Loop), Interaction Framework)

• Interaction Styles
• (command line interface, menus, natural language,
question/answer and query dialogue, form-fills and
spreadsheets, WIMP, point and click, three–dimensional
interfaces)

• Ergonomics
• Physical aspects of interface
models of interaction

terms of interaction
Norman model
interaction framework
Some terms of interaction

domain – the area of work under study

e.g. graphic design
goal – what you want to achieve
e.g. create a solid red triangle
task – how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle

System’s language: core language

User’s language: task language
Donald Norman’s model
• Seven stages
• establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

• Norman’s model concentrates on user’s view

of the interface
execution/evaluation loop

goal
execution evaluation
system

• 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 evaluation
system

• 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 evaluation
system

• 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 evaluation
system

• 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

extension of Norman…
their interaction framework has 4 parts O
• U: user output
• I: input S U
• S: system core task

• O:output I
input

each has its own unique language

interaction  translation between languages

problems in interaction = problems in translation

 interaction styles

dialogue … computer and user

distinct styles of interaction

Common interaction styles

• command line interface

• menus
• natural language
• question/answer and query dialogue
• form-fills and spreadsheets
• WIMP
• point and click
• three–dimensional interfaces
Command line interface

• Way of expressing instructions to the computer directly

• function keys, single characters, short abbreviations, whole
words, or a combination

• suitable for repetitive tasks

• better for expert users than non-experts
• offers direct access to system functionality
• command names should be meaningful!

Typical example: the Unix system

Menus

• Set of options displayed on the screen

• Options visible
• less recall - easier to use
• rely on recognition so names should be meaningful
• Selection by:
• numbers, letters, arrow keys, mouse
• combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
• sensible grouping is needed
Natural language

• Familiar to user
• speech recognition or typed natural
language
• Problems
• Vague
• ambiguous
• hard to do well!
• Solutions
• try to understand a subset (domain-based)
• Chatting robot in a certain domain
• pick on keywords
Query interfaces

• 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-fills

• Primarily for data entry or data retrieval

• Screen like paper form.
• Data put in relevant place
• Requires
• good design
• obvious correction
facilities
Spreadsheets

• 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
e.g. sum of all cells in this column
• user can enter and alter data spreadsheet maintains
consistency
WIMP Interface

Windows
Icons
Menus
Pointers

… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive computer systems,

especially PCs and desktop machines

https://www.youtube.com/watch?v=QKxhJtGSRVA&t=38s
Windows
• Areas of the screen that behave as if they were independent
• can contain text or graphics
• can be moved or resized
• can overlap and obscure each other, or can be laid out next to
one another (tiled)

• scrollbars
• allow the user to move the contents of the window up and down
or from side to side
• title bars
• describe the name of the window
Icons

• small picture or image

• represents some object in the interface

• often a window or action

• icons can be many and various

• highly stylized
• realistic representations.
Pointers

• important component
• WIMP style relies on pointing and selecting things
• uses mouse, cursor keys or keyboard shortcuts
• wide variety of graphical images
Let Us Talk More about Menus

• Choice of operations or services offered on the screen

• Required option selected with pointer

problem – take a lot of screen space

solution – pop-up: menu appears when needed
Menus design issues

• which kind to use

• what to include in menus at all

• words to use (action or description)

• how to group items (logic counts !)

• choice of keyboard accelerators

Buttons

• individual and isolated regions within a display

that can be selected to invoke an action

• Special kinds
• radio buttons
– set of mutually exclusive choices
• check boxes
– set of non-exclusive choices
Toolbars

• long lines of icons …

… but what do they do?

• fast access to common actions

• often customizable (different users have

different preference):
• choose which toolbars to see
• choose what options are on it
Dialogue boxes

• information windows that pop up to inform

of an important event or request
information.

e.g: when saving a file, a dialogue box is

displayed to allow the user to specify the
filename and location. Once the file is saved, the
box disappears.
Point and click interfaces

• used in ..
• multimedia
• web browsers
• hypertext

• just click something!

• icons, text links or location on map

• minimal typing
Three dimensional interfaces

• virtual reality
• ‘ordinary’ window systems
• highlighting flat buttons …

• visual affordance
• 3D workspaces
• use for extra virtual space … or sculptured
• light and occlusion give depth
• distance effects
 ergonomics

physical aspects of interfaces

Ergonomics (human factors)

• 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
Ergonomics - examples
• arrangement of controls and displays
e.g. controls grouped according to function or
frequency of use
• surrounding environment
e.g. seating arrangements adaptable to cope with
all sizes of user
• health issues
e.g. physical position, environmental conditions
(temperature, humidity), lighting and noise
• use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
End of This Lecture