‫بسم هللا الرحمن الرحيم‬

‫وعلمك مالم تكن تعلم‬

‫وكان فضل هللا عليك عظيما‬
‫صدق هللا العظيم‬
‫سورة النساء )‪(113‬‬

‫‪1‬‬
 Modern Academy

First Semester
CS Dept. (CS314)

Human Computer Interaction

Dr. Mona Samir Lackousha

2
 Human Computer Interaction
In this course, you will learn about:
❑ What we need to know in order to design computerized systems
whose users can get the maximum benefit from the system with
ease.
❑ Involves study of humans (needs, abilities, limitations,……).
❑ Involves study of computer technologies that can enhance the
interaction between users and computers.
❑ Involves study of the ways, preferences, difficulties faced by users
of current or past systems.
❑ You may have a sense of some of the material since you are
humans, technology users, and computer students. 3
 Human Computer Interaction
What is HCI?
❑ Interaction between user and computer OR relationship between users and computer systems.

HCI Terms interchangeably used:

❑ Human Computer Interaction(HCI).
❑ Human Machine Interaction(HMI).
❑ Man Machine Interaction(MMI)

HCI deals with:

❑ Design.
❑ Implementation.
❑ Evaluation of interactive systems.
4
Human Computer Interaction

5
 Human Computer Interaction
Objective of HCI:
❑ Design for people.
❑ Design for tasks.
❑ Design for environments in which users live and operate
e.g. an organization.
❑ How to make the user interaction with computer easier?
❑ Design easy, natural and intuitive computer systems:
➢ To save time.
➢ To reduce costs.
6
 Human Computer Interaction
Objective of HCI:
❑ Designing Graphical User Interfaces(GUIs)
➢ Learning those interfaces.
➢ Efficient use of those interfaces.
➢ Evaluate and compare interfaces.
❑ Designing web interfaces.
❑ Explore new paradigms/prototypes of interactions.
❑ Develop models and theories of interaction.

7
 Human Computer Interaction
HCI in a broader hierarchy of fields:

Human factors Engineering: designing interactions between

people and products, systems or devices. 8
 Human Computer Interaction
❑ Example: Humans can distinguish millions of colors, but
only few (about 30) shades of gray.

9
 Human Computer Interaction
❑ UI Design(User Interface): refers to interactivity, look and feel of product
screen or web page.
❑ UX Design(User Experience): covers a user’s overall experience with the
product or website.

❑ The gap between HCI and human factors engineering is shrinking since more
and more devices are becoming computerized. 10
 Human Computer Interaction

❑ HCI is largely about understanding the interactions between humans and

computers.
❑ UX design is about dictating the interactions between humans and computers.
❑ UI design is about how to design things nicely for a screen (designing flexible
interactions with things on a screen).
❑ Earlier computer systems ran on expensive machines software engineers were
focused on designing efficient software (usability was not thought of).
❑ Currently, success of a computer system requires the design to be user-centric,
focused on usability and pleasant(smooth)user experience. 11
 Human Computer Interaction
❑ HCI is largely about understanding the interactions between humans and
computers.
❑ UX Design is about dictating the interactions between humans and
computers.
❑ UI Design is about how to design things nicely for a screen (designing
flexible interactions with things on a screen).
❑ Earlier computer systems ran on expensive machines software engineers
were focused on designing efficient software (usability was not thought of).
❑ Currently, success of a computer system requires the design to be user-
centric, focused on usability and pleasant(smooth)user experience.

12
 Human Computer Interaction
Human-Computer or Human-Task interaction?
❑ A user of a system is trying to achieve some task (buy something online,
watch a video, translate a text…..).
❑ The system is a means to achieve the task.
❑ In reality, the user is interacting with the task.
❑ For example:
An online lecture through zoom: an instructor is interacting with
students (the objective is not to interact with the computer or smartphone used
to connect to the meeting).
❑ Similar to a sports referee, the user interface of a system is successful when
unnoticed (the user smoothly interacts with the task and the system interface
is so natural that the user forgets about it.
13
 Human Computer Interaction
Invisible Interface (Idle Concept):
❑ We are interested in making the interface as invisible as possible so the
users spend little time focusing on the interface and instead focus on the
task they are trying to accomplish.
❑ Our goal as designers is to help the humans feel they are interacting directly
with the task while our interface vanishes in the middle of that interaction.
❑ The user should think about the task rather than thinking about the tool.

14
 Human Computer Interaction
UI Design Process:
❑ There are three components recommended:
1- user research.
2- design and prototyping of the interface.
3- user interface evaluation(improvement).

15
 Human Computer Interaction
1- User Research:
❑ What you have to learn about:
➢ Users who will use your system (their skills, possible distractions, special
needs such as kids, elderly, people with disabilities).
➢ Tasks that users try to complete through the system.
➢ Not just learning from users but from research done before about human
capabilities, limitations and how people perceive things.

16
 Human Computer Interaction
Software Development in Research:
❑ One of the 12 characteristics of software studied in S/W engineering course.
❑ S/W development is not just a process of creating software, it is also a
process of learning (researching)how to create the S/W that is best suited for
its purpose.

17
 Human Computer Interaction
Example Case:
❑ Designing the search feature for an online book library:

18
 Human Computer Interaction
Example Case:
❑ Designing the search feature for an online book library:

❑ Bad design, user research component is almost absent.

19
 Human Computer Interaction
Example Case:
❑ HCIL designed the international children digital library:

20
 Human Computer Interaction
Example Case:
❑ HCIL designed the international children digital library:

❑ International children’s digital library search page >> good design more than
3 million unique visitors visual search preferred by users(71% of searches).
21
 Human Computer Interaction
❑ Lessons learned from the kid's library search design:
➢ A good designer works to understand the issues from user’s point of view.
➢ Work with users rather than guess at what they like.

22
 Human Computer Interaction
❑ How can the following bad user experience be avoided
through a better design?
➢ Spent at least 30 minutes filling out a doctor’s office form which asked for
the address, phone number, email address and social security number an
average of 3 times at least 10 different people and organizations (my son, the
patient, me, my wife, his doctors, dentists,, pharmacies, insurance companies,
emergency contact information and responsible parties….)
➢ After completing and submitting, I received this message:

Internal server error

23
Thank You Very Much
And
Any Question?

24