CSM 357

Human-Computer Interaction
lecture 1

D R . R O S E - M A RY O W U S U A A M E N S A H G Y E N I N G

1
 INTRODUCTION TO HCI

Human–computer interaction (HCI) is a cross-disciplinary area:

◦ (e.g., engineering, psychology, ergonomics, design)

◦ that deals with the theory, design, implementation, and evaluation of the
ways that humans use and interact with computing devices.

2
 Human Computer Interactions (HCI) is concerned with
designing, evaluating and deploying usable, effective
technologies in a range of contexts - be it home, office,
school, cyberspace or other domain.

Definition of Human Computer Interaction is a discipline concerned

with the design, evaluation and implementation of
HCI interactive computer systems for human use and with
the study of major phenomena surrounding them

HCI has become much more important in recent years

as computers (and embedded devices) have become
commonplace in almost all facets of our lives.
3
 Human-Computer Interaction : The Human

As its name implies, HCI consists of three parts:

1. the user,

2. the computer,

3. and the ways they work together (Interaction)

4
 Human-Computer Interaction : The Human
A user is an individual user or a group of users working together.
It is important to appreciate the way people's sensory systems (sight, hearing,
touch) relay information.

Also, different users form different conceptions or mental models about their
interactions and have different ways of learning and keeping knowledge.

In addition, cultural and national differences play an important part in

individual differences.

5
 Human-Computer Interaction : The Computer

Computers refer to any technology ranging from smart phones, embedded systems,
desktop computers, to large scale computer systems.

6
Human Computer Interaction : The Interaction
There are obvious differences between humans and machines.

In spite of these, HCI attempts to ensure that they both get on with
each other and interact successfully.

In order to achieve a usable system, you need to apply what you know
about humans and computers, and consult with likely users
throughout the design process.

7
Humans, Computer and Interaction

Humans rely on: Sensory systems (sight, hearing, touch) for

The H information relay, forming mental models about interactions,
diverse learning and knowledge retention methods,
influenced by cultural and national differences.

Computers encompass: A wide range of technologies from

The C smartphones and embedded systems to desktop computers
and large-scale computer systems.

The interaction involves: Bridging the differences between

The I humans and machines, ensuring successful communication and
cooperation, applying knowledge of both humans and
computers, consulting with potential users throughout the design
process to achieve usable systems.
 Goals of HCI
The goals of HCI are to produce usable and safe systems, as well as
functional systems.

In order to fulfill that, developers must attempt to:

 Understand how people use technology

 Building suitable systems

 Achieve efficient, effective, and safe interaction

9
 Goals of HCI

At physical level, HCI concerns selecting the most appropriate input

devices and output devices for a particular interface or task

Determine the best type of interaction, such as direct manipulation, natural

language, icons, menus

10
 Goals of HCI

For systems that include computers, develop or improve

◦ Safety
◦ Utility
◦ Effectiveness
◦ Efficiency
◦ Usability
◦ Appeal

11
 How important is HCI?

1. If the video does not record a TV program because we pressed the wrong
button, we are likely to feel angry.
2. Users may struggle to understand or use the technology, resulting in
dissatisfaction and potential abandonment.
3. A pilot shuts down the wrong engine and the plane crashes. This may lead
to the loss of many lives
4. Users may spend more time navigating the system or completing tasks,
leading to decreased overall efficiency.
5. Organizations incur higher costs for training programs, impacting budgets
and timelines.
12
 Real World HCI Examples

1. Gaming Interfaces of popular video games.

2. Learning management platforms like Moodle or Canvas.
3. The intuitive touch interface on smartphones.
4. Social media user-friendly design and features.
5. Intuitive user interfaces on ATMs.
6. Voice-activated smart home assistants

13
 What is HCI? : Word processor: case study

Objective: to edit a document

◦ Interface: windows, icons, menus, etc.

◦ Functional part: sub-routines for command execution, file handling, saving,

deleting, etc.

◦ Interaction: use mouse to click the “save” icon,

use mouse to click “FILE” icon, …

◦ User tasks: edit file, save file, etc.

14
 Good and poor design choices
Wine glass: Is this a good or poor design choice?

15
Good and poor design choices

16
Good and poor design choices
WHICH OF THE TWO EGG SEPARATORS WILL YOU CHOOSE AND WHY?

17
Examples of bad design

18
Examples of bad design

19
Examples of bad design

20
Examples of bad design

21
 To avoid bad design choices
Take into account

–who the users are

–what activities are being carried out

–where the interaction is taking place

And then optimize the interactions users have with products such that
they match users’ activities and needs

22
Multidisciplinary Nature of HCI
Human-Computer Interaction (HCI) is a
multidisciplinary field which combines
the theories and practices from a
number of fields including:
 computer science,

 cognitive and behavioral psychology,

 anthropology,

 sociology,
q

23
Multidisciplinary Nature of HCI
 ergonomics,

 industrial design, and more

24
Watch this video

History of HCI: https://www.youtube.com/watch?v=C21Hx0yiHF0

25
 usability engineers - people who
interaction designers - people focus on evaluating products, using
involved in the design of all the usability methods and principles
interactive aspects of a product

What do
professionals
do in the HCI web designers - people who develop
information architects - people who
and create the visual design of
business? websites, such as layouts
come up with ideas of how to plan
and structure interactive products

user experience designers - people

who do all the above but who may
also carry out field studies to inform
27
 History of HCI: Paper Discussion
Brad A. Myers. "A Brief History of Human Computer Interaction
Technology." ACM interactions. Vol. 5, no. 2, March, 1998. pp. 44-
54.

Approximate time lines showing where work was performed on some major technologies 28
History of HCI: Paper Discussion (Excepts)
Brad A. Myers. "A Brief History of Human Computer Interaction Technology." ACM interactions. Vol. 5, no. 2, March,
1998. pp. 44-54.

Direct Manipulation of graphical objects:

The now ubiquitous direct manipulation interface, where visible objects on the
screen are directly manipulated with a pointing device, was first demonstrated
by Ivan Sutherland in Sketchpad, which was his 1963 MIT PhD thesis.

SketchPad supported the manipulation of objects using a light-pen,

including grabbing objects, moving them, changing size, and using
constraints. The system was built at Lincoln Labs with support from the Air
Force and NSF
29
 History of HCI: Paper Discussion (Excepts)
Brad A. Myers. "A Brief History of Human Computer Interaction Technology." ACM interactions. Vol. 5, no. 2,
March, 1998. pp. 44-54.

Direct Manipulation of graphical objects:

David Canfield Smith coined the term "icons" in his 1975 Stanford PhD thesis
on Pygmalion (funded by ARPA and NIMH) and Smith later popularized icons
as one of the chief designers of the Xerox Star
Many of the interaction techniques popular in direct manipulation interfaces,
such as how objects and text are selected, opened, and manipulated, were
researched at Xerox PARC in the 1970's.
In particular, the idea of "WYSIWYG" (what you see is what you get)
originated there with systems such as the Bravo text editor and the Draw
drawing program

30
History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction

Direct Manipulation of graphical objects:

The first commercial systems to make extensive use of Direct
Manipulation were the Xerox Star (1981) , the Apple Lisa (1982) and
Macintosh (1984)

Image source:https://www.thocp.net/hardware/xerox_star.htm
31
 History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction

The Xerox Star workstation

Image source:https://www.thocp.net/hardware/xerox_star.htm

32
History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction
Xerox Star ◦ icons,
The Xerox Star workstation, ◦ folders,
officially named Xerox 8010 ◦ mouse (two-button),
Information System, was the first ◦ Ethernet networking,
commercial personal computer to ◦ file servers,
incorporate technologies that have
since become standard in personal ◦ print servers, and
computers including: ◦ e-mail
◦ a bitmapped display,
◦ a window-based graphical user
interface,
33
 History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction

Apple Lisa (1982) Lisa is a desktop computer developed

by Apple, released on January 19,
1983.

It is one of the first personal

computers to present a graphical user
interface (GUI) in a machine aimed at
individual business users
Image source:https://www.macstories.net/mac/the-lisa/

34
 History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction
Macintosh (1984)
The Macintosh (mainly Mac since 1998) is a
family of personal computers designed,
manufactured, and sold by Apple Inc. since
January 1984.

The original Macintosh is the first

successful mass-market personal
computer to have featured a graphical user
interface, built-in screen, and mouse
Image source: https://appleinsider.com/articles/19/01/24/apple-
launched-macintosh-on-january-24-1984-and-changed-the-world----
eventually 35
 History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief History of Human Computer Interaction

Windows
The Mouse
Multiple tiled windows were demonstrated in Engelbart's
The mouse was developed at Stanford NLS in 1968.
Research Laboratory to be a cheap
replacement for light-pens, which had Early research at Stanford on systems like COPILOT
(1974) and at MIT with the EMACS text editor (1974)
been used at least since 1954 also demonstrated tiled windows.

Alan Kay proposed the idea of overlapping windows in

It first appeared commercially as part of his 1969 University of Utah PhD thesis
the Xerox Star (1981), the Three Rivers
Computer Company's PERQ (1981), the The main commercial systems popularizing windows
were the Xerox Star (1981), the Apple Lisa (1982), and
Apple Lisa (1982), and Apple Macintosh most importantly the Apple Macintosh (1984
(1984).

36
History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction
Application types
Drawing programs: Much of the current technology was demonstrated in
Sutherland's 1963 Sketchpad system. The use of a mouse for graphics was
demonstrated in NLS (1965)
Word processors: In 1962 at the Stanford Research Lab, Engelbart proposed,
and later implemented, a word processor with automatic word wrap, search and
replace, user-definable macros, scrolling text, and commands to move, copy, and
delete characters, words, or blocks of text
Spreadsheets: The initial spreadsheet was VisiCalc which was developed by
Frankston and Bricklin (1977-8) for the Apple II while they were students at
MIT and the Harvard Business School.

37
History of HCI: Paper Discussion (Excepts) Brad A. Myers. "A Brief
History of Human Computer Interaction
HyperText: The idea for hypertext (where documents are linked to related
documents) is credited to Vannevar Bush's famous MEMEX idea from 1945. Ted
Nelson coined the term "hypertext" in 1965. Tim Berners-Lee used the hypertext
idea to create the World Wide Web in 1990

38
 Other Major technologies in HCI history

 Computer Aided Design  Virtual and Augmented Reality

 Video games  Natural language processing
 Gesture recognition  Wearable Affective Computing
 Multi-media  Multimodal Interaction
 3-D  Tangible Interaction
 Human-Robot Interaction
 Ubiquitous Computing

39
 Human Factors in HCI

Source: Human factors in HCI design, Cham,Tat-Jen

40
 Human Factors in HCI
Humans are limited in their capacity to process information. This has important
implications for design.
Information is received and responses given via a number of input and output
channels:
– visual channel
– auditory channel
– haptic channel
– movement.
The human, the user, is, after all, the one whom computer systems are designed to
assist.
The requirements of the user should therefore be of priority.
41
 Human Factors in HCI
In order to design something for someone,
◦ we need to understand their capabilities and limitations.
◦ We need to know if there are things that they will find difficult or, even,
impossible.
◦ It will also help us to know what people find easy and how we can help
them with things they find difficult
This means that cognitive psychology has a bearing on the use of
computer systems: how humans perceive the world around them, how they
store and process information and solve problems, and how they physically
manipulate objects.

42
Human factors in HCI

43
Human Factors in HCI

44
 Importance of HCI
1. Can Prevent accidents

2. Health and safety concerns

3. Can reduce the cost of customer training and support

4. Direct correlation between HCI and sales

5. HCI can provide you a job.

45
 Discussion

1. What's the best-designed interface you've used recently? Why?

2. What's a frustrating interface you've encountered? How would you

improve it?
 Project
•By the end of this course, you would have implemented an interface with clear visual hierarchies,
contrasting colors, and intuitive icons to improve comprehension
•Incorporate interactive components that allow the user to set goals and achieve tasks, reflecting
Norman’s execution-evaluation model(eg:Form Handling, Button execution)
•Focus on easy-to-understand platforms, minimized clicks, and goal-oriented features.
•Apply User-Centered Design (UCD) principles by incorporating features users might expect, based on
identified user needs and usability goals
•Conduct usability evaluations at each design stage, incorporating methods such as heuristic evaluation
and user testing
•Tools :HTML, Bootstrap or tailwind Javascript

47
 THANK YOU

1/14/2025
48