USER INTERFACE

DESIGN
HCI FOUNDATION
OVERVIEW
▪ The Human
▪ The Computer
▪ The Interaction
▪ Paradigms for Interaction
 HUMAN-COMPUTER
INTERACTION
Human-computer interaction
(HCI) is a multidisciplinary field
of study focusing on the design of
computer technology and, in
particular, the interaction
between humans (the users) and
computers.
EXAMPLE
EXAMPLE
EXAMPLE
EXAMPLE
EXAMPLE
EXAMPLE
THE HUMAN
 THE HUMAN
▪ Information i/o …
▪ visual, auditory, haptic, movement

▪ Information stored in memory

▪ sensory, short-term, long-term

▪ Information processed and applied

▪ reasoning, problem solving, skill, error

▪ Emotion influences human capabilities

▪ Each person is different
 INFORMATION I/O
▪ Vision

▪ Two stages in vision

▪ Physical reception of stimulus

▪ Processing and interpretation of stimulus

 PHYSICAL RECEPTION OF
STIMULUS
▪ EYE
▪ Mechanism for receiving light and transforming it into electrical
energy

▪ Light reflects from objects and images are focused upside-down

on retina

▪ Ganglion cells (brain!) detect pattern and movement

 INTERPRETING THE SIGNAL
▪ Size and depth
▪ Brightness
▪ Colour
▪ Reading
▪ Hearing
▪ Touch
▪ Movement
 INTERPRETING THE SIGNAL
▪ Size and depth
▪ visual angle indicates how much of view object
occupies
▪ visual acuity is ability to perceive detail
▪ familiar objects perceived as constant size
▪ cues like overlapping help perception of size and depth
 INTERPRETING THE SIGNAL
▪ Brightness
▪ subjective reaction to levels of light
▪ affected by luminance of object
▪ measured by just noticeable difference
▪ visual acuity increases with luminance as does flicker
 INTERPRETING THE SIGNAL
▪ Colour
▪ made up of hue, intensity, saturation
▪ cones sensitive to colour wavelengths
▪ blue acuity is lowest
▪ 8% males and 1% females colour blind
 INTERPRETING THE SIGNAL
▪ Reading
▪ visual pattern perceived
▪ decoded using internal representation of language
▪ interpreted using knowledge of syntax, semantics,
pragmatics
▪ Word shape is important to recognition
 INTERPRETING THE SIGNAL
▪ Hearing
▪ Humans can hear frequencies from 20Hz to 15kHz
▪ Sound
▪ pitch – sound frequency
▪ loudness – amplitude
▪ timbre – type or quality
▪ Auditory system filters sounds
▪ can attend to sounds over background noise.
 INTERPRETING THE SIGNAL
▪ Touch
▪ Provides important feedback about environment.
▪ May be key sense for someone who is visually impaired.
▪ Stimulus received via receptors in the skin:
▪ thermoreceptors – heat and cold
▪ nociceptors – pain
▪ mechanoreceptors – pressure
 INTERPRETING THE SIGNAL
▪ Movement
▪ Time taken to respond to stimulus:
Reaction time + Movement time
▪ Movement time dependent on age, fitness etc.

▪ Reaction time - dependent on stimulus type:

▪ visual ~ 200ms
▪ auditory ~ 150 ms
▪ pain ~ 700ms
There are three types of memory function:
MEMORY
Sensory memories

Short-term memory or working memory

Long-term memory

Selection of stimuli governed by level of arousal.

 SENSORY MEMORY
▪ Sensory memory is a very brief memory that allows people to retain
impressions of sensory information after the original stimulus has
ceased.

▪ It is often thought of as the first stage of memory that involves

registering a tremendous amount of information about the
environment, but only for a very brief period.

▪ Examples
▪ Stereo sound
 SHORT-TERM MEMORY (STM)

▪ Short-term memory (STM) refers to systems which provide

retention of limited amounts of material for a limited time
period (seconds).

▪ Limited capacity - 7± 2 chunks

SHORT-TERM MEMORY
(STM)
212348278493202

0121 414 2626

HEC ATR ANU PTH ETR EET

 LONG-TERM MEMORY (LTM)
▪ Repository for all our knowledge
▪ slow access ~ 1/10 second
▪ slow decay, if any
▪ huge or unlimited capacity

▪ Two types
▪ episodic – serial memory of events
▪ semantic – structured memory of facts, concepts, skills
LONG-TERM MEMORY (LTM)
 THINKING
▪ Reasoning
▪ Deduction,
▪ Induction,
▪ Abduction

▪ Problem solving
▪ Errors and mental models
 DEDUCTIVE REASONING
▪ It is the process of reasoning from one or more statements (premises)
to reach a logical conclusion.

▪ Eg:
1. Everyone who eats carrots is a quarterback.
2. John eats carrots.
3. Therefore, John is a quarterback.

▪ Logical conclusion not necessarily true:

 INDUCTIVE REASONING
▪ Inductive reasoning is a method of reasoning in which the premises are viewed as
supplying some evidence, but not full assurance, of the truth of the conclusion.

▪ Example:
1. 90% of graduates from Excelsior Preparatory school go on to University.
2. Bob is a graduate of Excelsior Preparatory school.
3. Therefore, Bob will go on to University.

▪ This is a statistical syllogism. Even though one cannot be sure Bob will attend
university, we can be fully assured of the exact probability for this outcome.
 ABDUCTIVE REASONING
▪ Reasoning from event to cause
● e.g. Sam drives fast when drunk.
● If I see Sam driving fast, assume drunk.

▪ Unreliable:
▪ can lead to false explanations
 PROBLEM SOLVING
▪ Process of finding solution to unfamiliar task using knowledge.
 ERRORS
Types of error
▪ slips
▪ right intention, but failed to do it right
▪ causes: poor physical skill,inattention etc.
▪ change to aspect of skilled behaviour can cause slip

▪ mistakes
▪ wrong intention
▪ cause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur
 EMOTION
▪ Various theories of how emotion works

▪ James-Lange: emotion is our interpretation of a physiological

response to a stimuli
▪ Cannon: emotion is a psychological response to a stimuli
▪ Schacter-Singer: emotion is the result of our evaluation of our
physiological responses, in the light of the whole situation we are in
▪ Emotion clearly involves both cognitive and physical
responses to stimuli
 EMOTION
▪The biological response to physical stimuli is called
affect
Affect influences how we respond to situations
▪ positive → creative problem solving
▪ negative → narrow thinking

“Negative affect can make it harder to do even easy tasks; positive

affect can make it easier to do difficult tasks”
(Donald Norman)
 INDIVIDUAL DIFFERENCES
▪ long term
– sex, physical and intellectual abilities
▪ short term
– effect of stress or fatigue
▪ changing
– age

Ask yourself:
will design decision exclude section of user population?
THE COMPUTER
 THE COMPUTER
●A computer system is made up of various elements each of
these elements affects the interaction

▪ Input devices – text entry and pointing

▪ Output devices – screen (small&large), digital paper
▪ Virtual reality – special interaction and display devices
▪ Physical interaction – e.g. sound, haptic, bio-sensing
▪ Paper – as output (print) and input (scan)
▪ Memory – RAM & permanent media, capacity & access
▪ Processing – speed of processing, networks
 INTERACTING WITH
COMPUTERS
to understand human–computer interaction
… need to understand computers!

what goes in and out

devices, paper,
sensors, etc.

what can it do?

memory, processing,
networks
 A ‘TYPICAL’ COMPUTER
? SYSTEM
▪ screen, or monitor, on which there are windows
▪ keyboard
▪ mouse/trackpad

▪ variations
▪ desktop
▪ laptop
▪ PDA

the devices dictate the styles of interaction that the system supports
If we use different devices, then the interface will support a different style of interaction
 HOW MANY COMPUTERS …
in your house? in your pockets?
▪ PC ▪ PDA
▪ TV, VCR, DVD, HiFi, cable/satellite ▪ phone, camera
TV ▪ smart card, card with magnetic
▪ microwave, cooker, washing strip?
machine ▪ electronic car key
▪ central heating ▪ USB memory
▪ security system

try your pockets and bags

can you think of more?
 INTERACTIVITY?
Long ago in a galaxy far away … batch processing
▪ punched card stacks or large data files prepared
▪ long wait ….
▪ line printer output
… and if it is not right …

Now most computing is interactive

▪ rapid feedback
▪ the user in control (most of the time)
▪ doing rather than thinking …

Is faster always better?

RICHER INTERACTION

sensors
and devices
everywhere
 TEXT ENTRY DEVICES
Keyboards (QWERTY et al.), chord keyboards, phone pads,
handwriting, speech.

QWERTY KEYBOARD SPECIAL KEYOARD

 TEXT ENTRY DEVICES
PHONE PAD
CHORD KEYBOARD
 TEXT ENTRY DEVICES
PHONE PAD
CHORD KEYBOARD
HANDWRITING RECOGNITION
▪ Text can be input into the computer, using a pen and a digesting tablet
▪ natural interaction

▪ Technical problems:
▪ capturing all useful information - stroke path, pressure, etc. in a natural manner
▪ segmenting joined up writing into individual letters
▪ interpreting individual letters
▪ coping with different styles of handwriting

▪ Used in PDAs, and tablet computers …

… leave the keyboard on the desk!
SPEECH RECOGNITION
▪ Improving rapidly

▪ Most successful when:

▪ single user – initial training and learns peculiarities
▪ limited vocabulary systems

▪ Problems with
▪ external noise interfering
▪ imprecision of pronunciation
▪ large vocabularies
▪ different speakers
POSITIONING, POINTING AND
DRAWING
▪ Mouse,
▪ Touchpad
▪ Trackballs,
▪ Joysticks.
▪ Touch screens,
▪ Tablets
▪ Eyegaze.
DISPLAY DEVICES
▪Bitmap screens (CRT & LCD)
▪large & situated displays
▪Digital paper
BITMAP DISPLAYS
▪ screen is vast number of coloured dots
CATHODE RAY TUBE
▪ Stream of electrons emitted from electron gun, focused and directed by magnetic
fields, hit phosphor-coated screen which glows
▪ used in TVs and computer monitors
HEALTH HAZARDS OF CRT !
▪ X-rays: largely absorbed by screen (but not at rear!)
▪ UV- and IR-radiation from phosphors: insignificant levels
▪ Radio frequency emissions, plus ultrasound (~16kHz)
▪ Electrostatic field - leaks out through tube to user. Intensity
dependant on distance and humidity. Can cause rashes.
LIQUID CRYSTAL DISPLAYS
▪ Smaller, lighter, and … no radiation problems.

▪ Found on PDAs, portables and notebooks,

… and increasingly on desktop and even for home TV

▪ also used in dedicted displays:

digital watches, mobile phones, HiFi controls

▪ How it works …
▪ Top plate transparent and polarised, bottom plate reflecting.
▪ Light passes through top plate and crystal, and reflects back to eye.
▪ Voltage applied to crystal changes polarisation and hence colour
▪ N.B. light reflected not emitted => less eye strain
PHYSICAL CONTROLS,
SENSORS ETC.
▪ Special displays and gauges
▪ Sound, touch, feel, smell
▪ Physical controls
▪ Environmental and bio-sensing
PHYSICAL CONTROLS
▪ specialist controls needed …
▪ industrial controls, consumer products, etc.

easy-clean
smooth buttons

multi-function
control
large buttons
clear dials

tiny buttons
ENVIRONMENT AND
BIO-SENSING
▪ sensors all around us
▪ car courtesy light – small switch on door
▪ ultrasound detectors – security, washbasins
▪ RFID security tags in shops
▪ temperature, weight, location

▪ … and even our own bodies …

▪ iris scanners, body temperature, heart rate, galvanic skin response, blink rate
PAPER: PRINTING AND SCANNING

▪ Print technology
▪ Fonts,
▪ Page description,
▪ Scanning,
▪ OCR
PRINTING
▪ image made from small dots
▪ allows any character set or graphic to be printed,

▪ critical features:
▪ resolution
▪ size and spacing of the dots
▪ measured in dots per inch (dpi)
▪ speed
▪ usually measured in pages zper minute
▪ cost!!
TYPES OF DOT-BASED
PRINTERS
▪ dot-matrix printers
▪ use inked ribbon (like a typewriter
▪ line of pins that can strike the ribbon, dotting the paper.
▪ typical resolution 80-120 dpi

▪ ink-jet and bubble-jet printers

▪ tiny blobs of ink sent from print head to paper
▪ typically 300 dpi or better .

▪ laser printer
▪ like photocopier: dots of electrostatic charge deposited on drum, which picks up toner
(black powder form of ink) rolled onto paper which is then fixed with heat
▪ typically 600 dpi or better.
FONTS
▪ Font – the particular style of text

Courier font
Helvetica font
Palatino font
Times Roman font
▪ ♣×∝≡↵ℜ€⊗↵~€ (special symbol)

▪ Size of a font measured in points (1 pt about 1/72”)

(vaguely) related to its height
This is ten point Helvetica
This is twelve point
This is fourteen point
This is eighteen point
and this is twenty-four point
SCANNERS
▪ Take paper and convert it into a bitmap

▪ Two sorts of scanner

▪ flat-bed: paper placed on a glass plate, whole page converted into bitmap
▪ hand-held: scanner passed over paper, digitising strip typically 3-4” wide

▪ Shines light at paper and note intensity of reflection

▪ colour or greyscale

▪ Typical resolutions from 600–2400 dpi

OPTICAL CHARACTER
RECOGNITION
▪ OCR converts bitmap back into text
▪ different fonts
▪ create problems for simple “template matching” algorithms
▪ more complex systems segment text, decompose it into lines and arcs, and decipher
characters that way
▪ page format
▪ columns, pictures, headers and footers
MEMORY
▪ Short term (RAM)
▪ Long term (DISC)
▪ Speed,
▪ Capacity,
▪ Compression
▪ Formats,
▪ Access
THE INTERACTION
THE INTERACTION
▪ Interaction models
▪ translations between user and system

▪ Ergonomics
▪ physical characteristics of interaction

▪ Interaction styles
▪ the nature of user/system dialog

▪ Context
▪ social, organizational, motivational
WHAT IS INTERACTION?
communication

user  system
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
DONALD NORMAN’S MODEL
▪ Seven stages
▪ 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

▪ Norman’s model concentrates on user’s view of the interface

 EXECUTION/EVALUAT
ION 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/EVALUAT
ION 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/EVALUAT
ION 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/EVALUAT
ION 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
ERGONOMICS
▪ 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, or sequentially
▪ 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, noise,
▪ Use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
INDUSTRIAL INTERFACES
Office interface vs. industrial interface?

Context matters!

office industrial
type of data textual numeric
rate of change slow fast
environment clean dirty
INDIRECT MANIPULATION
▪ office– direct manipulation
▪ user interacts
with artificial world system

▪ industrial – indirect manipulation

▪ user interacts
with real world
through interface
interface plant
▪ issues ..
▪ feedback immediate
▪ delays feedback

instruments
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 novices
▪ Offers direct access to system functionality
▪ Command names/abbreviations 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

▪ Restricted form of full WIMP system

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
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
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
click
▪ indiscriminate use
just confusing! me!
▪ 3D workspaces … or sculptured
▪ use for extra virtual space
▪ light and occlusion give depth
▪ distance effects
EXPERIENCE, ENGAGEMENT
AND FUN
▪Designing experience
▪Physical engagement
▪Managing value
EXPERIENCE?
▪ home, entertainment, shopping
▪ not enough that people can use a system
▪ they must want to use it!

▪ psychology of experience
▪ flow
▪ balance between anxiety and boredom

▪ education
▪ zone of proximal development
▪ things you can just do with help

▪ wider ...
▪ literary analysis, film studies, drama
DESIGNING EXPERIENCE

▪ Real crackers
▪ cheap and cheerful!
▪ bad joke, plastic toy, paper hat
▪ pull and bang
DESIGNING EXPERIENCE

▪ virtual crackers
▪ cheap and cheerful
▪ bad joke, web toy, cut-out mask
▪ click and bang
DESIGNING EXPERIENCE

▪ virtual crackers
▪ cheap and cheerful
▪ bad joke, web toy, cut-out mask
▪ click and bang
HOW CRACKERS
WORK fill in web form

sender receive email recipient

To: wxv
From: ..

closed
cracker page

watches open recipient clicks

progress message cracker opens ...
very slowly
open
cracker page
sender joke
links

web toy
mask
THE CRACKERS EXPERIENCE
Real cracker Virtual cracker
● Surface elements
Design cheap and cheerful simple page/graphics
Play plastic toy and joke web toy and joke
Dressing up paper hat mask to cut out
● Experienced effects
Shared offered to another sent by email message
sender can't see content until opened by
Co-experience pulled together
recipient
Excitement cultural connotations recruited expectation
Hiddenness contents inside first page - no contents
Suspense pulling cracker slow ... page change
Surprise bang (when it works) WAV file (when it works)
PHYSICAL DESIGN
▪ Many constraints:
▪ Ergonomic – minimum button size
▪ Physical – high-voltage switches are big
▪ Legal and safety – high cooker controls
▪ Context and environment – easy to clean
▪ Aesthetic – must look good
▪ Economic – … and not cost too much!
PARADIGMS
WHY STUDY PARADIGMS
Concerns
▪ how can an interactive system be developed to ensure its usability?
▪ how can the usability of an interactive system be demonstrated or measured?

History of interactive system design provides paradigms for usable designs

WHAT ARE PARADIGMS
▪ Predominant theoretical frameworks or scientific world views
▪ e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics

▪ Understanding HCI history is largely about understanding a series of

paradigm shifts
▪ Not all listed here are necessarily “paradigm” shifts, but are at least candidates
▪ History will judge which are true shifts
PARADIGMS OF INTERACTION
New computing technologies arrive,
creating a new perception of the
human—computer relationship.
We can trace some of these shifts in
the history of interactive technologies.
THE INITIAL PARADIGM
▪ Batch processing

Impersonal computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
▪ Time-sharing

Interactive computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
@#$% !
▪ Timesharing
▪ Networking

???

Community computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing C…P… Move this
filename file here,
▪ Timesharing dot star… or and copy this
▪ Networking was to there.
it R…M?
▪ Graphical displays
% foo.bar
ABORT
dumby!!!

Direct manipulation
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
▪ Timesharing
▪ Networking
▪ Graphical display
▪ Microprocessor

Personal computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
▪ Timesharing
▪ Networking
▪ Graphical display
▪ Microprocessor
▪ WWW

Global information
EXAMPLE PARADIGM SHIFTS
• Batch processing ▪ A symbiosis of physical and
electronic worlds in service
• Timesharing of everyday activities.
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous
Computing
TIME-SHARING
▪ 1940s and 1950s – explosive technological growth

▪ 1960s – need to channel the power

▪ J.C.R. Licklider at ARPA

▪ single computer supporting multiple users

VIDEO DISPLAY UNITS
▪ more suitable medium than paper

▪ 1962 – Sutherland's Sketchpad

▪ computers for visualizing and manipulating data

▪ one person's contribution could drastically change the history of

computing
PROGRAMMING TOOLKITS
▪ Engelbart at Stanford Research Institute

▪ 1963 – augmenting man's intellect

▪ 1968 NLS/Augment system demonstration

▪ the right programming toolkit provides building blocks to producing

complex interactive systems
PERSONAL COMPUTING
▪ 1970s – Papert's LOGO language for simple graphics programming
by children

▪ A system is more powerful as it becomes easier to user

▪ Future of computing in small, powerful machines dedicated to the

individual

▪ Kay at Xerox PARC – the Dynabook as the ultimate personal

computer
WINDOW SYSTEMS AND THE
WIMP INTERFACE
▪ humans can pursue more than one task at a time

▪ windows used for dialogue partitioning, to “change the topic”

▪ 1981 – Xerox Star first commercial windowing system

▪ windows, icons, menus and pointers now familiar interaction

mechanisms
METAPHOR
▪ relating computing to other real-world activity is effective teaching
technique
▪ LOGO's turtle dragging its tail
▪ file management on an office desktop
▪ word processing as typing
▪ financial analysis on spreadsheets
▪ virtual reality – user inside the metaphor

▪ Problems
▪ some tasks do not fit into a given metaphor
▪ cultural bias
DIRECT MANIPULATION
▪ 1982 – Shneiderman describes appeal of graphically-based
interaction
▪ visibility of objects
▪ incremental action and rapid feedback
▪ reversibility encourages exploration
▪ syntactic correctness of all actions
▪ replace language with action

▪ 1984 – Apple Macintosh

▪ the model-world metaphor
▪ What You See Is What You Get (WYSIWYG)
LANGUAGE VERSUS ACTION
▪ actions do not always speak louder than words!
▪ DM – interface replaces underlying system
▪ language paradigm
▪ interface as mediator
▪ interface acts as intelligent agent
▪ programming by example is both action and language
HYPERTEXT
▪ 1945 – Vannevar Bush and the memex

▪ key to success in managing explosion of information

▪ mid 1960s – Nelson describes hypertext as non-linear browsing

structure

▪ hypermedia and multimedia

▪ Nelson's Xanadu project still a dream today

MULTIMODALITY
▪ a mode is a human communication channel

▪ emphasis on simultaneous use of multiple channels for input and output

COMPUTER SUPPORTED
COOPERATIVE WORK (CSCW)
▪ CSCW removes bias of single user / single computer system

▪ Can no longer neglect the social aspects

▪ Electronic mail is most prominent success

THE WORLD WIDE WEB
▪ Hypertext, as originally realized, was a closed system
▪ Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made
publishing and accessing easy
▪ Critical mass of users lead to a complete transformation of our information
economy.
AGENT-BASED INTERFACES
▪ Original interfaces
▪ Commands given to computer
▪ Language-based

▪ Direct Manipulation/WIMP
▪ Commands performed on “world” representation
▪ Action based

▪ Agents - return to language by instilling proactivity and

“intelligence” in command processor
▪ Avatars, natural language processing
UBIQUITOUS COMPUTING
“The most profound technologies are those that disappear.”
Mark Weiser, 1991

Late 1980’s: computer was very apparent

How to make it disappear?

▪ Shrink and embed/distribute it in the physical world
▪ Design interactions that don’t demand our intention
SENSOR-BASED AND
CONTEXT-AWARE
INTERACTION
▪ Humans are good at recognizing the “context” of a situation and reacting
appropriately
▪ Automatically sensing physical phenomena (e.g., light, temp, location, identity)
becoming easier
▪ How can we go from sensed physical measures to interactions that behave as if
made “aware” of the surroundings?
PARADIGMS
WHAT ARE PARADIGMS
▪ Predominant theoretical frameworks or scientific
world views
▪ e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in
physics
▪ Understanding HCI history is largely about
understanding a series of paradigm shifts
▪ Not all listed here are necessarily “paradigm” shifts, but are at least
candidates
▪ History will judge which are true shifts
PARADIGMS OF INTERACTION
New computing technologies arrive,
creating a new perception of the
human—computer relationship.
We can trace some of these shifts in
the history of interactive technologies.
THE INITIAL PARADIGM
▪ Batch processing

Impersonal computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
▪ Time-sharing

Interactive computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
@#$% !
▪ Timesharing
▪ Networking

???

Community computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing C…P… Move this
filename file here,
▪ Timesharing dot star… or and copy this
▪ Networking was to there.
it R…M?
▪ Graphical displays
% foo.bar
ABORT
dumby!!!

Direct manipulation
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
▪ Timesharing
▪ Networking
▪ Graphical display
▪ Microprocessor

Personal computing
EXAMPLE PARADIGM
SHIFTS
▪ Batch processing
▪ Timesharing
▪ Networking
▪ Graphical display
▪ Microprocessor
▪ WWW

Global information
EXAMPLE PARADIGM SHIFTS
• Batch processing ▪ A symbiosis of physical and
electronic worlds in service
• Timesharing of everyday activities.
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous
Computing
TIME-SHARING
▪ 1940s and 1950s – explosive technological growth

▪ 1960s – need to channel the power

▪ J.C.R. Licklider at ARPA

▪ single computer supporting multiple users

VIDEO DISPLAY UNITS
▪ more suitable medium than paper

▪ 1962 – Sutherland's Sketchpad

▪ computers for visualizing and manipulating data

▪ one person's contribution could drastically change the history of

computing
PROGRAMMING TOOLKITS
▪ Engelbart at Stanford Research Institute

▪ 1963 – augmenting man's intellect

▪ 1968 NLS/Augment system demonstration

▪ the right programming toolkit provides building blocks to producing

complex interactive systems
PERSONAL COMPUTING
▪ 1970s – Papert's LOGO language for simple graphics programming
by children

▪ A system is more powerful as it becomes easier to user

▪ Future of computing in small, powerful machines dedicated to the

individual

▪ Kay at Xerox PARC – the Dynabook as the ultimate personal

computer
WINDOW SYSTEMS AND THE
WIMP INTERFACE
▪ humans can pursue more than one task at a time

▪ windows used for dialogue partitioning, to “change the topic”

▪ 1981 – Xerox Star first commercial windowing system

▪ windows, icons, menus and pointers now familiar interaction

mechanisms
METAPHOR
▪ relating computing to other real-world activity is effective teaching
technique
▪ LOGO's turtle dragging its tail
▪ file management on an office desktop
▪ word processing as typing
▪ financial analysis on spreadsheets
▪ virtual reality – user inside the metaphor

▪ Problems
▪ some tasks do not fit into a given metaphor
▪ cultural bias
DIRECT MANIPULATION
▪ 1982 – Shneiderman describes appeal of graphically-based
interaction
▪ visibility of objects
▪ incremental action and rapid feedback
▪ reversibility encourages exploration
▪ syntactic correctness of all actions
▪ replace language with action

▪ 1984 – Apple Macintosh

▪ the model-world metaphor
▪ What You See Is What You Get (WYSIWYG)
LANGUAGE VERSUS ACTION
▪ actions do not always speak louder than words!
▪ DM – interface replaces underlying system
▪ language paradigm
▪ interface as mediator
▪ interface acts as intelligent agent
▪ programming by example is both action and language
HYPERTEXT
▪ 1945 – Vannevar Bush and the memex

▪ key to success in managing explosion of information

▪ mid 1960s – Nelson describes hypertext as non-linear browsing

structure

▪ hypermedia and multimedia

▪ Nelson's Xanadu project still a dream today

MULTIMODALITY
▪ a mode is a human communication channel

▪ emphasis on simultaneous use of multiple channels for input and output

COMPUTER SUPPORTED
COOPERATIVE WORK (CSCW)
▪ CSCW removes bias of single user / single computer system

▪ Can no longer neglect the social aspects

▪ Electronic mail is most prominent success

THE WORLD WIDE WEB
▪ Hypertext, as originally realized, was a closed system
▪ Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made
publishing and accessing easy
▪ Critical mass of users lead to a complete transformation of our information
economy.
AGENT-BASED INTERFACES
▪ Original interfaces
▪ Commands given to computer
▪ Language-based

▪ Direct Manipulation/WIMP
▪ Commands performed on “world” representation
▪ Action based

▪ Agents - return to language by instilling proactivity and

“intelligence” in command processor
▪ Avatars, natural language processing
UBIQUITOUS COMPUTING
“The most profound technologies are those that disappear.”
Mark Weiser, 1991

Late 1980’s: computer was very apparent

How to make it disappear?

▪ Shrink and embed/distribute it in the physical world
▪ Design interactions that don’t demand our intention
SENSOR-BASED AND
CONTEXT-AWARE
INTERACTION
▪ Humans are good at recognizing the “context” of a situation and reacting
appropriately
▪ Automatically sensing physical phenomena (e.g., light, temp, location, identity)
becoming easier
▪ How can we go from sensed physical measures to interactions that behave as if
made “aware” of the surroundings?
 UNIT – 1: ACTIVITY
▪ Individuals must select one topic on the following
▪ Human
▪ Computer
▪ Interaction
▪ Interaction Paradigm

▪ A report on it shall be prepared with a minimum of 2 pages.

▪ A presentation on the selected topic shall be made in the upcoming
weeks (Maximum of 4 Slides)
▪ This Component will be considered for Tutorial – 1
▪ The same will be repeated for unit – 2 & the average of it will be made as
tutorial -1
▪ Tutorial 1 = 5 Marks (Average mark in Presentation of Unit 1 & 2 )