invented one of the first links.

WEEK 1: THE HUMAN, THE COMPUTER, THE

INTERFACE WHAT INTERACTION DID YOU SEE
EARLY BEGINNINGS OF COMPUTING IN 1945 • MECHANICAL
• POOR FEEDBACK
Harvard Mark I - was a large computer • SPECIALIST USE
designed to assist in differential equation • PROCESS CONTROL
numerical computation. It was developed at • CALCULATIONS
Harvard University by Howard Aiken and was • NO INTENTION TO ADDRESS
funded and installed by IBM. The computer (or THE MASS MARKET
the IBM Automatic Sequence Controlled
Calculator (ASCC)) was known as the Harvard DEVELOPMENT
Mark I. • EXTREMELY DIFFICULT TO USE
- The Harvard Mark 1 is a room-sized, relay-based • LARGE AND EXPENSIVE
calculator. The machine had a fifty-five • “PEOPLE TIME” (LABOUR)
feet long, eight feet high, and 5 tons in • USED BY SPECIALISTS
weight. • NO KNOWLEDGE ABOUT HOW
TO MAKE USE EASIER
E.N.I.A.C - all-electronic calculating machine was
proposed by physicist John Mauchly in 1942. Human-computer interaction (HCI)
Meanwhile, the U.S. Army needed is a collaborative area of research
complicated wartime ballistics tables to be that focuses on computer
measured. technology development and, in
ENIAC (Electronic Numerical Integrator And particular, human (user) interaction
Computer), designed between 1943 and 1945, with computers.
was the first large-scale computer to operate
without being slowed by any mechanical PRINCIPLE OF HCI (USABILITY)
components at the electronic level. USEFUL
• Accomplish what is required
PDP-1 (Programmed Data Processor-1) (functional, does things)
computer build in 1959. USABLE
It was the first consumer computer that • Do it easily and naturally without error
concentrated on user interaction instead (does the right things)
of the productive use of computer USED
process. • Make people want to use it
- The first computer game is generally (be attractive, acceptable to org.)
assumed to be the game Spacewar!,
developed in 1962 at MIT (Stephen
Russell a.o.). Spacewar originally ran on a WHY DO WE NEED TO UNDERSTAND
PDP-1 computer the size of a large car. HUMAN IN HCI
Humans are limited in their
Grace Murray Hopper capacity to process information.
The American computer scientist and This has important implications
rear admiral of the United States for design.
Navy was Grace Brewster Murray Interacting with technology is
Hopper. cognitive
She was one of the first Harvard Mark Human Information Processing is
I computer programmers and a referred to as cognition
computer programming pioneer who
INPUT-OUTPUT CHANNELS

Vision - Human vision is a highly complex

activity with a range of physical and
perceptual limitations, yet it is the
primary source of information for the
average person.

Hearing - The sense of hearing is often

considered secondary to sight, but
we tend to underestimate the
amount of information that we
receive through our ears.
Muller-Lyer illusion is a well known optical illusion in
Touch - The third and last of the senses that
which two lines of the same length appear to be
we will consider is touch or haptic
of different lengths. The illusion was
perception. Although this sense is
first created by a German psychologist named Franz Carl
often viewed as less important than
Muller-Lyer in 1889.
sight or hearing, imagine life without it.
Muller-Lyer illusion is that our brains perceive the
depths of the two shafts based upon depth cues.
Movement - Before leaving this section on the
When the fins are pointing in toward the shaft of
human’s input–output channels, we
the line, we perceive it as sloping away much like
need to consider motor control and
the corner of a building.
how the way we move affects our
interaction with computers.
What is human memory?

Memory refers to the processes that are used to

acquire, store, retain, and later retrieve information.
Human Information is stored in memory:
• Sensory Memory
act as buffers for stimuli received through the senses.
A sensory memory exists for each sensory channel:
iconic memory for visual stimuli, echoic memory for
aural stimuli and haptic memory for touch.
These memories are constantly
overwritten by new information coming
in on these channels.

• Short-term (Working) Memory

Short-term memory or working memory
acts as a ‘scratch-pad’ for temporary
recall of information. It is used to store
The Ponzo illusion is an
information which is only required
optical illusion that was first
fleetingly.
demonstrated by the Italian
Short-term memory can be accessed
psychologist Mario Ponzo
rapidly, in the order of 70 ms. However,
(1882-1960) in 1913.
it also decays rapidly, meaning that
He suggested that the human mind judges an
information can only be held there
object's size based on its background.
temporarily, in the order of 200 ms.
He showed this by drawing two identical lines
long-term memory
across a pair of converging lines, similar to
railway tracks.
• Long-term Memory.
If short-term memory is our working
memory or ‘scratch-pad’, long-term
memory is our main resource.
Here we store factual information,
experiential knowledge, procedural
rules of behavior – in fact, everything
that we ‘know’.
Unlike working memory there is little
decay: long-term recall after minutes is
the same as that after hours or days
THE COMPUTER
A computer system comprises various elements,
each of which affects the user of the system.
Input device - are the hardware devices which
take information from user of the computer system,
convert it into electrical signals and transmit it to the
processor.
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.
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
SHORT TERM 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.
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 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
LONG TERM MEMORY
Hard disk drive (HDD) - 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.
OPTICAL DRIVE
READ ONLY MEMORY (ROM) – media that is pre-
recorded
RECORDABLE (R) – Media that can be recorded
once.
REWRITABLE (RW) – rewritable media that can ba
recorded, erased and recorded.
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.
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 • followed by Lotus 1-2-3
• MS Excel most common today
Menu Interface • Sophisticated variation of form-filling.
Set of options displayed on the screen • grid of cells contain a value or a formula
• less recall - easier to use Windows, Icon, Mice, and • formula can involve values of other cells
Pointer • e.g. sum of all cells in this column
• or windows, icons, mice, and pull-down menus! • user can enter and alter data
• default style for majority of interactive computer • spreadsheet maintains consistency
systems, especially PCs and desktop machines
WIMP INTERFACE WIMP Interface
• Used in .. Windows, Icon, Mice, and Pointer
• Multimedia, web browsers and hypertext • or windows, icons, mice, and pull-down menus!
• Minimal typing • default style for majority of interactive computer
• Use in ATM’s systems, especially PCs and desktop machines
• rely on recognition so names should be meaningful
• Selection by: Point and click Interface
• numbers, letters, arrow keys, mouse combination • Used in ..
• Often (frequent) options hierarchically grouped • Multimedia, web browsers and hypertext
• Restricted form of full WIMP system • Minimal typing
• Use in ATM’s
Natural Language
Familiar to user 3D Interfaces
• Speech recognition or typed natural language Virtual reality
• Problems • ‘ordinary’ window systems
• vague · ambiguous · hard to do well! • highlighting visual
• Solutions • 3D workspaces
• try to understand a subset • use for extra virtual space
• pick on key • light and occlusion give depth
• distance effects
Querty Interface
Question/answer interfaces WEEK 2: THE DESIGN INTERACTION
• user led through interaction via series of
questions Design - it is the process
• suitable for novice users but restricted of envisioning and planning the
functionality creation of objects, interactive
• often used in information systems systems, buildings, vehicles, etc.
• Query languages (e.g. SQL) It is user-centered, users are at the heart
• used to retrieve information from database of the design thinking approach.
• requires understanding of database structure
and language Understanding user’s needs
• syntax, hence requires some expertise - Need to take into account what people
are good and bad at
Form-Fills Interface - Consider what might help people in the
Primarily for data entry or data retrieval way they currently do things
• Screen like paper form. - Listen to what people want and get them
• Data put in relevant place Involved
• Requires - Use tried and tested user-based
• good design Methods
• obvious correction facilities
Interaction Design - Designing interactive products
Spreadsheets Interface to support people in their
First spreadsheet VISICALC, everyday and working lives
Sharp, Rogers and Preece (2002) People involved in the design of all the interactive
The design of spaces for aspects of a Product
human communication and
interaction Winograd (1997) USABILITY ENGINEERS
People who focus on evaluating products, using usability
Goal of Interaction Design methods and principles
- Usable
- Easy to learn WEB DESIGNERS
- Effective People who develop and create the visual design of
- Enjoyable experience websites,
- Involved user such as layouts

Evolution of HCI Interfaces INFORMATION ARCHITECTS

50 – Level for engineers , switch panels
60-70 – Programming level , COSOL Fortran
80 – interaction dialogue, GUI Multimedia
90 – Work setting , networked setting
00 – Widespread, rf, Bluetooth technology, mobile
devices and etc.
Human-computer interaction (HCI) is
“concerned with the design, evaluation and
implementation
of interactive computing systems for human use and
with
the study of major phenomena surrounding them”
(ACM SIGCHI, 1992, p.6)
INTERACTION DESIGN IN BUSINESS
NIELSEN NORMAN GROUP
The Nielsen Norman Group is an American computer
user interface and user experience consulting firm,
founded in 1998 by Jakob Nielsen and Don Norman.
“help companies enter the age of the consumer,
designing human-centered products and services”.
people who come up with ideas of how to plan and
structure
interactive products
USER EXPERIENCEDESIGNERS
people who do all the above but who may also carry out
field
studies to inform the design of products
What is involved in the process of interaction design
• Identify needs and establish requirements
• Develop alternative designs
• Build interactive prototypes that can be communicated
and assessed
• Evaluate what is being built throughout the process
Core characteristics of interaction design
• Users should be involved through the development
of the project
• Specific usability and user experience goals need
to be identified, clearly documented and agreed at
the beginning of the project
• Iteration is needed through the core activities

SWIM INTERACTIONS Design principles

Swim is a San Francisco-based design consultancy. • Generalizable concepts for thinking about different
Founded by Gitta Salomon in 1996, : “provides a wide features of design
range of design services, in each case targeted to address • The do’s and don’ts of interaction design
the product development needs at hand”. • What to provide and what not to provide at the
interface
IDEO-DESIGN COMPANY • Derived from a mix of theory-based knowledge,
IDEO is a design and consulting firm with offices in the experience and common-sense
U.S., England, Germany, Japan, and China. It was
founded in Palo Alto, California, in 1991. The company Important Interaction Design Principles
uses the design thinking approach to design products, VISIBILITY
services, environments, and digital experiences. FEEDBACK
CONSTRAINTS
INTERACTION DESIGNERS AFFORDANCES
MAPPING
 CONSISTENCY
Feedback
• Sending information back to the user about
what has been done
• Includes sound, highlighting, animation and
combinations of these
e.g. when screen button clicked on provides
sound or red highlight feedback:
Constraints
• Restricting the possible actions that can be
performed
• Helps prevent user from selecting incorrect options
• Three main types (Norman, 1999)
• Physical Constraints – the way physical objects restrict
the movement of things.
• Cultural Constraints – A mechanism for putting
knowledge in the world by adhering to a known
convention
Cultural constraints rely on learned
Conventions constraints
Interaction Design Principles
Universal Cultural Constraints- Once accepted by more
than one
cultural groups, they become
universally accepted conventions.
They cannot be change easily
AB
• Logical Constraints – exploits people’s everyday
common sense reasoning about the way the world
works.
How to design more logically
a. Provide direct adjacent mapping between icon
and connector
b. Provide color coding to associate the connectors
with the labels
Affordances - Refers to an attribute of an object that
allows people
to know how to use it
• e.g. a mouse button invites pushing, a door handle
affords pulling
• Norman (1988) used the term to discuss the design of
everyday objects
• Since has been much popularized in interaction design
to discuss how to design interface objects
• e.g. scrollbars to afford moving up and down, icons to
afford clicking on.
Mapping - Relationship between controls and their
movements and the results in the world
Consistency - Design interfaces to have similar
operations and use
similar elements for similar tasks
• For example:
• always use ctrl key plus first initial of the command
for an operation – ctrl+C, ctrl+S, ctrl+O
• Main benefit of consistent interfaces are easier to
learn and use
Internal consistency - refers to designing operations to
behave the same within an application.
• Difficult to achieve with complex interfaces
• External consistency - refers to designing operations,
interfaces, etc., to be the same across applications
and devices
• Very rarely the case, based on different designer’s
preference
WEEK 3: UNDERSTANDING &
CONCEPTUALIZING INTERACTION
Assumption - something that
you assume to be the case, even
without proof.
• Taking something for granted when
it needs further investigation.
Claim - State or declare that something is
the case, typically without providing
evidence or proof.
• Stating something to be true when
it is still open to question
Concept - Concepts are described in the
mind, in expression, or in thought,
as abstract concepts or general
notions. The fundamental
building blocks of theories and
values are considered to be
these. In all aspects of cognition,
they play a significant part.
Conceptual Model - Conceptual models are abstract,
psychological representation of a system,
made of the composition of concepts which
are used to help people know, understand,
or simulate a subject the model represents.
A conceptual model is:
“…a high-level description of how a system is
organized and operates”
-Johnson and Henderson, 2002
Enables
“…designers to straighten out their thinking
before they start laying out their widgets”
-Johnson and Henderson, 2002
Steps in formulating conceptual model
What will the users be doing when carrying out their
tasks?
• How will the system support these?
• What kind of interface metaphor, if any, will be
appropriate?
• What kinds of interaction modes and styles to use?
- always keep in mind when making design decisions
how the
user will understand the underlying conceptual model
Benefits of conceptualizing
Orientation – Enables design teams to ask
specific questions about how
the conceptual model will be
understood
Open-minded – Prevents design teams from
becoming narrowly focused
early on.
Common Ground - allows design teams to
establish a set of commonly
agreed terms.
Interface Metaphors - An interface metaphor in user
interface design is a collection of graphics, behavior and
processes of the user interface that leverage basic
information that users already have of other
domains.
• Interface designed to be similar to a physical entity but
also has
own properties
• Can be based on activity, object or a combination of
both
Benefits
• Makes learning new systems easier
• Helps users understand the underlying conceptual
model
• Can be very innovative and enable the realm of
computers and their applications to be made more
accessible to a greater diversity of users
INTERACTION TYPES
Instructing
Where users instruct a system and tell it what to do
• e.g. tell the time, print a file, save a file
• Very common conceptual model, underlying a
diversity of devices and systems
• e.g. word processors, VCRs, vending machines
• Main benefit is that instructing supports quick and
efficient interaction
• good for repetitive kinds of actions performed on
multiple objects
Conversing - Where users Underlying model of having
a conversation
with another human
• Range from simple voice recognition menu-driven
systems
to more complex ‘natural language’ dialogs
• Examples include timetables, search engines, advice-
giving systems, help systems
• Also virtual agents, toys and pet robots designed to
converse with you
• a system and tell it what to do
• e.g. tell the time, print a file, save a file
Manipulating
• Involves dragging, selecting, opening, closing
and zooming actions on virtual objects
• Exploit’s users’ knowledge of how they move
and manipulate in the physical world
• Can involve actions using physical controllers
• (e.g. Wii) or air gestures (e.g. Kinect) to control the
movements of an on
screen avatar
• Tagged physical objects (e.g. balls) that are
manipulated in a physical world result in
physical/digital events (e.g. animation)
Direct Manipulation
• Continuous representation of
objects and actions of interest
• Physical actions and button
pressing instead of issuing
commands with complex syntax
• Rapid reversible actions with
immediate feedback on object
of interest
Why are DM interface enjoyable?
• Continuous representation of objects and actions of
interest Novices can learn the basic functionality
quickly
• Experienced users can work extremely rapidly to carry
out a wide range of tasks, even defining new functions
• Intermittent users can retain operational concepts
overtime
• Error messages rarely needed - Web
• Users can immediately see if their actions are - Pen
furthering their goals and if not do something else - AR
• Users experience less anxiety - Gesture
• Users gain confidence and mastery and feel in control
• Physical actions and button pressing instead of issuing PARADIGM
commands with complex syntax In science and philosophy, a
• Rapid reversible actions with immediate feedback on paradigm is a distinct set of
object of interest concepts or thought patterns,
including theories, research
Exploring methods, postulates, and
• Involves users moving through standards for what constitutes
virtual or physical legitimate contributions to a field.
environments
• Physical environments with Examples of new Paradigms
embedded sensor
technologies Pervasive Computing - also called ubiquitous
computing, is the growing trend of embedding
Which conceptual model is best? computational capability (generally in the
• Direct manipulation is good for ‘doing’ types of tasks, form of microprocessors) into everyday objects to make
• e.g. designing, drawing, flying, driving, sizing them effectively communicate and perform useful tasks
windows in a way that minimizes the end user's need to interact
• Issuing instructions is good for repetitive tasks with computers.
• e.g. spell-checking, file management
• Having a conversation is good for children, computer- Wearable computing - Is the study or practice of
phobic, inventing, designing, building, or using miniature body-
disabled users and specialized applications borne computational and sensory devices. Wearable
• (e.g. phone services) computers may be worn under, over, or in clothing,
• Hybrid conceptual models are often employed, where or may also be their clothes (i.e. "Smart
different Clothing" (Mann, 1996a)).
ways of carrying out the same actions is supported at the
interface Augmented reality - In computer programming, a
- but can take longer to learn process of combining or “augmenting” video or
photographic displays
Conceptual models: by overlaying the images with useful computer-
Interaction and interface generated data. .... Faster computer processors
• Interaction type: what the user have made it feasible to combine such data displays with
is doing when interacting with a real-time video.
system,
• e.g. instructing, talking, browsing or other
• Interface type: the kind of THEORY
interface used to support the A theory is an abstract or
mode, generalizing form of meditative
• e.g. speech, menu-based, gesture and logical thought about a
phenomenon, or the
Kinds of interface types consequences of such thinking.
- Command Contemplative and logical
- Speech thought processes are also
- Data-entry correlated with such techniques
- Form fill-in as observational study, research,
- Query etc.
- Grphial