W1:

THE HUMAN
THE COMPUTER
THE INTERFACE

EARLY
BEGINNINGS
COMPUTING IN 1945
HARVARD MARK 1
The Harvard Mark I was a large computer
designed to assist in differential equation
numerical computation. It was developed at
Harvard University by Howard Aiken and was
funded and installed by IBM. The computer (or
the IBM Automatic Sequence Controlled
Calculator (ASCC)) was known as the Harvard
Mark I.

The Harvard Mark 1 is a room-sized, relay-

based calculator. The machine had a fifty-five
feet long, eight feet in high and 5 tons in
weight.

Bellis, Mary. “Who Invented the Mark I Computer?” ThoughtCo,

www.thoughtco.com/howard-aiken-and-grace-hopper-4078389.
E. N. I. A. C.
An all-electronic calculating machine was
proposed by physicist John Mauchly in 1942.
Meanwhile, the U.S. Army needed
complicated wartime ballistics tables to be
measured.

ENIAC (Electronic Numerical Integrator And

Computer), designed between 1943 and 1945,
was the first large-scale computer to operate
without being slowed by any mechanical
components at electronic level.

“r/OldSchoolCool - ENIAC, the First Electronic General-Purpose Computer That Was Turing-Complete Was a 30-Ton
Behemoth Covering 1,800 Sq Ft, Used 20,000 Vacuum Tubes, 70,000 Resistors, 10,000 Capacitors, 1,500 Relays, 6,000
Manual Switches, Consumed 150 KW of Electricity, and Required Six Women Programmers (c. 1940s).” Reddit,
www.reddit.com/r/OldSchoolCool/comments/iotlf3/eniac_the_first_electronic_generalpurpose/.
P.D.P -1
The PDP-1 (Programmed Data Processor-1)
computer build in 1959.
It was the first consumer computer that
concentrated on user interaction instead
of the productive use of computer
process.

The first computer game is generally

assumed to be the game Spacewar!,
developed in 1962 at MIT (Stephen
Russell a.o.). Spacewar originally ran on a
PDP-1 computer the size of a large car.

“Alan Kotok, Steve Russell, Martin ‘Shag’ Graetz Play Spacewar! at the Computer Museum, Boston.” Alan Kotok, Steve
Russell, Martin "Shag" Graetz Play Spacewar! at the Computer Museum, Boston | PDP-1 Restoration Project |
Computer History Museum, www.computerhistory.org/pdp-1/6a210c1a96e2ed4f4ffa5492d5128d83/.
GRACE MURRAY HOPPER
The American computer scientist and
rear admiral of the United States
Navy was Grace Brewster Murray
Hopper.

She was one of the first Harvard Mark

I computer programmers and a
computer programming pioneer who
invented one of the first links.

Jasper, Marykate, and By. “Google Is Working on a Movie About Grace Hopper.”
The Mary Sue, 28 Feb. 2018, www.themarysue.com/google-is-working-on-a-
movie-about-grace-hopper/.
 WHAT
• MECHANICAL
• POOR FEEDBACK
• SPECIALIST USE

INTERACTION •
•
PROCESS CONTROL
CALCULATIONS

DID YOU SEE • NO INTENTION TO ADDRESS

THE MASS MARKET
DEVELOPMENT
• EXTREMELY DIFFICULT TO USE
• LARGE AND EXPENSIVE
• “PEOPLE TIME” (LABOUR)
• USED BY SPECIALISTS
• NO KNOWLEDGE ABOUT HOW
TO MAKE USE EASIER
WHAT IS
Human-computer interaction (HCI)
is a collaborative area of research
that focuses on computer
technology development and, in
particular, human (user) interaction

HCI
with computers.

HCI has since grown to include almost all aspects

of information technology design, although it was
originally concerned with computers.
 HUMAN COMPUTER
INTERACTION -DEFINITION
 PSYCHOLOGY

ENGINEERING DESIGN

COMPUTER COGNITIVE
SCIENCE PSYCHOLOGY

HCI HUMAN COMPUTER

FACTORS SCIENCE

HCI

SEMIOTICS
LANGUAGE
PHILOSOPHY

FINE ARTS &

DESIGN

ETHNOGRAPHY
SOCIOLOGY
USER RESEARCH

DISCIPLINES-CONTRIBUTING TO HCI
 PRINCIPLE OF HCI (USABILITY)
USEFUL
• Accomplish what is required
(functional, does things)

USABLE
• Do it easily and naturally without error
(does the right things)

USED
• Make people want to use it
(be attractive, acceptable to org.)
The

HUMAN
A person’s interaction with the outside world
occurs through information being received and
sent: input and output.
In an interaction with a computer the user
receives information that is output by the
computer, and responds by providing input to the
computer – the user’s output becomes the
computer’s input and vice versa.
 The human

WHY DO WE  Humans are limited in their

capacity to process information.

NEED TO  This has important implications

for design.

UNDERSTAND  Interacting with technology is

cognitive

HUMAN IN  Human Information Processing is

referred to as cognition

HCI
 The human

INPUT–OUTPUT CHANNELS
Human vision is a highly complex The third and last of the senses that
activity with a range of physical and we will consider is touch or haptic
perceptual limitations, yet it is the perception. Although this sense is
primary source of information for the often viewed as less important than
average person. sight or hearing, imagine life without it.

The sense of hearing is often Before leaving this section on the

considered secondary to sight, but human’s input–output channels, we
we tend to underestimate the need to consider motor control and
amount of information that we how the way we move affects our
receive through our ears. interaction with computers.

VISION · HEARING · TOUCH · MOVEMENT

 The human

What Do You See?

The Ponzo illusion is an
optical illusion that was first
A demonstrated by the Italian
psychologist Mario Ponzo
(1882-1960) in 1913.
He suggested that the human mind judges an
. object's size based on its background.
He showed this by drawing two identical lines
B across a pair of converging lines, similar to
railway tracks.

https://psychology.wikia.org/
 The human

What Do You See?

The Muller-Lyer illusion is a well-
known optical illusion in which two
lines of the same length appear to be
A of different lengths. The illusion was
.
first created by a German
B psychologist named Franz Carl
.a Muller-Lyer in 1889.

C Muller-Lyer illusion is that our brains perceive the

depths of the two shafts based upon depth cues.
When the fins are pointing in toward the shaft of
the line, we perceive it as sloping away much like
the corner of a building.

https://www.verywellmind.com/
 The human

What is human memory?

Memory refers to the Sensory Memory
Iconic |Echoic|Haptic
processes that are used to
acquire, store, retain, and Attention

later retrieve information.

Short-term Memory
(Working Memory)
Information is stored in memory:
• Sensory Memory
• Short-term (Working) Memory Rehearsal
• Long-term Memory.
Long-term Memory
 The human
INFORMATION IS STORED IN MEMORY
sensory memory short-term memory long-term memory
The sensory memories act as buffers for Short-term memory or working memory If short-term memory is our working
stimuli received through the senses. acts as a ‘scratch-pad’ for temporary memory or ‘scratch-pad’, long-term
recall of information. It is used to store memory is our main resource.
A sensory memory exists for each information which is only required
sensory channel: iconic memory for fleetingly. Here we store factual information,
visual stimuli, echoic memory for aural experiential knowledge, procedural
stimuli and haptic memory for touch. Short-term memory can be accessed rules of behavior – in fact, everything
rapidly, in the order of 70 ms. However, that we ‘know’.
These memories are constantly it also decays rapidly, meaning that
overwritten by new information coming information can only be held there Unlike working memory there is little
in on these channels. temporarily, in the order of 200 ms. decay: long-term recall after minutes is
the same as that after hours or days.

Attention is the concentration of the mind on one out of a A rehearsal strategy uses repeated practice of information
number of competing stimuli or thoughts. It is clear that to learn it. When a student is presented with specific
we are able to focus our attention selectively, choosing to information to be learned, such as a list, often he will
attend to one thing rather than another. This is due to the attempt to memorize the information by repeating it over
limited capacity sensory and mental processes and over.
The

computer
In order to understand how humans interact with
computers, we need to have an understanding of
both parties in the interaction. The previous
chapter explored aspects of human capabilities
and behavior of which we need to be aware in the
context of human–computer interaction;
This chapter considers the computer and
associated input–output devices and investigates
how the technology influences the nature of the
interaction and style of the interface.
 The computer

A computer system comprises various elements,

each of which affects the user of the system.

INPUT/OUTPUT · INTERACTION · VIRTUAL REALITY · MEMORY · PROCESSOR

 The computer

Input device
Input devices are the
hardware devices which
take information from user
of the computer system,
convert it into electrical
signals and transmit it to the
processor.
 The computer

output device
It is used to present
information to the user from
a computer.

Output devices take data

from the computer system
and convert it to a form that
can be read by humans.
 The computer

COMPUTER MEMORY
Computer memory is a generic term for all of the different types of
data storage technology that a computer may use, including RAM,
ROM, and flash memory.

COMPUTER MEMORY

PRIMARY MEMORY SECONDARY MEMORY

RAM ROM HDD SSD

OTHER FLASH STORAGE DEVICE

 The computer

SHORT TERM MEMORY

RANDOM ACCESS MEMORY
Random Access Memory is your
system's short-term data storage;
it stores the information your
computer is actively using so that
it can be accessed quickly.

The more programs your system

is running, the more memory
you'll need.
 The computer

LONG TERM MEMORY

ROM (READ-ONLY MEMORY).
It refers to computer memory chips
containing permanent or semi-permanent
data.

Used to store the start-up instructions for a

computer, also known as the firmware.

ROM is non-volatile; even after you turn off

your computer, the contents of ROM will
remain. ROM is mostly used for firmware
updates.
 The computer

LONG TERM MEMORY

HARD DISK DRIVE (HDD)
Hard disk drive, is a magnetic
storage device that is installed
inside the computer.

SOLID-STATE DRIVE (SSD)

Uses integrated circuit assemblies
to store data persistently, typically
using flash memory,
 The computer

OPTICAL DRIVE READ ONLY MEMORY (ROM)

Read only memory media that is pre-recorded.

is a storage device that uses lasers to read

data on the optical media.

RECORDABLE (R)
Recordable media that can be recorded once.

REWRITABLE (RW)
Rewritable media that can be recorded, erased,
and recorded
The
INTERACTION
Interaction models help us to understand what is
going on in the interaction between user and
system.
They address the translations between what the
user wants and what the system does.
 The interaction

Interaction Paradigms
1950’S BATCH PROCESSING
1960’S TIMESHARING
1970’S NETWORKING (1972 1ST EMAIL)
1980’S GRAPHICAL DISPLAY
MICROPROCESSOR
1990’S WWW
1995’S GRID/CLOUDS COMPUTING
THIS ERA … HUMAN ROBOT INTERACTION
TABLET/TABLE TOP COMPUTING
 The interaction

Types of user interfaces

COMMAND LINE INTERFACE
• Expressing instructions to the computer directly
• Use function keys, single characters, short
abbreviations, whole words, or a combination

• Suitable for repetitive tasks

• Better for expert users than novices
• Offers direct access to system functionality
• Command abbreviations should be meaningful!
 The interaction

Types of user interfaces

MENU INTERFACE
• Set of options displayed on the screen
• less recall - easier to use
• rely on recognition so names should be meaningful

• Selection by:
• numbers, letters, arrow keys, mouse combination
• Often (frequent) options hierarchically grouped
• Restricted form of full WIMP system
 The interaction

Types of user interfaces

NATURAL 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

SIRI 2011 · CORTANA & ALEXA 2014 · GOOGLE 2016 · BIXBY 2017
 The interaction

Types of user interfaces

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
 The interaction

Types of user interfaces

FORM-FILLS INTERFACE
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires
• good design
• obvious correction facilities
 The interaction

Types of user interfaces

SPREADSHEETS INTERFACE
• 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
 The interaction

Types of user interfaces

WIMP INTERFACE
• Windows, Icon, Mice, and Pointer
• or windows, icons, mice, and pull-down menus!
• default style for majority of interactive computer
systems, especially PCs and desktop machines

POINT AND CLICK INTERFACE

• Used in ..
• Multimedia, web browsers and hypertext
• Minimal typing
• Use in ATM’s
 The interaction

Types of user interfaces

THREE DIMENSIONAL INTERFACES
• Virtual reality
• ‘ordinary’ window systems
• highlighting visual
• 3D workspaces
• use for extra virtual space
• light and occlusion give depth
• distance effects