INTRODUCTION TO

HUMAN COMPUTER INTERACTION

 Beginnings – Computing in 1945
▪ Harvard Mark I
o ASCC: IBM Automatic Sequence Controlled
Calculator (aka Mark 1)
▪ 55 feet long, 8 feet high, 5 tons
Early Human Computing Interaction

ENIAC(1943) – the first electronic numerical integrator and computer in the US

 Development of HCI
▪ Early computers: extremely difficult to use
• Large and Expensive
• By comparison: “people time” (labor) cheap
• Knowledge about how to make use easier
▪ Today
• None of these conditions hold
• Development of PC’s major landmark
▪ Shift to other interaction paradigms
• Small-handheld-devices
• Mobility
What is HCI?
▪ Is a discipline concerned with the
design, evaluation and implementation
of interactive systems for human use
and with study of major phenomena
surrounding them.
▪ Is the study of interaction between
people(users) and computers.
Interaction between users and
computers occurs at the user-interface.
The golden principle in HCI is that
“people should come first”.
 History of HCI
▪ It was mainly popular from the late 70s to the early 90s
▪ As a field of study it’s a combination of computing science and
behavioral psychology, and was mainly used to investigate
how to make desktop computers more usable.
▪ Because in earlier time many never touched a computer
▪ Then in the 90s, the web was invented, and mobile phone and
broadband internet both became widespread, and all the
changed.
▪ In software fields, what used to be HCI is more widely known
now as UX (user experience).
▪ In hardware fields such as robotics, virtual reality etc. it tends
to be called Human–machine interface(HMI)
▪ The combination of both Robotics and HCI is called Human-
Robot Interaction(HRI)

Now HCI is moving in a new direction

▪ Now, the pervasiveness of big data, new data collection and
interaction techniques is giving rise to a new but related
discipline: Human Data Interaction (HDI).
▪ This is likely to be a field with major new opportunities for
designers and analysts in the coming decades.
Disciplines contributing to HCI
 Fields that HCI builds on
Computer Science
▪ Implementation of software
Engineering
▪ Faster, cheaper equipment
Ergonomics
▪ Design for human factors
Graphic design
▪ Visual communication
Technical writing
▪ Textual communication
Linguistics, artificial intelligence
▪ Speech recognition, natural language processing
Cognitive psychology
▪ Perception, memory, mental models
Sociology
▪ How people interact in groups
Anthropology
▪ Study of people in their work settings
 Examples of interactive computing systems

▪ Single PC - capable of displaying web pages

▪ Embedded devices, for example in cars and in cell

phones
▪ Handheld Global Positioning Systems for outdoor
activities
Goals of HCI
To develop or improve the

▪ Safety

▪ Utility

▪ Effectiveness

▪ Efficiency

▪ Usability

▪ Appeal

. . . of systems that include computers

 Safety

▪ Safety of Users—think of

▪ Air traffic control

▪ Hospital intensive care

▪ Safety of Data—think of

▪ Protection of files from tampering

▪ Privacy and security

 Utility and effectiveness
▪ Utility: what services a system provides
e.g. Ability to print documents

▪ Effectiveness: user’s ability to achieve goals, e.g.

▪ How to enter the desired information
▪ How to print a report

▪ Utility and effectiveness are distinct

▪ A system might provide all necessary services, but if users can’t find
the services items, the system lacks effectiveness
Efficiency
▪ A measure of how quickly users can accomplish their goals or
finish their work using the system.
Usability
▪ “a measure of the ease with which a system can be learned
and used, its safety, effectiveness and efficiency, and attitude
of its users towards it”
▪ “the extent to which a product can be used by specified users
to achieve specified goals with effectiveness, efficiency and
satisfaction in a specified context of use”
 Usability

▪ Ease of learning !

▪ Ease of use !
▪ Appeal/ attitude !
▪ How well users like the system
▪ First impressions
▪ Long-term satisfaction
 Principles to support usability
▪ Learnability
The ease with which new users can use the system
effectively
Advantages
▪ reduces training time and costs
▪ enable more flexible staffing practices (staff become effective more quickly)

▪ Flexibility
The multiplicity of ways the user and the system
exchange information
Advantage
▪ allows reorganization of tasks and business
▪ Effectiveness

the level of support provided to the user

to achieve successfully its goals
Advantage:
▪ higher productivity
USER INTERFACE (UI)

• is the point of human-computer interaction and

communication in a device.
• This can include display screens, keyboards, a mouse
and the appearance of a desktop. It is also the way
through which a user interacts with an application or a
website.
TYPES OF USER INTERFACES
❖Graphical User Interface (GUI)
❖Command Line Interface (CLI)
❖Menu-driven User Interface
❖Touch User Interface
❖Voice User Interface (VUI)
❖Form-Based User Interface
❖Natural Language User Interface
GRAPHICAL USER INTERFACE
▪ a digital interface in which a user
interacts with graphical components
such as icons, buttons, and menus.
In a GUI, the visuals displayed in the
user interface convey information
relevant to the user, as well as
actions that they can take.
Advantages of a Graphical User Interface

▪ Suitable for non-technical users

▪ The complexity of actions is hidden from the users
▪ Enhanced by attractive visuals
▪ Immediate visual feedback
▪ Leverages models and imagery from the real world
▪ Enables usage of multiple input devices
Disadvantages of a Graphical User Interface

▪ Requires power and memory resources

▪ Might have low discoverability
▪ Might overwhelm users with the growing amount of control
elements
▪ Hidden commands need to be searched intentionally
COMMAND LINE INTERFACE
▪ a text-based user interface for interacting with PC on a
low abstraction level. Generally, this type of menu is
not intended for the average user.

▪ An example of CLI that people are most familiar with is

a terminal of any operating system (Windows, macOS,
Linux).
Advantages of Command Line Interface

▪ Faster than other types of user interface

▪ Less CPU processing requirements
▪ Works with a lesser resolution screen
▪ Easily scales in size
▪ Possibility to convert repetitive tasks into one
command
▪ Ability to trigger cross-application interactions to
perform complicated actions
Disadvantages of Command Line Interface

▪ Requires experience and/or programming skills

▪ Typos in command syntax result in errors
▪ Usually accepts only keyboard input type
▪ Not intuitive – requires reading the manual before
using it
MENU–DRIVEN INTERFACE
▪ employs a series of screens, or “menus”. When a user
makes a selection by tapping/clicking on the list format
or graphics, it takes them to the next menu screen until
they complete the desired outcome.
▪ An example is the settings menu on your phone.
Advantages of a Menu-Driven Interface

▪ Handy for computer beginners and novice users

▪ Low cognitive load on users
▪ Familiar interface across different platforms
▪ You are in charge of creating an order and a
hierarchy for user pathways
▪ More control over user interactions
▪ Simple to implement in various kinds of devices
Disadvantages of a Menu-Driven Interface

▪ Limited menu options

▪ Sub-menus might be difficult to find
▪ Risks of taking up a lot of screen space or being
too small
▪ Requires unnecessary actions for a simple task
TOUCHSCREEN GRAPHICAL USER INTERFACE
▪ It requires users to interact with the device with their
fingers. It has become a commonly used option due
to the popularity of portable devices. You come
across touchscreen GUI when you look at almost
anything on your phone or tablet.
Advantages of Touchscreen Graphical User Interface

▪ Easier and quicker than manipulating a mouse or typing

▪ Avoids external devices such as a keyboard or mouse
▪ Possibility of adding various motion actions
▪ Accessible to children and elders
▪ Zoom-in gestures promote accessibility for visually
impaired
▪ Adaptable to a wide range of devices
Disadvantages of Touchscreen Graphical User Interface

▪ Control elements size is limited by mobile display size

▪ Additional motions may not be easy to discover
▪ May be unnecessarily activated by stray touches
CONVERSATIONAL USER INTERFACE

▪ allow users to interact with

computers simply by telling
them what to do.
▪ It can be verbal or voice-
controlled (like Siri or Alexa) or
written (like chatbots). In order
to employ the first type, the
software should have voice
recognition capabilities.
Advantages of a Conversational UI
▪ Versatile in applications
▪ No need to learn new skills
▪ Voice provides a realistic feel
▪ Connects with users on a personal level
▪ Responds with context to build interactions
▪ Adapts to gender, tone, accent, and pace of speech
▪ Can be integrated into existing apps

Disadvantages of a Conversational UI
▪ Limited amount of visual and textual clues
▪ Articulating commands might be complicated
VOICE USER INTERFACE
▪ enables spoken human interaction
with computers, using speech
recognition to understand spoken
commands and answer questions,
and typically text to speech to play a
reply.
▪ A voice command device is a device
controlled with a voice user interface.
FORM-BASED USER INTERFACE
▪ Used to enter data into a
program or application by
offering a limited selection of
choices. For example, a
settings menu on a device is
form-based.
▪ Graphical user interface : A
tactile UI input with a visual UI
output (keyboard and
monitor).
Advantages of a Form-Based UI
▪ Easy to program
▪ Easy for user to see the options available

Disadvantages of a Form-Based UI
▪ Only limited options presented
▪ Visually impaired people might have trouble seeing
the text or options
c