THE HUMAN BEING

MIT 306 Human Computer Interaction

Jun Rangie C Obispo
Department of Computer Science
Outline
• The human being
• Perception
• Gestalt principles
• Visual structure
• Reading
• Hearing
• Touch
• Memory
• Thinking
The Human Being
• Central character
• Understand:
• Capabilities
• Limitation
• Complex
• Simplified model
• Characteristics relevant to HCI:
• Input/output channels
• Memory
Perception
• Sight
• Hearing
• Touch
• Taste
• Smell
Perception
• Involves transformation and interpretation of a complete
image
• Expectations affect the way an image is perceived
• Our expectations—and therefore our perceptions—are
biased by three factors:
• The past (our experience)
• The present (current context)
• The future (our goals)
Perception Biased by Experience
• Imagine that you own a large insurance company.
• You are meeting with a real estate manager, discussing
plans for a new campus of company buildings.
• The campus consists of a row of five buildings, the last
two with T-shaped courtyards providing light for the
cafeteria and fitness center.
• If the real estate manager showed you the map shown in
the figure on the next slide, you would see five black
shapes representing the buildings.
Perception Biased by Experience
Perception Biased by Experience
• Now imagine that instead of a real estate manager, you
are meeting with an advertising manager.
• You are discussing a new billboard ad to be placed in
certain markets around the country.
• The advertising manager shows you the same image, but
in this scenario the image is a sketch of the ad, consisting
of a single word.
• In this scenario, you see a word, clearly and
unambiguously.
Perception Biased by Experience

• Building map or word?

• What you see depends on what you were told to see.
Perception Biased by Experience
• Users of computer software and Web sites often click
buttons or links without looking carefully at them.
• Perception of the display is based more on past
experience than what is actually on the screen.
• This sometimes confounds software designers, who
expect users to see what is on the screen.
Perception Biased by Experience
• The “Next” button is perceived to
be in a consistent location, even
when it isn’t.
Perception Biased by Current Context
• Perception is not bottom-up process
• combining basic features such as edges, lines, angles, curves, and
patterns into figures and ultimately into meaningful objects.
• For example: Reading
• shapes → letter → words → sentences?
Perception Biased by Current Context
• Reading is not strictly a bottom-up process
• includes top-down influences

The same character is perceived as H or A depending on the

surrounding letters.
Perception Biased by Current Context

• The same phrase is perceived differently depending on

the list it appears in.
Perception Biased by Goals
• Past: experience
• Present: current context
• Future: goals

• Our goals filter our perceptions

• unrelated to goals tend to be filtered out preconsciously, never
registering in our conscious minds.
Perception Biased by Goals
• Example, navigating through software or a Web site
• When seeking information or a specific function, users
don’t read carefully
• They scan screens quickly for items related to their goal
• They don’t simply ignore; they often don’t even notice
them.

• In the next slide, try to look for a pair of scissors.

Perception Biased by Goals
Perception Biased by Goals
• Did you spot the scissors?

• Is there a screwdriver too?

Perception Biased by Goals
• Our goals filter our perceptions in other perceptual senses
• “Cocktail party” effect.
• Conversing with someone at a crowded party, you focus your
attention to hear mainly what he or she is saying even though many
other people are talking near you.
• The more interested you are in the conversation, the more strongly
your brain filters out surrounding chatter.
• If you are bored by what your conversational partner is saying, you
will probably hear much more of the conversations around you.
Perception Biased by Goals
• Perceptual filtering can also be seen in navigating Web
sites.
• Example:
• Home page of New Zealand’s University of Canterbury
• Find the map of the campus showing the computer science
department.
We Perceive Structure
• Twentieth century
• German psychologists to explain how human visual perception
works
• They observed and catalogued many important visual
phenomena.
• Finding was human vision is holistic:
• Visual system automatically imposes structure
• Gestalt principles of visual perception
Gestalt Principles
• More of a descriptive framework than an explanatory and
predictive theory

• Proximity
• Similarity
• Continuity
• Closure
• Symmetry
• Figure/Ground
• Common Fate
Proximity
• Relative distance between objects in a display affects our
perception
• Objects that are near each other (relative to other objects)
appear grouped, while those that are farther apart are not
Proximity
• Designers separate groups of
on-screen controls and data-
displays by enclosing them in
group boxes or by placing
separator lines between groups
Proximity
• Poorly spaced controls will give users trouble perceiving
them as related
Similarity
• Objects that look similar appear grouped, all other things
being equal

Items appear grouped if they look more similar to each other than to other
objects.
Similarity
• Mac OS Page Setup dialog box: The Similarity and
Proximity principles are used to group the Orientation
settings.
Similarity
• Online form at Elsevier.com: Similarity makes the text
fields appear grouped.
Continuity
• Several Gestalt principles describe our visual system’s
tendency to resolve ambiguity or fill in missing data in
such a way as to perceive whole objects
• We perceive continuous forms rather than disconnected
segments

We automatically see two crossing

lines—one blue and one orange
Continuity

We see a sea monster in water, not three pieces of one

The IBM company logo uses the Continuity principle to

form letters from disconnected patches.
Continuity

We see a slider as a single slot with a handle somewhere on it, not as two
slots separated by a handle. (Top) Mac OS, (Bottom) ComponentOne.
Closure
• Our visual system tries to close open figures so they are
perceived as whole objects rather than separate pieces

Human vision is biased to see whole objects, even when they are
incomplete.
Symmetry
• We tend to parse complex scenes in a way that reduces
the complexity
• More than one possible interpretation, but our vision
organizes and interprets the data so as to simplify it and
give it symmetry

The human visual system tries to resolve complex scenes into combinations
of simple, symmetrical shapes
Symmetry
• The cover of the book Coherence in Thought and Action
(Thagard, 2002) uses the Symmetry, Closure, and
Continuity principles to depict a cube.
Symmetry
• The human visual system parses very complex two
dimensional images into three dimensional scenes.
Figure/Ground
• Our mind separates the visual field into the figure (the
foreground) and ground (the background)
• Foreground: primary attention
• Background: everything else

When objects overlap, we see the smaller

as figure on ground.
Figure/Ground
• However, perception of figure vs. ground is not completely
determined by scene characteristics
• also depends on the viewer’s focus of attention
Common Fate
• Previous Gestalt principles are on static figures
• Common Fate—concerns moving objects
• Related to the Proximity and Similarity principles:
• it affects whether we perceive objects as grouped
• This principle states that objects that move together are
perceived as grouped or related
Common Fate
• For example, moving pentagons appear grouped
Combination of Gestalt Principles
• In real-world visual scenes, the Gestalt principles work in
concert, not in isolation
• For example, a typical Mac OS desktop usually
exemplifies six of the seven principles described above
(excluding Common Fate)
Combination of Gestalt Principles
Combination of Gestalt Principles
• Similarity and Common Fate
We’re Wired for Language, but not for
Reading
• Learning to read involves training our brain to recognize
patterns
• Lines, contours, and shapes
• Characters – letters, numeric digits, and other standard symbols
• Morphemes – packets of meaning
• Words
• Phrases, idiomatic expressions, and sentences
• Sentences combine to form paragraphs
Is Reading Feature-Driven or
Context-Driven?
• Feature-driven – bottom-up or context-free
• Context-driven – top-down
Is Reading Feature-Driven or
Context-Driven?
• Read the text quickly

The rain in Spain falls

manly in the the plain
• Top-down “recognition” of this expression may inhibit
awareness of its actual content.
Is Reading Feature-Driven or
Context-Driven?

• Top-down reading: Most readers, especially those who

know the songs from which these text passages are
taken, can read these passages even though the words
(A) have all but their first and last letters scrambled and
(B) are mostly obscured.
Poor Information Design can Disrupt
Reading
• Skilled readers
• careless writing or presentation of text can reduce context-free to
context-based reading
• decreases speed and comprehension
• Unskilled readers
• poor text presentation can block reading altogether
Poor Information Design can Disrupt
Reading
• Flaws:
• Uncommon or unfamiliar vocabulary
• Difficult scripts and typefaces
• Tiny fonts
• Text on noisy background
• Information buried in repetition
• Centered text
• Combinations of these flaws
Poor Information Design can Disrupt
Reading
• Uncommon or unfamiliar vocabulary
• words the intended readers don’t know very well or at all

Your session has expired. Please reauthenticate.

• Other words:

aforementioned jurisprudence
bailiwick obfuscate
disclaim penultimate
heretofore
Poor Information Design can Disrupt
Reading
• Difficult scripts and typefaces
• Even when the vocabulary is familiar, reading can be disrupted by
hard-to-read scripts and typefaces
• A typeface that is difficult to recognize will be hard to read
Poor Information Design can Disrupt
Reading
• Difficult scripts and typefaces
Poor Information Design can Disrupt
Reading
• Tiny fonts
• fonts too small for intended users

We the people of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide
for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do
ordain and establish this Constitution for the United States of America.

• Developers sometimes use tiny fonts because that have a

lot to display in a small amount of space
Poor Information Design can Disrupt
Reading
• Text on noisy background
• visual noise in and around text can disrupt recognition of features,
characters, and words
• drops feature-based mode to context-based mode

RedTele.com: Text on noisy background and with poor color contrast

compared to the background.
Poor Information Design can Disrupt
Reading
• Information buried in repetition
• visual noise can also come from the text itself

Apple.com’s “Buy Computer” page lists options in which the important

information (keyboard language compatibility) is buried in repetition.
Poor Information Design can Disrupt
Reading
• Centered text
Poor Information Design can Disrupt
Reading
• Combining flaws that disrupt reading
• Website of Keller Williams (real-estate firm)
Poor Information Design can Disrupt
Reading
• Design implication:

don’t disrupt reading;

support it!
Poor Information Design can Disrupt
Reading
• Guidelines:
• Ensure that text in UIs allows the feature-based automatic
processes to function effectively by avoiding the disruptive
flaws
• Use restricted, highly consistent vocabularies
• Format text to create a visual hierarchy to facilitate easy
scanning
 Much of the Reading Required by
Software is Unnecessary
• Aside from design mistakes, many UIs present too much
text

Much unnecessary text there is

in a dialog box for setting text
entry properties in the
SmartDraw application
Much of the Reading Required by
Software is Unnecessary
• Design implication:

minimize the need for reading.

Test on Real Users
• Designers should test their designs on the intended user
population to be confident that the users can read all
essential text quickly and effortlessly
• Can be done early, using prototypes and partial
implementations, but it should also be done just before
release
• Last-minute changes to text font sizes and formats are
usually easy to make
Hearing
• Human beings can hear sounds from 20 Hz to 15 kHz
• Can distinguish frequency changes of less than 1.5 Hz at
low frequencies
• Less accurate at high frequencies
• Can be selective
• Can convey a lot of information
• Not maximized in interface design
Touch
• Haptic perception
• important means of feedback
• If we can see an object but not feel it, speed and accuracy
of a response is reduced
• Complaint of VR users
Memory
• Second part of the model of the human as an information
processor
• Three types
• sensory buffers
• short-term memory
• long-term memory
Sensory Memory
• Iconic - visual
• persistence of the image after the stimulus has been removed
Sensory Memory

http://www.mobilenative.com/poi/193S2HWwo7I%3D/UY_B3K
WIImU%3D/mid_all_chocolate_cake2.JPG
Sensory Memory
• What was the image?
Sensory Memory
• Echoic - aural
• allows a brief “play-back”
• Example:
• Remembering parts of a song
Sensory Memory
• Haptic - touch

http://www.plumeriabay.com/Ima http://biomee.wikispaces.com
ges/Pillows/eiderdown-duvet- /file/view/barrel_cactus.jpg
pillow-lrg.jpg
Short-term memory
• Scratch-pad for temporary recall
• Used for information needed fleetingly
• Rapid access, limited capacity

• You have 30 seconds to memorize what is on the next

page
http://www.discipleship.net.au/images/Memory-Test.jpg
Short-term memory
• Write down everything you remember.
Short-term memory
• 7 +/- 2 chunks of information
• Patterns are useful memory aids
Long-term memory
• We store everything we “know” - factual information,
experiential knowledge, procedural rules of behavior
• Huge, if not unlimited
• Relatively slow access time (1/10 second)
• Forgetting occurs more slowly
• Processes
• Storing
• Forgetting
• Remembering
Storing
• Total time hypothesis
• amount learned is proportional to amount of time spent
• Distribution of practice effect
• learning time is most effective if distributed over time
• Information must be meaningful for it to be stored
Forgetting
• Decay
• Interference - old replaced by new or vice versa
• Retroactive interference – new information replaces the old
• Proactive inhibition – the old memory interferes with the new
information
Remembering
• Recall - reproduced from memory
• Recognition - the info has been seen before
Reasoning and Problem Solving
• Process of deriving new information from what is known
• Deductive
• Two or more assertions that lead to a conclusion.
• Mathematical certainty.
• Inductive
• Arriving at generalizations from observations we have seen about
cases we have not seen.
• Abductive
• Formulation of hypotheses to explain a phenomena.