Lesson 1 3 - Human Computer Interaction
Lesson 1 3 - Human Computer Interaction
INTRODUCTION TO
HUMAN COMPUTER
INTERACTION
Lecture II ( The HUMAN, COMPUTER and INTERACTION)
Prepared by:
Paulo Salvador Perez
[email protected]
2
HUMAN
WHY DO WE NEED TO
UNDERSTAND HUMAN?
4
• In an interaction with
computer, a user receives
information from the output
of computer, user’s output
becomes computer’s input
and vice versa.
10
In relation to
Human senses, What do
you think is the primary
source of information?
12
Role of Vision
Visual perception
b) perceiving brightness
(measured in luminance)
c) perceiving color.
14
Limitation of vision
If you look at the dot, which side of the alphabets are more easy to read?
15
Limitation of vision
Is this an ambiguous shape?
16
Design Focus
Design Focus
Design Focus
We tend to see the center of a
page as being a little above the
actual center – so if a page is
arranged symmetrically around the
actual center, we will see it as too
low down. In graphic design this is
known as optical center.
19
Other example
20
- It is secondary to sight.
- It provides enormous
amount of information.
22
THANKS!
Any questions?
28
INPUT DEVICES
OUTPUT DEVICES
MEMORY
Input-memory-output
THE
INTERACTION
Lecture III ( The HUMAN, COMPUTER and INTERACTION)
Prepared by:
Paulo Salvador Perez
[email protected]
34
INTERACTION
INTERACTION
▪ Interaction Model
Translation between user and system
▪ Ergonomics
Physical characteristics of interaction.
▪ Interaction Style
The nature of user/system dialog
▪ Context
Social, organization, motivational
36
INTERACTION MODELS
▪ Terms of Interaction
▪ Donald Norman’s Model
▪ Interaction Framework
37
INTERACTION
GULF OF EXECUTION
is the degree of ease with which a user can understand the
current state of a system. It is the difference between the intentions of
the users and what the system allows them to do.
GULF OF EVALUATION
is the degree of ease with which a user can perceive and
interpret whether or not the action they performed was successful. The
gulf is small when the system provides information about its state in a
form that is easy to receive, interpret, and matches the way the person
thinks of the system.
43
SLIP
• understand system and goal
• correct formulation of action
• incorrect action
MISTAKE
• may not even have right goal!
Fixing things?
slip – better interface design
mistake – better understanding of system
46
• Articulation
INPUT
• Performance
Execution
Evaluation
• Presentation
OUTPUT
• Observation
48
ERGONOMICS
INTERACTION – Ergonomics
INTERACTION – Interfaces
Direct manipulation – user being the
primary control, interaction with
artificial world. Such as office system.
MENUS
✓ Set of options displayed on the screen
✓ Options visible
-less recall - easier to use
-rely on recognition so names should
be meaningful
✓ Selection by:
-numbers, letters, arrow keys, mouse
-combination (e.g. mouse plus
accelerators)
✓ Often options hierarchically grouped
-sensible grouping is needed
✓ Restricted form of full WIMP system
54
NATURAL LANGUAGE
✓ Familiar to user
✓ Speech recognition or typed natural language
✓ Problems
-vague
-ambiguous
-hard to do well
✓ Solutions
-try to understand a subset
-pick on keywords
55
QUERY INTERFACE
✓ Question/answer interfaces
-user led through interaction via series of
questions
-suitable for novice users but restricted
functionality
-often used in information systems
✓ Query languages (e.g. SQL)
-used to retrieve information from
database
-requires understanding of database
structure and language syntax, hence
requires some expertise
56
FORM FILLS
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires
-good design
-obvious correction
-facilities
57
WIMP
• Windows
• Icons
• Menus
• Pointers
WINDOWS
▸ Areas of the screen that behave as if they
were independent
▹ can contain text or graphics
▹ can be moved or resized
▹ can overlap and obscure each other, or
can be laid out next to one another (tiled)
▸ scrollbars
▹ allow the user to move the contents of
the window up and down or from side to
side
▸ title bars
▹ describe the name of the window
59
ICONS
▸ small picture or image
▸ represents some object in the interface
▹ often a window or action
▸ windows can be closed down (iconised)
▹ small representation fi many
accessible windows
▸ icons can be many and various
▹ highly stylized
▹ realistic representations.
60
POINTERS
▸ small picture or image
▸ represents some object in the interface
▹ often a window or action
▸ windows can be closed down (iconised)
▹ small representation fi many
accessible windows
▸ icons can be many and various
▹ highly stylized
▹ realistic representations.
61
INTERACTION