Human Computer Interaction: Teacher: Dr. Asma ARIBI
Human Computer Interaction: Teacher: Dr. Asma ARIBI
Human Computer Interaction: Teacher: Dr. Asma ARIBI
HCI, then, is human factors, but narrowly focused on human interaction with
computing technology of some sort.
4
II . Problems and challenge
1. HCI Problems:
A Bad user-interface can:
1. be annoying, embarrassing, frustrating, and even deadly.
2. Increase mistakes in data entry and system operation.
3. Makes functions become completely inaccessible.
4. System failure because of user rejection.
Reasons of failure:
lack of user involvement
lack of user requirements specifications
poor project planning and team problems
lack of senior management commitment
5
2. HCI challenge :
8
there are three types of memory or memory function:
sensory buffers, short-term memory or working memory, and long-term
memory.
1.Sensory memory
The sensory memories act as buffers for stimuli received through the senses. A
sensory memory exists for each sensory channel: iconic memory for visual
stimuli, echoic memory for aural stimuli and haptic memory for touch. These
memories are constantly overwritten by new information coming in on these
channels.
Information remains in iconic memory very briefly, in the order of 0.5 seconds.
9
Similarly, the existence of echoic memory is evidenced by our ability to ascertain
the direction from which a sound originates. This is due to information being
received by both ears.
Echoic memory allows brief „play-back‟ information. Have you ever had someone
ask you a question when you are reading? You ask them to repeat the question,
only to realize that you know what was asked after all. This experience, too,
is evidence of the existence of echoic memory.
It is clear that we are able to focus our attention selectively, choosing to
attend to one thing rather than another. This is due to the limited capacity
of our sensory and mental processes.
10
Short-term memory or working memory acts as a „scratch-pad‟ for temporary
Recall of information. It is used to store information which is only required
fleetingly.
For example, calculate the multiplication 35 × 6 in your head. The chances
are that you will have done this calculation in stages, perhaps 5 × 6 and then
30 × 6 and added the results; or you may have used the fact that 6 = 2 × 3
and calculated 2 × 35 = 70 followed by 3 × 70. To perform calculations
such as this we need to store the intermediate stages for use later. Or
consider reading. In order to comprehend this sentence you need to hold in
your mind the beginning of the sentence as you read the rest. Both of these
tasks use short-term memory.
Short-term memory can be accessed rapidly, in the order of 70 ms.
However, it also decays rapidly, meaning that information can only be held
there temporarily, in the order of 200 ms.
Short-term memory also has a limited capacity. There are two basic methods
for measuring memory capacity.
11
Therefore chunking information can increase the short-term memory capacity.
3.Long –term memory
If short-term memory is our working memory or „scratch-pad‟, long-term
memory is our main resource. Here we store factual information, experiential
knowledge, procedural rules of behavior.
It differs from short-term memory in a number of significant ways. First, it has
a huge, if not unlimited, capacity.
Secondly, it has a relatively slow access time of approximately a tenth of a second.
Thirdly, forgetting occurs more slowly in long-term memory, if at all
Long-term memory is intended for the long-term storage of information.
Information is placed there from working memory through rehearsal. Unlike
working memory there is little decay: long-term recall after minutes is the
same as that after hours or days.
12
4. Long-term memory structure
There are two types of long-term memory: episodic memory and semantic
memory.
- episodic memory : الذاكرة العرضية
- memory of events and experiences in a serial form.
- from this memory we can reconstruct the actual
events that took place at a given point in our lives.
- semantic memory: الذاكرة الداللية
- is a structured record of facts, concepts and skills that we have acquired.
- information is derived from that in our episodic memory, such that we can
learn new facts or concepts from our experiences;
- Items are associated to each other in classes, and may inherit attributes
from parent classes.This model is known as a semantic network.
- There are also connections within the network which link into other
domains of knowledge.
13
- is structured in some way to allow access to information, representation of
relationships between pieces of information, and inference. One model for the
way in which semantic memory is structured is as a network.
- Semantic networks represent the associations and relationships between single
items in memory. However, they do not allow us to model the representation of
more complex objects or events, which are perhaps composed of a number of
items or activities. Structured representations such as frames and scripts
organize information into data structures.
The second theory is that information is lost from memory through interference.
If we acquire new information it causes the loss of old information.
This is termed retroactive interference.
However, sometimes the old memory trace breaks through and interferes with
new information.This is called proactive inhibition. An example of this is when
you find yourself driving to your old house rather than your new one.
Forgetting is also affected by emotional factors.
Information retrieval.
There are wo types of information retrieval, recall and recognition
17
In recall the information is reproduced from memory. In recognition,
the presentationof the information provides the knowledge that the information
has been seen before.
III. Thinking: Reasoning and problem solving
1.Reasoning
Deductive : derives the logically necessary conclusion from the given premises.
ex; If it is Friday then she will go to work
It is Friday
Therefore she will go to work.
Deductive reasoning is therefore often misapplied.
Inductive
is a method of reasoning in which the premises are viewed as supplying some
evidence for the truth of the conclusion.
Abductive
18
Lecture 3
An overview of
computer input
devices
19
I. HCI factors to consider
A number of factors need to be considered when designing a human-computer
interface including:
1) The use of colors
Colors have specific connotations. Colors can be divided into two groups that
suggest temperature.
Warm colors such as red, orange and yellow are used in a human-computer
interface for an action or a warning
Cool colors such as green, blue and grey are used to suggest passivity or safety
example
Blue:provide informations
Red : serious error
20
2) Font size
Should be chosen so that it can be read easily by users with normal eyesight
without causing eye strain. Designers can help visually impaired users by
allowing them to choose a large point size.
3) Layout
help users to focus on the task that they are undertaking.
4) Navigation
A clear and easy to follow structure for navigating an interface will help users to
find their way around an interface and save wasted time.
5) Consistency
Designers can help users to learn how to use a new interface by:
Using a consistent design, for example by placing navigation buttons in the
same place on each screen or placing the title bar, menu bar and tool bar in the
same position across all the components of a software suite.
21
Making use of features and symbols that are familiar from other interfaces
such as icons and drop down menus.
6) On screen help
7) Differentiation
The designer of an interface can help users by limiting the quantity of information
that appears on the screen.
Some interfaces can be customized so that novice users are given a limited
number of choices while advanced users can select from more options.
8) Use by the disabled
Input can be provided using the spoken word and a microphone. Output can be
provided using headphones or loudspeakers.
22
II. Basic and complex input and output devices:
1.Input devices
o Buttons! simple to use and map to functionality:
fixed buttons with labels - ticket machines
cashpoint-machine model - map to screen text
games machines and programmable key pads
o Keyboard: discrete entry device
o Pointing devices
Direct pointing devices
• Lightpen
- Detects burst of light from screen phosphor
- Addresses individual pixels
Disadvantages:
- Arm fatigue
- Fragile device
- Obscures part of the screen
- Users have to remove their hands from keyboard
• pen-pad
pressure-sensitive pen and pad - good for drawing
23 pen on screen
• Touchscreen
Direct control on the screen using fingers
Intuitive to use
Good for public access systems
No moving parts
Good durability in high use environment
Disadvantages:
- Inaccurate
- Greasiness on screen from fingers
- Obscures part of the screen
- User too close to screen for comfort
Indirect pointing devices
• Mouse
moving cursor + selection with buttons. First mouse: 1964 by D.C.Engelbart
- Mechanical mouse
- Optical mouse
24
• Trackball
upside-down mouse
Requires no space
Popular with notebooks & portable computers
• Touchpad: same as touchscreen but finger pointing on a pad next to the keyboard
• Joystick:
Absolute: position in the base = position of cursor on the screen
Isometric: pressure on the stick = velocity of the cursor
Robust, inexpensive, good for tacking: often found in computer games
can have many axes, "hats", pedals, throttle, etc
• Graphics or digitising tablet:
positional information with a pen,
puck or stylus on a tablet.
- Electronic (resistive or magnetic) tablet
- Acoustic (ultrasonic pulse): can be adapted for 3D input
• Scanners and optical character recognition
• Scanners: 'hand held', 'flat bed', slide, film, drum etc
• Optical character recognition : OCR
- Read characters from a paper page
- Recognition from scanned image by software
32
• Audio and Video capture
• Data transducers + A to D converters , TTL inputs, relay O/P etc
Novel input devices
• Foot mouse: depress one edge to move cursor in that direction. Leaves hands free for other tasks
• Eye tracking controller: low-power laser into the eye.
- Equipment too expensive
- Good for selection, not for drawing (eye movement not smooth)
- useful for HCI experiments
- Suitable for disabled users
• Data Glove
3D input device
Fibre optic sensors to measure finger position + sensors (ultrasound) for 3D position and wrist
rotation
Rare use
Expensive
`Naturalness' of interaction - can even have feedback
• Handwriting recognition
- Current technology fairly inaccurate
- Enormous individual handwriting differences
- Letter identity depends on context
- Use of neural networks for recognition
• Speech recognition
Advantages:
New user easily trained/Free hands and user movement/Very suitable for disabled people
26
Problems:
Subject to interference from background noise
Severe limitations in distinguishing between similar sounds
Even after recognition, difficult to interpret by computer
27
28
29
Lecture 4
An overview of
computer output
devices
32
Definition
Convert information coming from a computer system into some form
perceptible by humans.
Visual
Auditory
Tactile: tactile output for visually impaired and blind.
Visual output Devices
Character-based displays
Liquid-cristal displays (LCD) , flat panel displays (FPDs
Used in stationary devices, in telephones, calculators
Graphics displays
CRTs, LCDs
HRES graphic displays used in stationary output devices ,
cockpits
Printing devices
Color vs black and white, dot matrix, laser, inkjet
Fax
33 Plotters (colored pens)
Recent Developments in I/O Devices
Handwriting recognition/personal digital assistants
3M Palm Pilot, Go Corp, Sony, Toshiba
Smart card
Thin plastic card, embedded micro-processor and memory
Information about user is stored on the card (e.g. employee ID, credit details)
Outputs information to special card readers
Biometric device
Advanced smart card that contains characteristics about a user such as
fingerprints, voice prints, retina prints, or signature dynamics
Haptic devices
Make it possible for users to touch, with their hands and fingers, virtual computer
models as if they where real word physical objects.
Feel an object‟s mass, explore its texture, and work with its form and
shape
Not many on the market; one of the more interesting ones is from a
campany called haptic
34
Wearable computer
Private Eye (reflection technology)
User wears a single high resolution LCD over one eye, while looking out
the other eye; image projected at infinity
Coupled with a portable computer, and other input devices
Wearable Computer
Portable, body mounted, voice activated computer
Recently tested in Bosnia, presently being adopted by the US. Armed
services.
Sixth Sense
Combination of camera and projector
Helmet-mounted display with speech interface
Military applications, „aim-fire‟ scenarios
35
Touchy Mouse
Logitech‟s WingMan Force Feedback mouse
Incorporates tactile feedback
User can feel the edges, contours, densities of virtual objects
Can make navigation more intuitive
Uses a special mousepad with rods connected to tiny motors
Future trends
Smart rooms
Can identify people and interpret their actions
House that knows where your kids are and tell you if they are
getting in trouble
Can supervise students during exams
Smart home
Perform activities according to user‟s preferences and usual actions
36
Smart clothes
Sort of a personal assistant that you wear
Tells you the name of people you meet, directions to your next
meeting
Built-in computer, camera, microphones other sensors
Camera built into software that tells you the name of the person you are
looking at by whispering his or her name into your ear
37
Capabilities and limitations of I/O devices
Degree of freedom
Dimensions 1D/2D/2.5D/3D
Temporal 1D
Information transmission
Transfer of information between device and human
Measured in bits/sec
Best estimation if no exact measures are available
Persistence
Duration of availability of the signal
Transient
Fleeting
Overwritten by succeeding signals
Permanent
Stays available as long as needed
Navigation
Movement of the user with the interaction space (screen :pointing
38 device/sound, video : forward, rewind, pause)
Lecture 5
Interaction styles
And
design principles
39
Interaction styles
The concept of interaction styles refers to all the ways the user can
communicate or otherwise interact with the computer system. The types
of interaction styles mentioned are usually command language, form fill
in, menu selection, and direct manipulation.
Command language (or command entry)
Command language is the earliest form of interaction style and is still
being used, though mainly on Linux/Unix operating systems.
Command language places a considerable cognitive burden on the user in
that the interaction style relies on recall as opposed to recognition
memory.
40
Advantages and disadvantages of Command Language
Advantages
- Flexible.
- Appeals to expert users.
- Supports creation of user-defined "scripts" or macros.
- Is suitable for interacting with networked computers even with low bandwidth.
Disadvantages
- Retention of commands is generally very poor.
- Learnability of commands is very poor.
- Error rates are high.
- Error messages and assistance are hard to provide because of the diversity of
possibilities plus the complexity of mapping from tasks to interface concepts and
syntax.
- Not suitable for non-expert users.
41
Form fillin
The form fillin interaction style (also called "fill in the blanks") was aimed
at namely non-experts users. When form fillin interfaces first appeared
the whole interface was form-based, unlike much of today's software that
mix forms with other interaction styles.
Back then, the screen was designed as a form in which data could be
entered in the pre-defined form fields. The TAB-key was (and still is) used
to switch between the fields and ENTER to submit the form. Thus, there
was originally no need for a pointing device such as a mouse and the separation of
data in fields allowed for validation of the input.
42
• Advantages and disadvantages of Form Fillin
Advantages
- Simplifies data entry.
- Shortens learning in that the fields are predefined and need only be
'recognised'.
- Guides the user via the predefined rules.
Disadvantages
-Consumes screen space.
-Usually sets the scene for rigid formalisation of the business processes.
43
Menu selection
A menu is a set of options displayed on the screen where the selection and
execution of one (or more) of the options results in a state change of the
interface.
44
Advantages and disadvantages of Menu Selection
Advantages
- Ideal for novice or intermittent users.
- Can appeal to expert users if display and selection mechanisms are
rapid and if appropriate "shortcuts" are implemented.
- Affords exploration
- Structures decision making.
- Allows easy support of error handling as the user's input does not
have to be parsed (as with command language).
Disadvantages
- Too many menus may lead to information overload or complexity of
discouraging proportions.
- May be slow for frequent users.
- May not be suited for small graphic displays.
45
Direct manipulation
The term direct manipulation was introduced by Ben Shneiderman in his
keynote address at the NYU Symposium on User Interfaces (Shneiderman
1982) and more explicitly in Shneiderman (1983) to describe a certain
„direct‟ software interaction style that can be traced back to Sutherlands
sketchpad (Sutherland 1963). Direct manipulation captures the idea of
“direct manipulation of the object of interest”, which means that objects of
interest are represented as distinguishable objects in the UI and are
manipulated in a direct fashion.
46
Advantages and disadvantages of Direct Manipulation
Advantages
- Visually presents task concepts.
- Easy to learn.
- Errors can be avoided more easily.
- Encourages exploration.
- High subjective satisfaction.
47
- Recognition memory (as opposed to cued or free recall memory)
Disadvantages
- May be more difficult to program.
- Not suitable for small graphic displays.
- Spatial and visual representation is not always preferable.
- Metaphors can be misleading since the “the essence of metaphor is
understanding and experiencing one kind of thing in terms of another”
which, by definition, makes a metaphor different from what it
represents or points to.
- Compact notations may better suit expert users.
WIMP interface
WIMP stands for Windows, Icons, Menus and Pointers
1- Forming a goal
-Example : I want more light so I can see better
2-Forming the intention
-Example : I will turn on some lights
3- Specifying an action
- Example : I will walk to the wall and move the light switch up
4-Excuting the action
- Example : Attempting to do the action
5- Perceiving the state of the world
- Example : I look around
6- Interpreting the state of the world
- Example : Can I see better?
7-Evaluating the outcome
- Example : If I can see better, I have succeeded
50
Lecture 6
Design and
Usability/Design
rules
51
Design and usability:
Concept of Usability Engineering
Usability Engineering is a method in the progress of software and systems, which
includes user contribution from the inception of the process and assures the
effectiveness of the product through the use of a usability requirement and
metrics.
It thus refers to the Usability Function features of the entire process of abstracting,
implementing & testing hardware and software products. Requirements
gathering stage to installation, marketing and testing of products, all fall in this
process.
Goals of Usability Engineering
Effective to use − Functional
Efficient to use − Efficient
Error free in use − Safe
Easy to use − Friendly
Enjoyable in use − Delightful Experience
52
Usability
Usability has three components − effectiveness, efficiency and satisfaction, using
which, users accomplish their goals in particular environments. Let us look in
brief about these components.
Effectiveness − The completeness with which users achieve their goals.
Efficiency − The competence used in using the resources to effectively achieve
the goals.
Satisfaction − The ease of the work system to its users.
Usability Study
The methodical study on the interaction between people, products, and
environment based on experimental assessment. Example: Psychology,
Behavioral Science, etc.
53
Software Tools
A software tool is a programmatic software used to create, maintain, or
otherwise support other programs and applications. Some of the commonly
used software tools in HCI are as follows
Specification Methods − The methods used to specify the GUI. Even
though these are lengthy and ambiguous methods, they are easy to
understand.
Grammars − Written Instructions or Expressions that a program would
understand. They provide confirmations for completeness and correctness.
Transition Diagram − Set of nodes and links that can be displayed in
text, link frequency, state diagram, etc. They are difficult in evaluating
usability, visibility, modularity and synchronization.
Statecharts − Chart methods developed for simultaneous user
activities and external actions. They provide link-specification with interface
building tools.
Interface Building Tools − Design methods that help in designing
command languages, data-entry structures, and widgets.
54
HCI and Software Engineering
Software engineering is the study of designing, development and
preservation of software. It comes in contact with HCI to make the man and
machine interaction more vibrant and interactive.
Let us see the following model in software engineering for interactive designing.
The Waterfall Method
55
Interactive System Design
56
The uni-directional movement of the waterfall model of Software Engineering
shows that every phase depends on the preceding phase and not vice-versa.
However, this model is not suitable for the interactive system design.
The interactive system design shows that every phase depends on each other to
serve the purpose of designing and product creation. It is a continuous process as
there is so much to know and users keep changing all the time. An interactive
system designer should recognize this diversity.
Prototyping
Prototyping is another type of software engineering models that can have a
complete range of functionalities of the projected system.
In HCI, prototyping is a trial and partial design that helps users in testing design
ideas without executing a complete system.
Example of a prototype can be Sketches. Sketches of interactive design can later
be produced into graphical interface. See the following diagram.
57
The above diagram can be considered as a Low Fidelity Prototype as it uses
manual procedures like sketching in a paper.
A Medium Fidelity Prototype involves some but not all procedures of the
system. E.g., first screen of a GUI.
Finally, a High Fidelity Prototype simulates all the functionalities of the
system in a design. This prototype requires, time, money and work force.
58
User Centered Design (UCD)
The process of collecting feedback from users to improve the design is known
as user centered design or UCD.
UCD Drawbacks
Passive user involvement.
User‟s perception about the new interface may be inappropriate.
Designers may ask incorrect questions to users.
Interactive System Design Life Cycle (ISLC)
The stages in the following diagram are repeated until the solution is reached.
Diagram
59
GUI Design & Aesthetics
Graphic User Interface (GUI) is the interface from where a user can operate
programs, applications or devices in a computer system. This is where the
icons, menus, widgets, labels exist for the users to access.
It is significant that everything in the GUI is arranged in a way that is
recognizable and pleasing to the eye, which shows the aesthetic sense of the
GUI designer. GUI aesthetics provides a character and identity to any product.
Example
60
HCI Design
HCI design is considered as a problem solving process that has components like
planned usage, target area, resources, cost, and viability. It decides on the
requirement of product similarities to balance trade-offs.
The following points are the four basic activities of interaction design −
-Identifying requirements
- Building alternative designs
- Developing interactive versions of the designs
- Evaluating designs
Three principles for user-centered approach are −
- Early focus on users and tasks
- Empirical Measurement
- Iterative Design
61
Design Methodologies
Various methodologies have materialized since the inception that outline the
techniques for human–computer interaction. Following are few design
methodologies −
Activity Theory − This is an HCI method that describes the framework
where the human-computer interactions take place. Activity theory provides
reasoning, analytical tools and interaction designs.
User-Centered Design − It provides users the center-stage in designing
where they get the opportunity to work with designers and technical
practitioners.
Principles of User Interface Design − Tolerance, simplicity, visibility,
affordance, consistency, structure and feedback are the seven principles used in
interface designing.
62
Value Sensitive Design − This method is used for developing technology and
includes three types of studies − conceptual, empirical and technical.
Conceptual investigations works towards understanding the values of the
investors who use technology.
Empirical investigations are qualitative or quantitative design research studies
that shows the designer‟s understanding of the users‟ values.
Technical investigations contain the use of technologies and designs in the
conceptual and empirical investigations.
Participatory Design
Participatory design process involves all stakeholders in the design process, so
that the end result meets the needs they are desiring. This design is used in
various areas such as software design, architecture, landscape architecture,
product design, sustainability, graphic design, planning, urban design, and even
medicine.
Participatory design is not a style, but focus on processes and procedures of
designing. It is seen as a way of removing design accountability and origination
63
by designers.
Hierarchical Task Analysis is the procedure of disintegrating tasks into subtasks
that could be analyzed using the logical sequence for execution. This would help
in achieving the goal in the best possible way.
Techniques for Analysis
Task decomposition − Splitting tasks into sub-tasks and in sequence.
Knowledge-based techniques − Any instructions that users need to know.
„User‟ is always the beginning point for a task.
Ethnography − Observation of users‟ behavior in the use context.
Protocol analysis − Observation and documentation of actions of the user.
This is achieved by authenticating the user‟s thinking. The user is made to think
aloud so that the user‟s mental logic can be understood
Engineering Task Models
Unlike Hierarchical Task Analysis, Engineering Task Models can be specified
formally and are more useful.
Characteristics of Engineering Task Models
Engineering task models have flexible notations, which describes the possible
64 activities clearly.
Task Analysis
Task Analysis plays an important part in User Requirements Analysis.
What is a TASK?
Human actions that contributes to a useful objective, aiming at the system, is a
task. Task analysis defines performance of users, not computers.
Hierarchical Task Analysis
65
They have organized approaches to support the requirement, analysis, and use of
task models in the design.
They support the recycle of in-condition design solutions to problems that
happen throughout applications.
Finally, they let the automatic tools accessible to support the different phases of
the design cycle.
ConcurTaskTree (CTT)
CTT is an engineering methodology used for modeling a task and consists of tasks
and operators. Operators in CTT are used to portray chronological associations
between tasks. Following are the key features of a CTT −
- Focus on actions that users wish to accomplish.
- Hierarchical structure.
- Graphical syntax.
- Rich set of sequential operators.
66
References
1) Human-Computer Interaction (3rd Ed): by Alan Dix, Janet
E. Finlay, Gregory D. Abowd, and Russell Beale
67