Introduction to UI/UX: Understanding Human Computer Interaction

Introduction to UI/UX
MODULE - I
Introduction to HCI
MODULE 1
Introduction to HCI
Module Description
Human Computer Interaction (HCI) is the study of how people interact with the computers.
We will see how the technical development takes place by considering the user as a prime
factor. There are different types of models to develop a good user interface, which will be
death with.
Through this module the students will get to know the basic concepts of HCI. They can
classify the different types of interaction devices. They can elaborate the function of
interaction framework and can describe a range of models that can be used during the
interface designing process.
By the end of this module, the students will be able to outline the fundamentals of HCI. They
can list the devices for communication between human and computer. They will be able to
summarize the effectiveness of interaction and can identify the relevance of each type of
models for interface designing purpose.
Chapter 1.1
Human Computer Interaction Foundations

Chapter 1.2
Models & Theories
Introduction to UI/UX
Chapter Table of Contents

Chapter 1.1

Aim ......................................................................................................................................................... 1
Instructional Objectives....................................................................................................................... 1
Learning Outcomes .............................................................................................................................. 1
1.1.1 The Human .................................................................................................................................. 2
(i) Input-Output Channels .......................................................................................................... 2
(ii) Human Memory..................................................................................................................... 5
(iii) Thinking: Reasoning and Problem Solving ....................................................................... 6
Self-assessment Questions ................................................................................................................... 8
1.1.2 The Computer ............................................................................................................................. 9
(i) Text Entry Devices .................................................................................................................. 9
(ii) Positioning, Pointing and Drawing ................................................................................... 10
(iii) Display Devices ................................................................................................................... 14
(iv) Memory ................................................................................................................................ 15
Self-assessment Questions ................................................................................................................. 17
1.1.3 The Interaction .......................................................................................................................... 18
(i) Models of Interaction ........................................................................................................... 18
(ii) Frameworks & HCI.............................................................................................................. 19
Self-assessment Questions ................................................................................................................. 20
Summary ............................................................................................................................................. 21
Terminal Questions............................................................................................................................ 22
Answer Keys........................................................................................................................................ 22
Activity................................................................................................................................................. 23
Bibliography ........................................................................................................................................ 24
External Resources ............................................................................................................................. 24
Video Links ......................................................................................................................................... 25
Introduction to UI/UX | Introduction to HCI

Aim
To enhance the knowledge of the student with the fundamentals of Human Computer
Interaction
Instructional Objectives
After completing this chapter, you should be able to:
• Explain the basic concepts of HCI
• Classify the different types of devices available for interaction
• Describe typical capacities of computer memory and storage standards
• Elaborate the function of interaction framework that used to explain problems

between user and a computer
Learning Outcomes
At the end of this chapter, you are expected to:
• Outline the fundamentals of HCI
• List the devices to communicate between human and computer
• List the computer memory and storage standards
• Summarize the effectiveness of interaction between human and computer
Introduction to UI/UX | Introduction to HCI 1

Introduction
Human Computer Interaction (HCI) is the concept of interaction between humans and the
computer. HCI is also concerned about, to what level computers are produced for viable and
user friendly interaction with individuals. The HCI consists of three sections: the human, the
computer and the interaction between human and computer. HCI tries to guarantee that
both human and machines coexist with each other and collaborate effectively. A primary
target of HCI is to enhance the interactions between users and computers so that computers
become more usable and react to the user's needs. HCI utilises productivity, safety and
entertainment to enhance and fulfil human-computer activities and it is functional to various
types of computer systems, including air traffic control, offices, nuclear processing and
computer gaming. HCI systems are easy, operative and entertaining.
1.1.1 The Human

(i) Input-Output Channels
A person’s interaction with the environment happens through sending and receiving data or
information. This can be considered as the input and output. The human gets data as input
which is the output of the PC and can react to it by sending data as an input to the PC. This
clears up that the human's input is the PC's output and vice versa... People have five
distinctive input channels like vision, hearing, touch, taste and smell. The initial three
channels are the most critical for HCI utilizations. Through graphical user interface user can
see the data on the computer monitor. These data are output of the computer but the input of
the user. Suppose some error message is shown on the computer display by giving some
sound. So by hearing also user can receive information. The human output is done through
control of human body parts like the fingers, eyes, head and the vocal system. The fingers are
assumed to be the most critical part for interacting with PC. The fingers are utilised for
writing through keyboard and controlling the mouse. Through vocal system user can give
input to the computer.
a) Visual Input Channel:
Human vision is a complex activity. This is the basic source of information. Vision starts with
light. The eye accepts light and converts it into electrical energy. Light is discharged from
objects and their picture is absorbed on the back of the eye. The receptors in the eye change it
into electrical signals, which are passed to brain.
2 Introduction to HCI | Introduction to UI/UX

Rods allow us to see through a low level of brightness but they can't resolve fine details. This
is the reason for the visual deficiency when we move from an obscured room into daylight.
An eye has approximately 120 million rods, situated towards the edge of retina. Cones are
another kind of receptors in the eye. They are less sensitive to the light and that is the reason
cones can tolerate more light. There are three sorts of cones. Each of the cones matches an
alternate wavelength of light and this is the cause of colour vision. . The eye has roughly 6
million cones. Cones are concentrated on the fovea which is a small portion of retina. The
blind spot is also situated in retina. The blind spot has no Rods or cones.
To design an effective visual interface, we must have knowledge about how humans observe
size, depth, brightness and colour. To discuss about the size, it is very important to
understand how an image appears on the retina. We know that light is discharged from
objects and their picture is absorbed on the retina. The size of thie image, which is absorbed
on retina , is specified as the visual angle. If two objects are at same distance, visual angle will
be large for larger object. If two objects are of the same size but the distance is different, then
visual angle will be smaller for the furthest one. The other feature is the brightness. Brightness
is an individual reaction to levels of light. It is affected by luminance. Luminance is the
quantity of light emitted by an object. Our visual system can identify the changes in
brightness.. Visual perception increases with increased luminance.
So when we need to design a user-friendly computer, it is effective to use computers with a

high display luminance, so that reading will be easier for the user. Enhanced luminance also
increases flicker, so when the display is large we have more flicker. We have to consider these
aspects and circumstances when we design a computer for the users.
Apart from the image or object, when the text is read, our eyes recognise visual signals. First,
words are recognized as patterns. After that words will be transformed into a language
specific representation. after this only the explaination will be analyzed. When we read a
sentence our eyes move quickly around. These movements are called as saccades. Moving our
eyes from the begining of a sentence to the end of the sentence is known as regression. In the
middle of these moving stages our eyes rest from time to time. This time is used to observe
the read text. When the word is already known to user it is easier for them to read. It is simple
to read words, which uses upper case letters compared to the words formed with only
lowercase letters. So we need to consider all these aspects when designing a user friendly
computer for better user interaction.

b) Auditoral Input Channel:
The hearing is an imperative input channel. The human ear acknowledges to the vibrations
called sound wave. Sound wave is received from the air and moves through the numerous
stages to sound-related nerve and from that point, driving forces are sent to the mind. Each
ear gets different non unique kind of sounds, which are then consolidated with the goal that
one can distinguish, from where the sound is produced. Consider a case: when we close our
eyes and hear the sound around us; we will have the capacity to hear vechicles that run in the
city behind us. The auditoral framework shifts sound with the goal that it permits us to give
careful consideration and to focus on most critical and important data. Consider another
case: when we are in a crowded place, we will have the capacity to listen to our name when it
is called. Thus we can use the benefits of our auditorial framework by utilizing exceptional
cautioning sounds when the user is operating a PC like playing a game etc. Particularly for
humans who are visually impaired, hearing is assumed as an important part to interact with
PC frameworks. Visually impaired individuals rely on acoustical guides while using PCs. For
them, a site is read out as the information is given as audio output from PC.
c) Haptic Input Channel : Touch
Touch occurs through the skin. The skin contains three sorts of receptors. Each of them
reacts to the feelings. One for heat and cold, another for extreme pressure and the last one for
pressure in general. . The receptor for pressure in HCI can be arranged into two sorts, one for
prompt pressure and other for continuous pressure. When we press a key or button while
using a PC, we get immediate feedback from the PC... Touch additionally gives us an
understanding of the position of our fingers on the console also. This is called kinesthesis.
Thus when designing a computer system, the touch plays an important role.
d) Human Output Channel: Movement
We need to know how human output i.e. our movement effects the computer interaction.
Consider a simple action of hitting a button against a question displayed on the computer
screen. Hitting a key is an answer to a question which we recognized through sensory
receptors. Questions are processed in the brain and the brain instructs the muscles to
respond. This total activity takes time. This time is parted into reaction time and movement
time. Movement time depends on the age and fitness of the user. Reaction time depends on
the sensory channel through which question is received such as auditory signal, visual signal.

Accuracy is important factor in this case. In some cases increased reaction time reduce the
accuracy. Speed and accuracy are the important factor to design the computer system.
(ii) Human Memory
When the human is considered as the prime character in Human-Computer Interaction, then
we need to consider the human memory also. The human memory is classified into three
types: sensory memory, short term memory and Long term memory.
a) Sensory Memory:
Information is communicated to our brain through stimuli. There is a sensory memory for
each sensory channel like iconic memory for visual, echoic memory for hearing and haptic
memory for touch. Sensory memory works as a buffer or collector for stimuli through the
respective senses. The information that we received is passed to the short term memory being
influenced by the attention. Attention totally depends on the level of interest or the need we
have.
b) Short-term Memory:
This type of memory is used for temporary recall of information. It works like a “scratch
pad”. The information is temporarily stored here. While performing multiplication of
numbers the intermediate numbers are stored for reference in the short term memory. The
information in the short-term memory is stored for duration of 200 millisecond. The capacity
of short-term memory is limited. It will be better if we try to remember the digits partitioning
into groups. Suppose 124569857 number we can remember easily by partitioning into groups
124 569 857. Using the concept of grouping we can optimize our short-term memory. The
grouping is called chunking. Procedure of chunking is called closure. The aspect of closure is
very effective when we design interactive systems. Lets’ consider the cash machine. A client
needs to get some cash, he enters his card and pin, chooses the amount he needs to pull back.
Before he obtains the cash, he will first recover his card. If the client gets the cash before the
card, he might be forgotten to take his card because for him transaction is over when he get
the cash. It is suggested that we should not over-burden our user’s short term memory.

c) Long-term Memory:
The long-term memory stores information for long time. The limit of the long term memory
is almost boundless. The data which we store in the long term memory won't be overlooked
and we can recall them whenever we want. The long term memory is two types. One is
episodic memory, another one is semantic memory. The episodic memory is responsible for
remembering self-portraying occasions like places, times, feelings and emotions. We can
remember the graduation date, marriage date etc. through episodic memory. The semantic
memory is responsible for remembering general information like 2+3=5. We can easily
remember this calculation. In long term memory condition-action rule is also stored, like “IF
the dog is growling, THEN run away!” In long term memory information goes out very
slowly.
(iii) Thinking: Reasoning and Problem Solving
The “human thinking” should be considered very carefully when designing an interactive
system. Humans are not like other creatures or animals who are confined in their thinking
abilities. Humans are sufficiently capable to reason and to solve a problem. When we are
talking about thinking, we must have to consider two aspects, reasoning and problem solving.
a) Reasoning:
Reasoning means we make a conclusion based on our knowledge. There are three sorts of
reasoning- deductive, inductive and abductive. Deductive thinking implies logical
conclusions from given premises. Example: If it is Sunday, then she will not go to work; It is
Sunday; Therefore she will not go to work. Inductive thinking implies that we take a view
from known cases which we haven't seen. Example: If we ever observed each elephant has a
trunk, we infer that all elephants have trunks. Abductive thinking implies that we can reason
from a fact to the action or state that cause it. Example: Suppose we realise that Ram drives
too fast when he is drunk. Now if we see Ram is driving too fast, we may say he has been
drinking. But the cause of fast driving may be different. For emergency purpose also Ram can
drive so fast. Generally user thinks that a particular event is caused by the same action only if
that event always follows that action. We need to design an interactive system in such a way
that user don’t get confused while interacting with computer.

b) Problem Solving:
Unknown task is solved by the humans by utilisig their own knowledge. Many theories are
proposed about problem solving. In 1970 scientist Newell and Simon invented a theory called
Problem Space Theory. This theory is based on the idea that “the human mind is a limited
information processor”. This processor can be seen like an automata with states. We can
transform from initial state over several steps to reach the goal. Another way to solve problem
is analogical mapping. In this case we outline new issue to known ones. User can do the
mistake while a special task is being solved. There are two models of mistakes or errors, slips
and the mental model. Slips are the mistakes from known skills. Suppose we change the shut
down button of winow from left to right. In this case most of the users obviouely commit
mistakes and will click on the left end.. So while designing an interactive system, we should be
careful about the changes we make in the system. The mental model is based on the idea that
user do mistakes when they understand the system in a wrong way. So, we need to make our
frameworks simple to avoid user mistakes.

Self-assessment Questions
1) When reading a sentence, our eyes move rapidly around is called as __________.
a) Saccades b) Acoustical
c) Kinetesis d) Roboters
2) Blind people depend on __________ aids when they use computers.

3) Touch gives us a consciousness of the position of our fingers on the keyboard; this
is called __________.
4) The human __________ memory has limited capacity.

a) Short-term b) Episodic
c) Long- term d) Sensory
5) The __________ memory is the memory of autobiographical events like places,

times, emotions and contexts.
a) Short-term b) Episodic
c) Long- term d) Sensory

1.1.2 The Computer

A computer is an electronic device which is capable of manipulating information or data. It
has got the ability to store, retrieve and process data. The elements of the computer are
categorised into four types input, output, memory and processing devices. The following
figure 1.1.1 shows the Elements of Computer.
Figure 1.1.1: Elements of Computer
(i) Text Entry Devices
In the early days the text entry was performed utilizing the punch cards. With the easy
availability and accessibility of disk storage systems, punch cards were obsoleted and
keyboard has taken its place. One of the fundamental benefits of the keyboard is that it
communicates with the PC directly notifying the computer that a key is pressed. These days,
keyboards are accessible in different styles and structures. They are "ergonomic," asymmetric
moulded keys, with multimedia keys, foldable, lit up and so on. But the "QWERTY" type of
keyboard is generally preferred by many of us. The recent keyboards are found with the
expansion of additional keys such as the arrow keys that control the programs like media
players or web programs. The mobile phone keypad plays an important role as a text input.
Mobile phone keypad has 0-9 digits only not the full alphanumeric numbers. To the solution
of this problem, these keys are pressed several times to get the desired alphabet. Now a days
mobile takes handwriting also as an input and converts it into text.

The following figure 1.1.2 represents a Keyboard:
Figure 1.1.2: Keyboards
(ii) Positioning, Pointing and Drawing
Pointing device is also under the category of input device. By a pointing device, a user can
point, position and can select the item on the screen. User can draw on the screen and so on.
Pointer device controls the pointer or cursor on the screen. Mouse, trackball, touchpad,
joystick, touch screen, light pen, digitizer or graphic tablet are the few examples of pointing
devices.
(a) Mouse:
The mouse is very small and palm size device. It is very easy to use. The mouse is appended to
the PC by a cable or remote connection. The mouse contains one wheel or 2 buttons. The left
button of the mouse is primary mouse button. It can be clicked, or double clicked to fulfil
different purposes. For instance, a button on the screen is chosen by clicking the left button of

a mouse. Similarly, a program or icon is opened by double-clicking the left button of mouse.
The wheel controls the rotation of the pointer. The following figure 1.1.3 represents a mouse.
Figure 1.1.3: Mouse
(b) Trackball:
A trackball performs operations like a mouse. It has a moveable ball on the highest point of it.
The ball is turned or moved with fingers or palm of the hand to move the pointer on the
screen. Trackball is available with different sizes. The trackball is now accessible in smart
phones and portable workstations also. It is sold as an alternative to mouse. Trackballs are
helpful for the RSI sufferer and video game player. The following figure 1.1.4 represents a
trackball.
Figure 1.1.4: Trackball
(c) Touchpad:
Touchpad is a pressure-sensitive pointing device. Touchpad is additionally called as track

pad. It has no moving expressions. It is a small, flat surface on which users move their fingers
to move the pointer on the screen. Touch Pad additionally has two buttons. These buttons are
situated close to the pad. These buttons act as that of the mouse buttons. Touch Pad is
regularly utilised with portable workstations. It can be settled on the keyboard. The following
figure 1.1.5 represents a touchpad.

Figure 1.1.5: Touchpad
(d) Joystick:
Joystick has a vertical handle or hand-held stick. The hand-held stick is used to control the
directional movement of pointer on the screen. Joystick additionally contains one or two
buttons. The button of the joystick is pressed to activate an event or an activity. Joystick is
generally used to play computer games. The following Figure 1.1.6 represents a joystick.
Figure 1.1.6: Joystick
(e) Touch Screen:
In touch screen input is given to the PC directly by touching the screen with fingertip. Touch
Screen has the sensors which can sense that a touch has occurred on the screen. Touch
Screen is utilised to select an icon or decission from a menu accessible on the screen. It is very
fast to access. There are some disadvantages also to use the touchscreen. Screen can be
marked with scratches by repititive use of touch screen. Sometimes it is very difficult to access
small region by touching the screen. Instead of these difficulties, we people like to use the
touch screen as all the smart phones are now touchscreen only. ATMs make utilization of the
Touch Screen. Touch Screen frameworks are now utilized in different areas. The following
image 1.1.7 represents Touch Screen.

Figure 1.1.7: Touch Screen
(f) Light Pen:
The light pen is a hand-held pointing device for giving input to a system. It looks like a pen.
This is a light-delicate input device. It is associated with the PC by using a wire. The tip of pen
contains an element which is light sensitive. To provide input to the computer the pen is
touched with the screen directly. At the moment when the screen is touched, it recognizes or
senses a position on display. The user focuses on the object to be chosen on the screen and
after that presses the button on the light pen. Light Pen is regularly utilized by specialists and
realistic designers as an input gadget. It is used for fine selection and drawing. It needs an
exclusive screen also. Personal Digital Assistant (PDA) and other types of hand-held
computers make use of light pens.The following figure 1.1.8 represents a light pen.
Figure 1.1.8: Light Pen
(g) Digitizer or Graphics Tablet:
Digitizer is an input device, used for drawing new images. It is also known as graphics tablet
or drawing tablet. It looks like a flat, rectangular board (or pad) and it has a pen for drawing
called stylus. User draws on board using stylus. It is same like a person draw something on
paper. It can capture the image from paper also. Each and every location on the rectangular
board is a point that denotes the position on the computer screen. The following figure 1.1.9
represents a Digitizer or Graphics Table.

Figure 1.1.9: Digitizer or Graphics Table
(iii) Display Devices
Interactive computer system what we use, need to have some display devices to show the
output. There are the standard monitors, but they are now available in numerous varieties
like LCD, LED etc. These later generations of the display units are not only occupy less space
but also more efficient in performance.
CRT:
CRT denotes Cathode Ray Tubes. It is an extremely old style of display. In earlier days,
television screen had the CRT display like the computer display. In CRT, electron gun
discharges the electrons, which is then focused and directed by magnetic fields. As the
electron beam hits the phosphor-coated screen, the phosphor is excited by the electrons and
glows. The picture shows up on the screen according to the projections. These screens can be
of different sizes.
LCD:
LCD denotes Liquid Crystal Display. Now the time has changed and CRT has been out of
date. LCD consumes less power than CRT. LCD display is the light and flat plastic screen. It
utilizes liquid crystal technology. Now it is found everywhere, whether it is a television screen
or computer display screen.
LED:
It is a Light Emitting Diode based display. LED is another new innovation. It is a flat panel
display. LED uses the backlight which is nothing but fluorescent light. There are many ways
how LEDs are embedded in the back of the screen. One way to have the LEDs at the edge of

the screen. Other way, the array of LEDs, which are placed across the whole backside of the
display.
Plasma:
Small sized cells are present in the display. Hence, the name is Plasma display. This is another
new invention. When the voltage is provided to these cells, which are made of noble gases, the
ultra-violet rays are generated. The light increases its brightness and finally the light is
emitted via the display. Now a days phosphorus are used instead of cells. So the colour quality
has been improved a lot. It is good for video display.
Projector:
The projectors are generally used in every organisation to broadcast the information on the
screen so that the information is delievered to a large number of users. The data/ information
can also be projected on the wall, so that it can be made visible to more people at the same
time.
(iv) Memory
A memory is similar to that of a human brain which is mainly used to store data and
instructions. Data can be stord here temporarily or permanently. The computer memory is
capable of storing large volumes of data.
Memory Types:
• Internal Memory – cache memory / primary or main memory
• External Memory – magnetic disk / optical disk / magnetic tape etc.

The following figure 1.1.10 illustrates the memory of a computer.
Figure 1.1.10: Memory of Computer
CPU Register:
It is the processor register. It is very fast. This type of memory is at the top of memory
hierarchy.
Cache Memory:
Cache memory is also high speed memory. It is an intermediate memory between primary
memory and cpu register. The data frequently used by the cpu, can be kept in cache memory.
RAM:
A RAM is called as the primary memory of the computer which is used to store data, program
and program result. It is known as random access memory (RAM). It is a read write memory.
RAM is volatile. The information is lost when we turn off the PC or if there is a power
disraption. RAM is of two types. They are Static RAM (SRAM) and Dynamic RAM (DRAM).

ROM:
Rom is also a primary memory. ROM indicates Read Only Memory. In this memory, we can
just read yet can't compose on it. ROM is a non-volatile memory. In ROM, data can be stored
permanently. ROM stores the directions to start the computer when power is initially turned
ON. This operation is called as bootstrap. ROM chips are utilised as a part of the PCs, as well
as in other electronic machines like washing machines and microwave.
Secondary memory:
This is the external memory type. Secondary memory is slower than primary memory or
main memory. This is non-volatile type of memory. Magnetic tape, magnetic disk (floppy
disk, hard disk), optical disk (CD, DVD) are the examples of secondary memory.
6) __________device permits direct interaction with the computer system.
a) Keyboard b) Trackball
c) Pointing stick d) TouchScreen
7) __________ has moveable ball on the top of it.

8) A __________ is a pressure-sensitive pointing device and it resembles a pencil

eraser.
9) A __________ is a special video display screen.

10) __________memory is small, both in terms of its physical size and capacity.
a) RAM b) ROM
c) SROM d) DROM

1.1.3 The Interaction

Interaction is all about the communication. Human computer interaction implies the
communication between human and computer. There are various ways of communication. In
one way- user gives all the data or information to the computer at once to perform the task.
The other way – user constantly gives the data or information or instruction and gets the
feedback. Here we will see model of interaction and style of interaction.
(i) Models of Interaction
Here we will discuss about Norman’s “The execution-evaluation cycle” model.
The execution-evaluation cycle
This is a famous model of interaction. It is very close to our understanding of interaction.

This can be divided into two parts: execution and evaluation. These two parts can be further
divided into the following stages.
1. Establishing the goal
2. Forming the intension
3. Specifying the action sequence
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the system state
At first the user makes a goal. The goal is required to be translated into more specific
intension. User gets into the new state of system after sequence of actions are executed. After
getting the system state, user interprets whether the syatem has met his expectation or not. If
expectation is met, the interaction is successful, otherwise again have to repeat the interaction
cycle.
Now we will see about gulf of execution and gulf of evaluation.
Gulf of execution: The difference between user’s formulation of action to reach the goal and
the actions allowed by the system.

Gulf of evaluation: The difference between the user’s expectation of the changed state of the
system and the actual changed state of the system.
So, for better interactive system, the interface should be made in such a way that it reduces the
gulf.
Interaction Framework:
Abowd and Beale proposed a model that is the extension of the Norman’s model. This model
is divided into four components: system, user, input and the output. Language of the user is
task and the language of the system is core. Interface is formed by input and the output. In
this interactive cycle, there are four steps. User specifies the task. Tasks are articulated within
input language. User input language or task language converted into the core language and
the system performs the task. After the system execution, system presents its new state i.e. the
output of the system. Now user observes that wheather his expectation has met or not. The
following figure 1.1.11 represents the components in interactive system and the translation
between the components.
Figure 1.1.11: Components in an Interactive System
(ii) Frameworks & HCI
Here we will discuss about the interaction framework and the human computer interaction.
From the following figure 1.1.12 we can see a dialog design and the interface style is placed in
the framework input branch. Articulation and performance belongs to the input branch.
Design of the screen, presentation and observation belongs to the output branch. The entire

interaction framework now capable of interacting between system and the user. The following
figure 1.1.12 represents Interaction framework and HCI.
Figure 1.1.12: Interaction Framework and HCI
11) Number of steps involved in execution-evaluation cycle.
a) 3 b) 2
c) 7 d) 4
12) Difference between user’s formulation of action to reach the goal and the actions
allowed by the system is called __________.
a) Gulf execution b) Gulf evaluation
c) Gulf inputMenus d) Gulf output
13) __________and screen design narrates to the output branch of the framework.
a) Presentation b) Console
c) Default d) Summary

Summary
o HCI contains three parts: the user, the computer and the coordination between
the user and computer.
o HCI systems are easy, operative and entertaining.
o Software engineering emphasises on the production of software application

solutions, while HCI focuses on determining approaches and techniques that
support people.
o The functionality of our auditory system use special warning sounds to attract
user’s attention when he is interacting with a computer.
o Long term memory enables us to know how we can react in a special situation.
o Heuristics are used to select appropriate operators to reach the goal.
o Nowadays keyboards come in various styles and forms. "ergonomic",

asymmetrically shaped keys, with multimedia-keys, foldable, illuminated, and
soon
o A pointer characterises a small symbol on the screen. It appears on the display in

Graphical User Interface (GUI) environment.
o ROM chips are not only used on the computer, but also in other electronic items
like a washing machine and microwave oven.
o Interaction can be defined as a conversation between the computer and the user
o The four primary segments in an interactive framework that are the System, the
User, the Input and the Output

Terminal Questions
1) Explain about the Input-Output Channels in human
2) Write in brief about the input devices used in the computer
3) Explain the interaction framework
Answer Keys
Question No. Answer
1 a
2 b
3 c
4 a
5 b
6 a
7 b
8 c
9 d
10 a
11 c
12 a
13 a

Activity
Activity Type: Offline Duration: 30 Minutes
Description:
What input and output devices would you use for the following systems?
For each, compare and contrast alternatives.
a) Portable Word Processor
b) Air Traffic Control System
c) Worldwide Personal Communication System

Bibliography
e-References
• Human-Computer Interaction (HCI). (2016) (1st ed.). Retrieved from
https://www.techopedia.com/definition/3639/human-computer-interaction-hci
• HCI (human-computer interaction). (2016) (1st ed.). Retrieved from

http://searchsoftwarequality.techtarget.com/definition/HCI-human-computer-
interaction
• A Brief History of Human Computer Interaction Technology. (2016) (1st ed.).

Retrieved from http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html
• Goals of Human-Computer Interaction. (2016) (1st ed.). Retrieved from

http://facweb.cs.depaul.edu/cmiller/hci440/goals.html
• Advantages and disadvantages of H-C Interaction. (2016) (1st ed.). Retrieved from
https://sites.google.com/site/hchumancomputerinteraction/home/advantages-
and-disadvantages-of-h-c-interaction
Image Credits
• Figure 1.1.10:
http://fit.mta.edu.vn/files/DanhSach/__Human_computer_interaction.pdf
• Figure 1.1.11:
http://fit.mta.edu.vn/files/DanhSach/__Human_computer_interaction.pdf
External Resources
• Dix, A., Finlay, J. E., Abowd, G. D., & Beale , R. Human-Computer Interaction (3rd
ed.). Pearson Education Limited (2004).
• Pinder, S. Advances in Human Computer Interaction . InTech. (2008).

Video Links
Topic Link
HumanComputer Interaction | https://www.youtube.com/watch?v=WW1g3UT2zw

Stanford Universit w&list=PLLssT5z_DsK_nusHL_Mjt87THSTlgrsyJ
Human-Computer Interaction https://www.youtube.com/watch?v=oO0yzTW62xQ
Tyler: Human Computer

https://www.youtube.com/watch?v=4kfe_MJwEoQ
Interaction (Thought Café Today)
Elements of computer https://www.youtube.com/watch?v=elzsBp6h-0c

Notes:

Introduction to UI/UX: Understanding Human Computer Interaction

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction to UI/UX: Understanding Human Computer Interaction

Uploaded by

Copyright:

Available Formats

Introduction to UI/UX

Human Computer Interaction Foundations

Models & Theories

Chapter Table of Contents

Human Computer Interaction Foundations

Introduction to UI/UX | Introduction to HCI

• Explain the basic concepts of HCI

• Classify the different types of devices available for interaction

• Describe typical capacities of computer memory and storage standards

• Elaborate the function of interaction framework that used to explain problems

• Outline the fundamentals of HCI

• List the devices to communicate between human and computer

• List the computer memory and storage standards

• Summarize the effectiveness of interaction between human and computer

Introduction to UI/UX | Introduction to HCI 1

1.1.1 The Human

a) Visual Input Channel:

2 Introduction to HCI | Introduction to UI/UX

So when we need to design a user-friendly computer, it is effective to use computers with a

Introduction to UI/UX | Introduction to HCI 3

b) Auditoral Input Channel:

c) Haptic Input Channel : Touch

d) Human Output Channel: Movement

4 Introduction to HCI | Introduction to UI/UX

(ii) Human Memory

Introduction to UI/UX | Introduction to HCI 5

(iii) Thinking: Reasoning and Problem Solving

6 Introduction to HCI | Introduction to UI/UX

Introduction to UI/UX | Introduction to HCI 7

2) Blind people depend on __________ aids when they use computers.

4) The human __________ memory has limited capacity.

5) The __________ memory is the memory of autobiographical events like places,

8 Introduction to HCI | Introduction to UI/UX

1.1.2 The Computer

Figure 1.1.1: Elements of Computer

(i) Text Entry Devices

Introduction to UI/UX | Introduction to HCI 9

The following figure 1.1.2 represents a Keyboard:

Figure 1.1.2: Keyboards

(ii) Positioning, Pointing and Drawing

10 Introduction to HCI | Introduction to UI/UX

Figure 1.1.3: Mouse

Figure 1.1.4: Trackball

Touchpad is a pressure-sensitive pointing device. Touchpad is additionally called as track

Introduction to UI/UX | Introduction to HCI 11

Figure 1.1.5: Touchpad

Figure 1.1.6: Joystick

(e) Touch Screen:

12 Introduction to HCI | Introduction to UI/UX

Figure 1.1.7: Touch Screen

(f) Light Pen:

Figure 1.1.8: Light Pen

(g) Digitizer or Graphics Tablet:

Introduction to UI/UX | Introduction to HCI 13

Figure 1.1.9: Digitizer or Graphics Table

(iii) Display Devices

14 Introduction to HCI | Introduction to UI/UX

• Internal Memory – cache memory / primary or main memory

• External Memory – magnetic disk / optical disk / magnetic tape etc.

Introduction to UI/UX | Introduction to HCI 15

The following figure 1.1.10 illustrates the memory of a computer.

Figure 1.1.10: Memory of Computer

16 Introduction to HCI | Introduction to UI/UX