RSU- SAN FERNANDO CAMPUS

TECHNOLOGY DEPARTMENT

IT 9- INTRODUCTION
TO HUMAN- COMPUTER
INTERACTION
MODULE 1 | WEEK 2
REFLECTION AND SHARING
CHAPTER 1: INTRODUCTION TO HCI

Overview
This module introduces the field of Human-Computer Interaction
(HCI), covering its history, evolution, and foundational concepts. By the
end of this module, you will have a solid understanding of what HCI is,
its significance, and the key terminology used in the field.
Learning Objectives

1. Understand the history and evolution of HCI.

2. Learn key concepts and terminology in HCI.

3. Appreciate the interdisciplinary nature of HCI.

4. Recognize the importance of HCI in technology design and

usability.
What is HCI?

Human-Computer Interaction (HCI) is a multidisciplinary field

that focuses on the interaction between humans and computers. It
involves the design, evaluation, and implementation of interactive
computing systems for human use, as well as the study of major
phenomena surrounding these systems. The primary goal of HCI is to
improve the interactions between users and computers by making
computers more usable and receptive to the user's needs.
What is HCI?

HCI (human-computer interaction) is the study of how people

interact with computers and to what extent computers are or are not
developed for successful interaction with human beings.
HCI != Usability

A usable system is easy to learn, easy to remember how to use,

effective, efficient, safe, and enjoyable to use.

Usability is only one part of HCI, but has been one of the main goals

For example, HCI has contributed to the development of guidelines and

standards that support designers
 HCI has also developed methods of evaluation that help us to evaluate
the usability of a given product/system (and other aspects of the user
experience)
In addition, HCI uses mathematical models to predict users’
performance with a system (e.g., Fitt’s law to predict mouse movement time,
or models that predict search time or mental effort)
HCI also investigates new interaction paradigms or new ways of
integrating technology in our daily lives (think smart clothes, touch displays,
VR/AR, Voice-based interfaces … )
Key Points:

• HCI involves both the design and study of systems.

• It aims to make technology more user-friendly and accessible.

• It encompasses both software and hardware design.

Components of HCI:

HUMAN
COMPUTER
INTERACTION
The Human

Refers to the user, is, after all, the one whom computer systems
are designed to assist. The requirements of the user should therefore be
our first priority.
The Computer

A computer system comprises various elements, each of which

affects the user of the system. Input devices for interactive use and
Output devices displays for interactive use.
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.
Importance of HCI
HCI is crucial for several reasons:
User Satisfaction: Improving the usability and user experience
leads to higher user satisfaction.
Productivity: Enhancing the efficiency of user interactions with
systems can boost productivity.
Error Reduction: Well-designed interfaces can reduce user
errors, which is critical in domains like healthcare and aviation.
Accessibility: HCI ensures that technology is accessible to all
users, including those with disabilities.
Interdisciplinary Nature of HCI
HCI draws on principles and methodologies from several disciplines,
making it a rich and diverse field:
Computer Science: Provides the technical foundation for system
development.
Psychology: Helps understand human behavior, cognition, and perception.
Design: Contributes to the creation of aesthetically pleasing and functional
interfaces.
Ergonomics: Ensures physical comfort and efficiency in the use of
technology.
Sociology: Examines the social impacts and implications of technology.
Applications of HCI
HCI principles are applied in various domains to enhance user interactions:
Web and Mobile Applications: Ensuring that websites and apps are
intuitive and easy to use.
Software Development: Creating software that meets user needs and
preferences.
Healthcare: Designing systems for patient care, electronic health records,
and medical devices.
Education: Developing educational technologies that facilitate learning and
engagement.
Gaming: Crafting engaging and immersive game interfaces that enhance
player experience.
CALCULATING DEVICE IN ANTIQUITY

The world's oldest scientific instruments were developed to aid

calculation. For hundreds of years, ruler-like tools were the most
common calculating devices and their use persisted alongside
mechanical innovations that automated simple mathematical procedures.
 Konrad Zuse (1910-1995)
Known For: Inventor of the first electronic, fully
programmable digital computers, and a programming
language

• Invented the world’s first programmable computer (in 1941)

Z3 Computer- was a German electromechanical computer designed
by Konrad Zuse in 1938, and completed in 1941. It was the world's first
working programmable, fully automatic digital computer.
• This remained the only working computer in Europe up to 1951
ENIAC
ENIAC (Electronic Numerical Integrator and Computer) was the
first programmable, electronic, general-purpose digital computer,
completed in 1945. Other computers had some of these features, but
ENIAC was the first to have them all.
ENIAC was designed by John
Mauchly and J. Presper Eckert to
calculate artillery firing tables for the United States
Army's Ballistic Research Laboratory (which later
became a part of the Army Research
Laboratory). However, its first program was a
study of the feasibility of the thermonuclear
weapon.
The first programmers of the ENIAC were six women (“Refrigerator
Ladies”)
Memex (1945)
Memex was a conceptual system created by Vannevar
Bush for storing data and retrieving it in an easy and organized
manner. The system was to provide easy access to the large
amount of knowledge that was already recorded. Building on
the technology of his time, Bush described a new kind of
device which was a sort of mechanized file and library system.
He called it a “memex.” The word memex came from
combining portions of the words (mem)ory and
(ex)tender/expansion.
"As We May Think" is a 1945 essay by Vannevar
Bush which has been described as visionary and influential,
anticipating many aspects of information society.
 Memex [memory expansion] is a hypothetical electromechanical device for
interacting with microform documents and described in Vannevar Bush's 1945 article
"As We May Think". Bush envisioned the memex as a device in which individuals
would compress and store all of their books, records, and communications, "mechanized
so that it may be consulted with exceeding speed and flexibility". The individual was
supposed to use the memex as an automatic personal filing system, making the memex
"an enlarged intimate supplement to his memory".

“If the user wishes to consult a certain book, he taps its code on the keyboard…”

“Frequently-used codes are mnemonic, so that he seldom consults his code book;”

“He can add marginal notes and comments … even … by a stylus scheme”

“All this is conventional…”

SketchPad by Ivan Sutherland at MIT (1963)
Ivan Sutherland Introduces the
Sketchpad introduces the Sketchpad submitting
his PhD thesis to MIT. The Sketchpad, one of
the earliest programs for the TX-0, allowed
direct manipulation of objects on a computer
screen. Using the Sketchpad, a user could create
and manipulate graphical figures with a light
pen. This thesis provided the basis for later
graphical user interfaces and is considered one
of the seminal papers in computer science.
 Sketchpad (a.k.a. Robot Draftsman) is a
computer program written by Ivan Sutherland in
1963 in the course of his PhD thesis, for which he
received the Turing Award in 1988, and the Kyoto
Prize in 2012. It pioneered human–computer
interaction (HCI),and is considered the ancestor of
modern computer-aided design (CAD) programs as
well as a major breakthrough in the development
of computer graphics in general.

• Direct manipulation of objects

• SketchPad paved the way for the Graphical User Interface

• Sutherland’s PhD thesis also defined the terms “objects” and “instance”

• SketchPad is the first object-oriented programming system

First Mouse by Engelbard at Stanford (1963)
Douglas Engelbart invented the computer mouse in
1963–64 as part of an experiment to find a better way
to point and click on a display screen. Fashioned at
the Stanford Research Institute, it had a carved wood
casing and just one button. A subsequent model had
three buttons, and Engelbart would have provided
more if there had been room for more than the three
microswitches to which the buttons were connected.
Douglas Carl Engelbart
(January 30, 1925 – July 2, 2013)

He was an American engineer, inventor, and a

pioneer in many aspects of computer science. He is
best known for his work on founding the field
of human–computer interaction, particularly while at
his Augmentation Research Center Lab in SRI
International, which resulted in creation of
the computer mouse, and the development
of hypertext, networked computers, and precursors
to graphical user interfaces.
Xerox Alto (1973)
The Xerox Alto is a computer system
developed at Xerox PARC (Palo Alto Research
Center) in the 1970s. It is considered one of the
first workstations or personal computers, and its
development pioneered many aspects of modern
computing. It features a graphical user
interface (GUI), a mouse, Ethernet networking, and
the ability to run multiple applications
simultaneously. It is one of the first computers to
use a WYSIWYG (What You See Is What You Get)
text editor and has a bit-mapped display. The Alto
did not succeed commercially, but it had a
significant influence on the development of future
computer systems.
 Key Features of the Xerox Alto:
GUI of Xerox Alto
1. Graphical User Interface (GUI): The Xerox Alto introduced the
concept of a GUI, which included overlapping windows, icons, and a
mouse for navigation—features that later became standard in personal
computing.
2. Mouse: The Alto was one of the first computers to use a mouse, which
was essential for interacting with the GUI.
3. Networking: The Alto was designed with networking capabilities,
including an early form of Ethernet, which allowed it to connect to other
computers.
4. WYSIWYG (What You See Is What You Get): The Alto supported
WYSIWYG text editing, meaning the text displayed on the screen was a
close representation of what would be printed.
5. Programming Environment: The Alto was used as a platform for
developing and testing programming languages and environments,
including the Smalltalk programming language.
6.Impact: Although it was not commercially sold, the Alto greatly
influenced the design of future computers, including the Apple Macintosh
and Microsoft Windows systems.
VisiCalc
By Dan Bricklin and Bob Frankston
VisiCalc was the first spreadsheet program
released in 1979 for the Apple II computer. It was easy
to use and allowed for data sorting and storing in
tabular rows and columns. VisiCalc was created to
address and replace the manual spreadsheet
management method. Changing a single value meant
modifying the entire spreadsheet because changes made
to one cell were automatically applied to all connected
cells with VisiCalc. This program was one of the most
critical factors in making personal computers more
appealing to everyday customers and companies instead
of hobbyists and techies.
Key Points and Facts about VisiCalc:

• VisiCalc (short for “visible calculator”) was the first spreadsheet computer
program for personal computers, launched by VisiCorp in 1979 for the Apple II.
• VisiCalc is famously known as “The killer app” for the Apple II.
• It sold over 700,000 copies in six years and up to one million copies during its
existence.
• In formulas, VisiCalc uses the A1 notation.
• VisiCalc of Dan Bricklin and Bob Frankston uses Apple II, Apple SOS, CP/M,
Atari 8-bit family, Commodore PET, TRSDOS, Sony SMC-70, DOS, HP series 80
operating system.
Xerox Star (1981)

The Xerox Star, officially known as the Xerox 8010 Star Information System,
was a pioneering workstation developed by Xerox Corporation in 1981. It was the first
commercial computer to fully integrate the graphical user interface (GUI) concept, building
on the ideas developed earlier with the Xerox Alto.
Key Features of the Xerox Star:
• Graphical User Interface (GUI):
• The Star introduced a fully integrated GUI, featuring icons, windows, and a
desktop metaphor, allowing users to interact with the computer in a more
intuitive way.
• It included features such as drag-and-drop, WYSIWYG (What You See Is
What You Get) text editing, and the ability to easily manipulate objects on the
screen.
• Networking Capabilities:
• The Star was designed with networking in mind, allowing multiple
workstations to connect and share resources, such as printers and file servers,
over a local area network (LAN).
• This networking capability was advanced for its time, laying the groundwork
for future office computing environments.
• Document-Centric Design:
• The Star emphasized a document-centric approach, where users interacted
with documents rather than applications. This meant that users would open,
edit, and manage documents directly, making the interface more intuitive and
reducing the need to understand underlying software structures.
• Hardware:
• The Star featured a high-resolution display, a mouse, a keyboard, and built-in
Ethernet, making it a powerful workstation for its time.
• It also had the capability to run multiple applications simultaneously, such as
word processors, spreadsheets, and graphics programs.
• Influence and Legacy:
• While the Xerox Star was not a commercial success due to its high cost and
niche market, it had a profound influence on the development of later personal
computers.
• Many of its concepts and technologies were adopted by other systems, most
notably the Apple Macintosh and Microsoft Windows.
Apple Lisa (1981)

The Apple Lisa, released in 1983, was one of

Apple's first personal computers and is notable for being
the first commercially available personal computer with a
graphical user interface (GUI). The Lisa was a significant
step forward in the evolution of user-friendly computing,
though it was ultimately overshadowed by the more
successful Apple Macintosh.
Key Features of the Apple Lisa:
Graphical User Interface (GUI):
• The Lisa featured a revolutionary GUI with overlapping windows, icons, pull-
down menus, and a mouse, making it more accessible to users compared to
text-based command-line interfaces.
• It also introduced the desktop metaphor, where documents and applications
were represented as icons on a virtual desktop, making it easier for users to
understand and interact with their files.
• Software Applications:
• The Lisa was bundled with a suite of seven applications collectively known as
the "Lisa Office System," including a word processor, spreadsheet, and project
management software. This suite emphasized the concept of integrated
applications and document-centric computing.
• Hardware:
• The Lisa was powered by a Motorola 68000 processor and came with a high-
resolution black-and-white display. It also featured two 5.25-inch floppy
drives (later models had one floppy drive and a 10MB hard drive), a built-in
clock, and the ability to connect to external devices like printers and modems.
Memory and Storage:
• The original Lisa had 1 MB of RAM, which was quite large for its time, and
offered considerable storage for its applications and documents.
Cost and Commercial Performance:
• Despite its innovative features, the Lisa was prohibitively expensive, priced at
nearly $10,000, which limited its market appeal. It was marketed primarily to
businesses, but the high cost, along with some performance issues and a
complex design, prevented it from achieving widespread adoption.
• The Lisa’s commercial failure led to a significant financial loss for Apple, but
it laid the groundwork for future products.
Legacy:
• The Apple Lisa's GUI heavily influenced the development of the Apple
Macintosh, which was released a year later at a much lower price and with
similar, but more refined, features.
• While the Lisa was not a commercial success, it is remembered as an
important step in the evolution of personal computing, particularly in the
development of user-friendly interfaces that are now standard.
Apple Mac (1984)
The Apple Macintosh, often referred to simply as
the "Mac," was introduced by Apple in 1984.
It was a groundbreaking personal computer that
revolutionized the industry with its graphical user
interface (GUI), ease of use, and distinctive design. The
original Macintosh, often called the "Macintosh 128K"
due to its 128 KB of RAM, was the first mass-market
personal computer to feature a GUI and a mouse,
making it much more user-friendly compared to the
command-line interfaces of other computers at the time.
 The original Macintosh was bundled with software that showcased its
capabilities, including MacPaint, a simple graphics program, and MacWrite, a
word processor. These applications demonstrated the ease of use and functionality of
the GUI.
The introduction of the Macintosh System Software (later known as Mac
OS) provided a solid and user-friendly operating system that became the foundation
for all future Macintosh computers.
Windows 1.0 (1985)

In 1985, Microsoft released Windows 1.0, the first version of what would become
one of the most dominant operating systems in computing history. Windows 1.0 was not
a full operating system on its own; rather, it was a graphical operating environment that
ran on top of MS-DOS, the command-line operating system that was standard on IBM
PCs and compatible machines at the time.
Feature of Windows 1.0
Basic Applications:
Windows 1.0 came with a few built-in applications, including MS Paint
(Paint), Windows Write (a simple word processor), Notepad, Calculator,
Calendar, and Clock. These applications demonstrated the potential of graphical
computing.
There was also a game, Reversi, which served as a simple example of how
interactive software could be developed for Windows.

Multitasking:
One of the key features of Windows 1.0 was its ability to run multiple MS-DOS
programs simultaneously, allowing for basic multitasking. However, this was quite
limited compared to what would be possible in later versions.
Windows 2.0 (1987)
Windows 2.0 was an operating
system released by Microsoft in
December 1987. It was the successor
to Windows 1.0 and marked
significant improvements and changes
that helped establish Windows as a
viable platform for personal
computers.
Key Features of Windows 2.0
Improved User Interface: Windows 2.0 introduced overlapping windows,
which allowed users to have multiple application windows open and visible on the
screen at the same time. This was a major improvement over Windows 1.0, which
only allowed tiled windows.
Desktop Icons: This version introduced desktop icons, making it easier for
users to access files and applications.
Expanded Memory Support: Windows 2.0 could take advantage of the
expanded memory available on newer computers, which allowed for better
performance and the ability to run more applications simultaneously.
Improved Graphics Support: It included better support for VGA graphics,
allowing for more colors and higher resolutions.
Key Features of Windows 2.0
Keyboard Shortcuts: Windows 2.0 introduced the use of keyboard
shortcuts, like Alt + Tab to switch between applications, which is still a fundamental
part of the Windows user experience today.
Integration with MS-DOS: Windows 2.0 was designed to run on top of
MS-DOS, and it provided better integration with DOS-based applications.
Application Support: Some popular applications like Microsoft Word and
Excel were developed to run on Windows 2.0, making it a more attractive platform
for business users.
 GUI OF WINDOWS 1.0 AND 2.0

WINDOWS 2.0
WINDOWS 1.0
Windows 3.0 (1990)
Windows 3.0, released in May
1990, was a significant milestone in
the evolution of Microsoft's
Windows operating systems. It
marked the beginning of Windows'
rise to dominance in the personal
computer market. Here are some
key aspects and features of
Windows 3.0:
Key Features and Improvements:
• Graphical User Interface (GUI):
• Windows 3.0 introduced a more polished and user-friendly graphical interface
compared to its predecessors. The interface included better icons, improved color
support, and a more intuitive layout.
• The Program Manager and File Manager were central components of the GUI,
replacing the older MS-DOS Executive. These tools made it easier for users to
launch applications and manage files.
• Enhanced Memory Management:
• Windows 3.0 could run in three modes: Real Mode, Standard Mode, and 386
Enhanced Mode, making it compatible with a wider range of hardware, from
older 8086/8088 processors to the more powerful Intel 386 processors.
• The 386 Enhanced Mode allowed Windows 3.0 to take full advantage of the 386
processor's capabilities, including support for virtual memory, which allowed
users to run more applications simultaneously.
Key Features and Improvements:
• Multitasking:
• Windows 3.0 supported cooperative multitasking, which allowed users to run
multiple applications at the same time. This was a significant improvement over
earlier versions of Windows, which had limited multitasking capabilities.
• Performance Improvements:
• Windows 3.0 was faster and more efficient than its predecessors, thanks to
optimized code and better use of hardware resources.
• It could handle more complex applications, making it suitable for both business
and home use.
• Expanded Software Ecosystem:
• The success of Windows 3.0 encouraged more software developers to create
applications specifically for Windows. This led to a broader selection of software,
including word processors, spreadsheets, games, and more.
• Microsoft Word and Excel, as well as other popular applications, were widely
used on Windows 3.0.
Key Features and Improvements:

• Improved Graphics and Color Support:

• Windows 3.0 supported VGA graphics, which allowed for higher resolutions and
more colors (up to 16 colors in standard VGA mode, and 256 colors in Super
VGA mode).
• The improved graphics made the user interface more visually appealing and
allowed for more sophisticated applications and games.
• Accessibility and Internationalization:
• Windows 3.0 included better support for different languages and regional settings,
making it more accessible to users around the world.
• The operating system also introduced some basic accessibility features for users
with disabilities.
GUI of Windows 3.0
World Wide Web (1990)
The World Wide Web (WWW),
invented in 1990 by Sir Tim Berners-Lee,
revolutionized the way people access and
share information globally. It became the
foundation of the modern internet and
transformed how we communicate, learn,
and conduct business.
Invention and Development
TIM BERNERS-LEE

• The World Wide Web was

invented by Tim Berners-Lee, a
British computer scientist, while
he was working at CERN (the
European Organization for
Nuclear Research) in Switzerland.
• Berners-Lee's vision was to create
a system that would allow
researchers around the world to
share and access information
easily.
Key Components of the Web

• HTML (HyperText Markup Language): A markup language used to create

and format web pages. HTML allows for the embedding of text, images, links,
and other elements into web pages.
• HTTP (HyperText Transfer Protocol): A protocol used for transmitting data
over the web. HTTP defines how messages are formatted and transmitted, and
how web servers and browsers should respond to various commands.
• URL (Uniform Resource Locator): A unique address used to identify and
locate resources on the web, such as web pages, images, and videos.
• The First Web Browser and Server:
• Berners-Lee also created the first web browser, called WorldWideWeb (later
renamed Nexus), and the first web server, httpd (short for HyperText Transfer
Protocol Daemon).
• The first website, which explained the World Wide Web and how to use it, was
published on August 6, 1991. It was hosted on Berners-Lee's NeXT computer
at CERN.
Early Beginnings
The roots of HCI can be traced back to the 1940s and 1950s with
the development of the first computers. These early machines were
large, complex, and required specialized knowledge to operate.
Interaction with these computers was limited to a small group of trained
professionals who used punch cards and command-line interfaces.
The 1960s: Birth of Interactive Computing
The 1960s marked the beginning of interactive computing with
several key developments:
Ivan Sutherland’s Sketchpad (1963): Often considered the first
graphical user interface (GUI), Sketchpad allowed users to interact with a
computer using a light pen to draw directly on the screen. This innovation
laid the groundwork for future graphical interfaces.
Douglas Engelbart’s Mother of All Demos (1968): Engelbart
demonstrated many of the concepts that would become fundamental to
HCI, including the mouse, windows, hypertext, and real-time
collaboration. This demonstration showcased the potential of interactive
computing.
The 1960s: Birth of Interactive Computing
The 1960s marked the beginning of interactive computing with
several key developments:
Ivan Sutherland’s Sketchpad (1963): Often considered the first
graphical user interface (GUI), Sketchpad allowed users to interact with a
computer using a light pen to draw directly on the screen. This innovation
laid the groundwork for future graphical interfaces.
Douglas Engelbart’s Mother of All Demos (1968): Engelbart
demonstrated many of the concepts that would become fundamental to
HCI, including the mouse, windows, hypertext, and real-time
collaboration. This demonstration showcased the potential of interactive
computing.
The 1960s: Birth of Interactive Computing
The 1960s marked the beginning of interactive computing with
several key developments:
Ivan Sutherland’s Sketchpad (1963): Often considered the first
graphical user interface (GUI), Sketchpad allowed users to interact with a
computer using a light pen to draw directly on the screen. This innovation
laid the groundwork for future graphical interfaces.
Douglas Engelbart’s Mother of All Demos (1968): Engelbart
demonstrated many of the concepts that would become fundamental to
HCI, including the mouse, windows, hypertext, and real-time
collaboration. This demonstration showcased the potential of interactive
computing.
The 1960s: Birth of Interactive Computing
The 1960s marked the beginning of interactive computing with
several key developments:
Ivan Sutherland’s Sketchpad (1963): Often considered the first
graphical user interface (GUI), Sketchpad allowed users to interact with a
computer using a light pen to draw directly on the screen. This innovation
laid the groundwork for future graphical interfaces.
Douglas Engelbart’s Mother of All Demos (1968): Engelbart
demonstrated many of the concepts that would become fundamental to
HCI, including the mouse, windows, hypertext, and real-time
collaboration. This demonstration showcased the potential of interactive
computing.