Principles of HCI

Norman’s Seven Principles

1. Use both knowledge in world & knowledge in head.
2. Simplify task structures
3. Make things visible.
4. Get the mapping right(User mental model-Conceptual
model- Designed model)
5. Convert constraints into advantages( Physical Constraints,
Cultural constraints, Technological constrains)
6. Design for error
7. When all else fails-Standardize
 Human Memory
Human memory is a powerful mental process that has many implications
on life and how you experience things, from remembering meaningful
events to enabling you to execute tasks and achieve goals. In essence,
human memory has three facets: sensory memory, short-term memory
and long-term memory.
 Sensory memory
• The sensory memories act as buffers for stimuli received through each
of the senses: iconic memory for vision, echoic memory for sounds and
haptic memory for touch.

• These memories are constantly overwritten by new information

coming in on these channels.

• Information is passed from the sensory memory into short-term

memory by attention, filtering the stimuli to those that are at that
moment of interest (arousal, or shift of attention).
 Short-term memory
• STM is used to store information which is only required fleetingly.
• STM can be accessed rapidly, however, also decays rapidly.
• It has a limited capacity.
• Miller stated the 7+/-2 rule (The magical number seven experiment purports that
the number of objects an average human can hold in working memory), which
means that humans can store 5-9 chunks of information.
• Chunks can be single items or groups of items, like 2 digits of a telephone
number grouped together.
• Patterns can be useful as aids to memory.
• The recency effect suggests that STM recall is damaged by interferences of
other information. Long term memory is not effected.
 Long-Term memory

LTM differs from STM in various ways.

It has an unlimited capacity, a slow access time and forgetting occurs more slowly or not
at all. Information is stored here from the STM through rehearsal.

There are 2 types of LTM:

1. Episodic Memory
2. Semantic Memory

Episodic memory represents our memory of event and experiences in a serial form.
Semantic memory is a structured record of facts, concepts and skills that we have
acquired, derived from the episodic memory.
 There are 3 main activities related to LTM: storage of information,
forgetting and information retrieval.

Storage: The rehearsal of a piece of information from the STM stores it in the LTM.
If the total learning time is increased, information is remembered better (total time hypothesis).
The learning time should be well spread (distribution of practice effect).
But repetition alone is not enough: information should be meaningful and familiar, so it can be
related to existing structures and more easily incorporated into memory.

Forgetting: There are 2 main theories of forgetting: decay and interference.

Decay suggests that information held in LTM may eventually be forgotten.

Jost’s Law states that if 2 memory traces are equally strong at the same time, the older one will be
more durable. Information, however, can also be lost through interference: if we acquire new
information, it causes the loss of old information: retroactive interference. It is also possible that
the older information interferes with the newly acquired information: proactive inhibition.
Forgetting is affected by emotional factors too.
 Retrieval:
There are 2 types of information retrieval: recall and recognition.

In recall the information is produced from memory. It can be facilitated

by providing cues, e.g. the category in which the information may be
placed.

In recognition, the presentation of the information provides the

knowledge that the information has been seen before.
Disciplines Involved in HCI
 Thinking: reasoning and problem solving

• Thinking can require different amounts of knowledge.

• Some thinking activities are very directed and the knowledge required is
constrained.

• Others require vast amounts of knowledge from different domains.

• Thinking can be divided in reasoning and problem solving.

 Reasoning
Reasoning is the process by which we use the knowledge we have to draw conclusions or infer something
new about the domain of interest. There are different types of reasoning: deductive, inductive and
abductive.

Deduction: Deductive reasoning derives the logically necessary conclusion from the given premises. The
logical conclusion does not have to correspond to our notion of truth. The human deduction is weak at the
points where truth and validity clash. It allows us to take short cuts which make dialog and interaction
between people informative but efficient.

Induction: Inductive reasoning is generalizing from cases we have seen to infer information about cases
we have not seen. In practise, induction is used to fill in missing details while reasoning. It is useful
process, which is constantly used in learning about our environment.

Abduction: Abduction reasons from a fact to the action or state that caused it. Abduction is used to derive
explanations for the events we observe. If an event always follows an action, the user infers that the event
is caused by the action unless evidence to the contrary is available. In fact the event and the action are
unrelated, confusion and even error occurs.
 Problem solving
Problem solving is the process of finding a solution to an unfamiliar taste, using (adapting) the knowledge
we have. Human problem solving is the ability to adapt the information with new situations. However
often solutions seem to be original and creative. There are different views on problem solving:

Gestalt theory: The Gestalt theory states that problem solving is both productive and reproductive:
Reproduction problem solving is based on previous experience, but productive problem solving is based;
on insight and restructuring of the problem. However, this theory has not been accepted as ‘sufficient’.

Problem space theory: The problem space comprises problem states and problem solving involves
generating these states using legal state transition operators. People use these to move from the initial
state to the goal state. One such theory by Heuristics (e.g. Means-end analysis) are employed to select the
right operators.

Use of analogy: Problems are solved by mapping knowledge relating to a similar known domain to the
new problem: analogical mapping.
 Skill Acquisition

• Experts often have a better encoding of knowledge: information structures are fine
tuned at a deep level to enable efficient and accurate retrieval. According to the
ATC(Anderson’s ACT) model, these skills are acquired through 3 levels:

• The learner uses general-purpose rules which interpret facts about a problem. (slow,
memory-demanding)

• The learner develops rules specific to the task, using proceduralization.

• The rules are tuned to speed up performance, using generalization.

15
 Errors and mental models

• There are different types of errors: changes in context of skilled

behaviour can cause errors.

• An incorrect understanding/model of a situation can cause errors too,

because humans tend to create mental models, based on experience,
which may differ from the actual situation.
 Emotion
Emotion involves both physical and cognitive events. Our body
responds biologically to an external stimulus and we interpret
that in some way as a particular emotion.

That biological response (affect) changes the way we deal with

different situations and this has an impact on the way we
interact with computer systems.
 Individual Differences
• The principles and properties discussed apply to the majority of people,
but humans are not all the same. Differences should be taken into
account in the designs: divide the users in target groups.

• For example: the current emphasis on visual interfaces excludes

visually impaired, unless the design also make use of the other sensory
channels.

• The designs should allow for users who are under pressure, feeling ill
or distracted by other concerns or should not push to their perceptual or
cognitive limits.
 PSYCHOLOGY AND THE DESIGN OF
INTERACTIVE SYSTEMS
• So far we have looked briefly at the way in which humans receive, process
and store information, solve problems and acquire skill. But how can we
apply what we have learned to designing interactive systems?

• For example, we can deduce that recognition is easier than recall and allow
users to select commands from a set (such as a menu) rather than input them
directly.

• In order to apply a psychological principle or result properly in design, we

need to understand its context, both in terms of where it fits in the wider
field of psychology and in terms of the details of the actual experiments, the
measures used and the subjects involved.
 Guidelines
• General design principles and guidelines (straightforward or complex)
can be and have been derived from the above discussed theories.

• Some of these are relatively straightforward: for instance, recall is

assisted by the provision of retrieval cues so interfaces should
incorporate recognizable cues wherever possible.

• Others are more complex and context dependent and many of them are
derived from psychological theory.
 Models to support design
• Psychological analysis has led to the development of analytic and predictive models
of user behaviour.

• Because Some of these include a specific model of human problem solving, others of
physical activity, and others attempt a more comprehensive view of cognition.

• Some predict how a typical computer user would behave in a given situation, others
analyze why particular user behaviour occurred.

• All are based on cognitive theory.

 Techniques for evaluation
• Psychology provides a range of empirical techniques which we can
employ to evaluate designs and systems.

• In order to use these effectively we need to understand the scope and

benefits of each method.
 Questions?
1. Describe Human Memory
2. What is reasoning? Explain its types.
3. Write a brief description on: Human emotions, psychology and
design.
4. Write short notes on human emotions.
5. What are the three types of sensory receptors. Explain.
 The computer-Introduction
• Interaction (with or without computer) is a process of information
transfer.
• The diversity of devices reflects the fact that there are many different
types of data that may be entered into and obtained from a system, as
there are many different users.
• In the early days, batch processing was common: a large mass of
information was dumped into and processed by the computer.
• Nowadays computers respond within milliseconds and computer systems
are integrated in many different devices.
 Text entry devices
• The alphanumeric keyboard: The vast majority of keyboards have a standardized layout, known by
the first six letters on the top row: QWERTY. The non alphanumeric keys are not Standardized.

• This layout is not optimal for typing, but dates from the time of mechanical limitations of the
typewriter.

• Today, the keys can also be arranged in alphabetic order (the alphabetic keyboard), but this does not
improve typing performance.

• The DVORAK keyboard does, placing the keys in a different order on a similar layout as found on the
QWERTY keyboards.

• The layout minimized the stretch of fingers and the use of weak fingers, reducing fatigue and
increasing typing speed (10-15%).
 Chord keyboards
• Chord keyboards are significantly different from normal alphanumeric keyboards.

• On chord keyboards, only a few keys are used. Letters are produces pressing multiple keys
at once.

• For Eg.: In the micro write, the pattern of multiple keypresses is chosen to reflect the actual
letter shape.

• Such keyboards have a number of advantages. They are compact: simply reducing the size
of a conventional keyboard makes the keys too small and close together.

• They are smaller than conventional keyboards and have a short learning time.
• Fig: page no. 66 on text book
 Phone pad and T9 entry
The numeric keys on a cell phone can be pressed more than once to enter letters.

Most phones have 2 keypad modes: a numeric and an alphabetic mode.

Most phones have additional modes for entering (initial) capitals.

On modern phones you can also find the T9-algorithm.

T9 stand for: Text on nine keys (T9) is a predictive text technology mostly used in mobile phones and
other devices with standard nine-key keypads.

T9 algorithms: T9 combines the groups of letters on each phone key with a fast-access dictionary of
words. For eg. “3926753” becomes “example”

This uses a large dictionary to disambiguate words by typing the relevant letters keys once.
 Handwriting recognition

• Current technology is still fairly inaccurate and makes a lot of mistakes, partly
• due to the enormous differences between people’s handwriting.

• HR deals mostly worth stroke information: the way in which the letter is drawn, not
the letter itself. Therefore, online recognition is most accurate.

• HR has the advantage of size and accuracy over small keyboards and are therefore
often used in mobile computing.
 Speech recognition
The performance of speech recognition is still relatively low, even for a restricted
vocabulary.

Adjusting the system for use with natural language gives birth to even more problems:
the ‘errors’ in natural language use, different voices, emotions and accents etc.

This means the system has to be tuned for each different user.

SR can be used in 3 scenarios:

as an alternative text entry device, replacing the keyboard in the current software, ith
new software especially designed for SR and in situations where the use of keyboards is
impractical or impossible.
 POSITIONING, POINTING AND DRAWING
Many pointing devices can also be used for free-hand drawing although the skill of
drawing with a mouse is very different from using a pencil.
The mouse is still most common for desktop computers, but is facing challenges as
laptop and handheld computing increase their market share.

Computer-aided design (CAD), where positioning and drawing are the major
activities.
1. The Mouse 6. Stylus and light pen
2. Touchpad 7. Digitizing tablet
3. Trackball and thumbwheel 8. Eye gaze
4. Joystick and keyboard nipple 9. Cursor keys and discrete positioning
5.Touch-sensitive screens(touchscreens)
 The mouse

The mouse is an indirect input device, because a transformation is

required to map from the horizontal nature of the desktop to the vertical
alignment of the screen.

Invented in 1964 by Engelbart, his mouse used 2 wheels that slid across
the desktop and transmitted x, y-coordinates to the computer.

There have been experiments with foot-controlled mice.

Fig no. : 2.6 page no. 72

 Touchpad
• Touchpads are touch-sensitive tablets, operated by sliding the .nger
over it and are mostly used in notebook computers.

• Performance can be increased using accelerators.

 Trackball and thumbwheel
• A trackball is an upside-down mouse: instead of moving the device
itself, the ball is rolled to move the cursor.

• Trackballs are often used by RSI users.

• Thumbwheels (in 2 dimensions) o.er less usability because they can

only manipulate the horizontal and vertical movement of the cursor.

• 1-dimensional thumbwheels are often included on the normal mice the

enhance the scrolling.
 Joystick and keyboard nipple
There are two types of joysticks: absolute sticks, in which the position of
the cursor corresponds to the position of the joystick in its base, and

isometric sticks, in which the pressure on the stick (in a certain direction)
controls the velocity of the cursor in that direction.

Keyboard nipples are tiny joysticks that are sometimes used on notebook
computers.
 Touch-sensitive screens (touchscreens)
Touchscreens detect the position of the user.s .nger or stylus on the screen
itself and are therefore very direct.

They work by having the .nger/stylus interrupting a matrix of light beams,

making capacitance changes on a grid overlaying the screen or by
ultrasonic reflections.

It is a direct device: no mapping is required.

However the selection of small area.s is di¢ cult and intensive use can be
tiring.
 Stylus and lightpen
For more accurate positioning, systems with touch-sensitive surfaces
often emply a stylus.

An older technology for the same purpose is the lightpen, which emits
radiation detected by the screen.

A difficulty of this and other direct devices is that pointing obscures the
display, making it more di¢ cult to use in rapid successions.
 Digitizing tablet
A device used for freehand drawing.

A resistive tablet detects point contact between two separated conducting

sheets.

Magnetic, capacitive and electrostatic tablets use special pens.

The sonic tablet requires no pad: an ultrasonic sound emitted by the pen is
detected by 2 microphones.
 Eyegaze
• Eyegaze allows you to control the computer by looking at it, while
wearing special glasses, head-mounted boxes etc.

• By tracking a laser beam’s reflection in the eye, the direction in which

the eye is looking is determined.

• The system needs to be tuned and is very expensive, but also very
accurate.
 Cursor keys and discrete positioning
• For 2D-navigation, cursor keys can sometimes be preferable.

• The same goes for remote-controls and cellphones.

 Display devices
The vast majority of interactive computer systems would be unthinkable
without some sort of display screen, but many such systems do exist,
though usually in specialized applications only
 Bitmap displays-resolution and color
• A bitmap-base means that the display is made of a fixed number of dots or pixels in a
rectangular grid.

• The color or intensity at each pixel is held by the computer’s video card.

• The more bits per pixel, the more colors/intensities are possible.

• Also is the resolution of the screen: the total number of pixels (in a 4:3-ratio) and the
density of the pixels.

• Anti-alinsing: softening the edges of line segments, blurring the discontinuity and
making the juggles less obvious.
 Technologies
• In a CRT-monitor a stream of electrons is emitted from an electron gun, which is than
focussed and directed by magnetic fields.

• As the beam hits the phosphor-coated screen, the phosphor is excited by the electrons and
glows.

• Flicker can be reduced by increasing the scanning rate or by interlacing, in which odd lines
are scanned first, followed by even lines.

• In LCD’s a thin layer of liquid crystals is sandwiched between two glass plates.

• External light passes through the top plate and is polarized.

• This passes through the crystal and is reflected back to the user’s eye by the bottom plate.

• The polarization of each single crystal can be turned electronically.

 Large displays and situated displays

• There are several types of large displays.

• Some use gas-plasma technology and usually have a 16:9-ratio.

• Several smaller screens can also be places together in a video wall.

• Projectors are possible too, in two variants: projectors with 3 lenses (red, green and blue)
can build a full-color image.

• LCD-projectors have a small screen, through which light is projected on a screen.

 Digital paper
Thin flexible material that can be written to electronically, but keeps
it’s contents when removed from the power supply.
 Devices for virtual reality and 3D interaction
Sometimes these use the ordinary controls and displays of a desktop
computer system, but there are also special devices used both to move and
interact with 3D objects and to enable you to see a 3D environment.
 Positioning in 3D
• Changing from 2D to VR does not mean going to 3 degrees of freedom, but (sometimes) to 6, because
except for moving in 3 dimensions, you can also roll, turn, twist etc.
• Humans can use a 3D-environment with a 2D-device (mouse).

• The human mind is therefore capable of handling multiple degrees of indirection.

• A 3D-input device is the 3D-mouse, which has 6 degrees of freedom: 3 for position (x,y,z),1 for pitch,
yawn and roll. Fig no. 2.12 page no. 88.

• However, sometimes its better to use a dataglove: a lycra glove with fibers laid around the fingers,
detecting the joint angles of the fingers and thumb.

• The position of the head can be tracked using a VR-helmed, which can also
• display the 3D-world to each eye.
• With other devices, e.g. special clothing or a modified trampoline, the position and movement of the
whole body can be tracked.
 3D displays
• 3D can be displayed on normal screens using shadows, depth etc.

• It is also possible to generate the natural stereoscopic images for both eye positions
and have them delivered to he eyes using a VR-helmed.

• Finally, users can enter a VR cave, where the VR world is projected around them.

• If the VR-system performances too slow, and there is a delay between movement and
image, disorientation and sickness may occur.
THE INTERACTION
 Defining the user interface
User interface, design is a subset of a field of study called human-computer interaction
(HCI).
• Human-computer interaction is the study, planning, and design of how people and
computers work together so that a person's needs are satisfied in the most effective
way.
• HCI designers must consider a variety of factors:
– what people want and expect, physical limitations and abilities people
possess,
--how information processing systems work, – what people find
enjoyable and attractive.
– Technical characteristics and limitations of the computer hardware
and software must also be considered.
• The user interface is to – the part of a computer and its software that people can see,
hear, touch, talk to, or otherwise understand or direct.
•The user interface has essentially two components: input and output.

• Input is how a person communicates his / her needs to the computer. – Some common input
components are the keyboard, mouse, trackball, one's finger, and one's voice.

• Output is how the computer conveys the results of its computations and requirements to the
user. – Today, the most common computer output mechanism is the display screen, followed
by mechanisms that take advantage of a person's auditory capabilities: voice and sound.

• The use of the human senses of smell and touch output in interface design still remain
largely unexplored.

• Proper interface design will provide a mix of well-designed input and output mechanisms
that satisfy the user's needs, capabilities, and limitations in the most effective way possible.

• The best interface is one that it not noticed, one that permits the user to focus on the
information and task at hand, not the mechanisms used to present the information and
perform the task.
 A brief history of the human-computer interface

• The need for people to communicate with each other has existed since we first walked upon
this planet.
• The lowest and most common level of communication modes we share are movements and
gestures.
• Movements and gestures are language independent, that is, they permit people who do not
speak the same language to deal with one another.
• The next higher level, in terms of universality and complexity, is spoken language.
• Most people can speak one language, some two or more. A spoken language is a very
efficient mode of communication if both parties to the communication understand it.
• At the third and highest level of complexity is written language. While most people speak,
not all can write.
• But for those who can, writing is still nowhere near as efficient a means of communication
as speaking.
• In modem times, we have the typewriter, another step upward in communication complexity.
• Significantly fewer people type than write. (While a practiced typist can find typing faster and
more efficient than handwriting, the unskilled may not find this the case.)
• Spoken language, however, is still more efficient than typing, regardless' of typing skill level.
• Through its first few decades, a computer's ability to deal with human communication was
inversely related to what was easy for people to do.
o The computer demanded rigid, typed input through a keyboard; people responded slowly
using this device and with varying degrees of skill.
o The human-computer dialog reflected the computer's preferences, consisting of one style or
a combination of styles using keyboards, commonly referred to as Command Language, Question
and Answer, Menu selection, Function Key Selection, and Form Fill-In.

What is User Interface ?

The 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.
 The Importance of the User Interface
● User Interface is the place for user-computer interaction and communication. For a
website, it is the link between users and a website.
● User interface refers to those qualities which make a website, application, or software
easily accessible for users.
● It’s a combination of attributes and features that your website or software provides.
● A good User interface is a combination of design, good human-computer interaction,
appealing graphics, organized layout, proper screen fit, and good typography among other
characteristics.

In general, UI is further divided into two sub-categories:

● Graphical control Interfaces (GUI) such as the desktop operating systems and mobile
operating systems that use GUI.
● Voice-controlled interfaces (VUIs) smart assistants like Siri, Alexa, and google
assistance interact with humans with artificial voice.
 The user interface not only serves one but many purposes for a successful website application such
as handling traffic, attracting visitors, linking seamlessly with users’ needs, helping visitors
understand the overall website, and other technical features.

• To build confidence and acquire new customers: A quality user interface builds a confident
environment throughout your website that users find trustworthy. Customers are automatically
attracted to a website that is well designed, easy to navigate, delivers the right information, and is
not jarring.
• To increase customer conversion: As mentioned earlier, user interface design is one of the main
ways to increase traffic to your website. A good UI design captivates your visitors and persuades
them to stay longer on your site. A good user interface is an intelligent interface that can assist
visitors to buy your products and also provide a great user experience.
• To reduce confusion and boost customer retention: The purpose of UI is to make a website as
user-friendly as possible. If a website has a disproportionate setup, poor colour contrast,
unnecessary pop-ups, and haphazard grouping of tools it will be confusing for visitors to move
ahead in the website.
 Good and Poor Design
• Good design makes a product useful.
• A product is bought to be used.
• It has to satisfy certain criteria, not only functional, but also psychological
and aesthetic.
• Poor design is one which is not easy to understand, distracting, difficult to
use and short lived.
• As I started seeing objects around me in a design perspective, I realised
that it is easy to identify good designs in comparison to poor designs.
• Good design is innovative..
• Good design makes a product useful.
• Good design is aesthetic.
• Good design makes a product understandable.
• Good design is honest.
• Good design is long-lasting.
• Good design is thorough down to the last detail.
• Good design is environmentally-friendly.
• Good design is as little design as possible
Thank You...!!!!