Informational Processing and Human
Computer Interface(HCI) Design
Zhang Xuemin
School of Psychology,
Beijing Normal University
Email: [email protected]
Tel/Fax: 86-10-58807499 Zip Code: 100875
HCI: A Multidisciplinary Science
• Computer Science
– Provide knowledge about the capability of the technology and idea about how
this potential can be harnessed.
• Psychology and Cognitive Science
– Understanding human behaviour and the mental processes
that underlie it.
– Understanding the nature and causes of human behaviour in
the social context.
• Sociology and anthropology
– Interactions between technology, work and organisation.
• Ergonomics
– Understanding the users physical capabilities.
• Linguistics; artificial intelligence; business; graphic
design.
Disciplines involved in HCI
Ergonomics
Computer Science
AI
Cognitive Psychology
Social and Organizational
Psychology
HCI
Linguistics
Engineering/Design
Philosophy
Sociology/Anthropology
Biology and
Neurophysiology
Relationship between different disciplines and
HCI
Model Human Processor
learning
module
Long-term memory
goal
problem
solving module
plan
motor
memory
action
module
The User
Interface
Short-term memory
expectation
perception module
visual
"memory"
visual output
operation
input
input-handler
user
auditory
"memory"
auditory output
output-handler
tactile
"memory"
tactile output
output-handler
user interface
presentation
dialog
functions
dialog
objects (DO)
dialog
state
system
dialog module
application
funcrtions
Matthias Rauterberg (1996)
application module
application
objects (AO)
application
state
transformation
What we concerned: Cognition
• Human Cognitive process
– Fundamental Cognitive Process
Attention
Perception & Recognition
Memory
－Complex
Cognitive Process
Learning: Reading, speaking, listening
Planning, Reasoning and decision-making
Problem solving
• How cognitive psychology guide HCI
design
The Human Information Processor
• The human brain is considered a computer, with I/O-devices, CPU,
memory etc.
• Special attention is drawn to these steps of information processing
Input or
stimuli
Encoding
Comparison
Response
selection
Response
execution
Output or
response
The Human Information Processor
• The human brain is also considered as a computer.
• But now, we are focusing on attention, memory and perception
Perception
How do we structure the
sensoric information
Attention
Attention
How does attention
influence our perception
Memory
Input or
stimuli
Encoding
How does memory
influence our perception
Response
selection
Response
execution
Output or
response
Memory
Further Cognition
How do we structure and
create knowledge of
phenomenon in the world,
and how do we act upon
them.
Comparison
Input
Sensory Store
Lost from
store
Short-term memory
Lost from
store
Long-term memory
Decay, interference
and loss of strength
Attention and perception
What is attention?
• Focused attention
– Information dealt with are
relevant to our current activity
• Divided attention
– We deal with information from
multiple sources
• Minimal attention
– Change of attention can be
conscious or involuntary!
– We deal automatically with
some of the information
How does attention work:
• Attention is the filter of the
further cognitive process
• Attention is the focus of
cognitive process, it captures
the necessary information
concerning the present task
• Attention can shift from one
thing to another
• Attention also can be allocated
to two or more tasks
• Attention influence our
perception
Design Question on HCI?
How do we design to obtain the relevant information through attention system?
Factors That Influence Attention
Processing
• Number of Distractors and Distribution of Stimulus in Visual
Field
• Validity of Cue
• Spatial and Non-Spatial Feature of Target and Cue
• Perceptual Organization and Experience of Targets
• Prior Probability of Target
• Stimulus Onset Asynchronies (SOA)
• Spatial Location of Target Onset
• Context of Target in Time Serial Materials (AB Study)
• Visual, Auditory or Cross-Model Stimulus
• Static or Moving Stimulus, Moving Style and Formulation
• Neurobiological and Biochemical Factors, Such as Ataractic,
Cordial, Drugs and Some Hormone etc.
Posner, Snyder & Davidson (1980), Treisman(1980,1984,1992,1996)
Yantis & Johnson (1984,1990), Pylyshyn(1994,1999) et al ……
Controlling visual attention
Design principles in HCI:
• Structure
– Important information in a central location or with salient feature
– Less important information easy to find (maybe not shown)
– Group formulation
• Interaction style
– Cross-Model interaction: such as alarm or sound in danger
– Well considered use of reverse video, blink, intensity etc.
– Colour as supplement
• Detail
–
–
–
–
Salient or outstanding object or task is easy to captured or performed
Create harmony, symmetry and logical groupings
Maximum 25% of screen is content
Use a normal left to right or upper-left to lower-right corner sequence
Perception
Perception: Awareness of the
elements of environment
through physical sensation
• vision
• sense of hearing
• sense of touch
• taste
• smell
• Perception is a closely
linked system to interface
– What you know influences
how you see
– What you see influences
what you know
Why is it important?
• Analysis by synthesis
• Perception is an active process
– representations are constructed (synthesized)
– based on expectations, experiences
• Feature-based, location-base and object-based perception
– attention to features guides perception
• Coding
– Visual(size, shape, central or peripheral, color, …)
– Auditory and linguistic feature
– distinguish types, draw attention, ...
• Icons
– features, affordances, experience, ...
• Earcons
Global and local perception
T EC T
Gestalt principles of perception:
• Proximity (things appear as being together)
• Similarity (shape relate to groups)
• Closure (missing parts are filled in)
• Continuity (underlying shapes are created)
• Symmetry (symmetry creates coherence)
• ......
Which one is easily tracked?
Which one is easily perceived?
Perception and recognition in the design
• How information is acquired from the world and
transformed into experiences
• Design principles
–
–
–
–
–
–
Text should be legible
Colour should be used to enhance, not to disturb
Icons should be easy to distinguish and read
Information division in blocs should be clear
Cross-model interactive operation
Specify the present task with the global and local
feature
The best matches of forcolor and backcolor
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Color examples
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
Which is the best?
15 matches of forcolor and backcolor
11500
11000
10500
阅
读 10000
时 9500
间
9000
8500
8000
白 白 蓝 蓝 蓝 蓝 黑 白 黑 蓝 黑 白 黑 白 黑
- - - - - - - - - - - - - - 黑 深 黄 白 红 深 灰 深 紫 紫 深 灰 白 红 红
蓝
绿
绿
绿
Zhang xuemin, Shu hua et al, 2004
Icons and the tiptop help
The human memory in the interface design
• Facts from cognitive psychology
–
–
–
–
–
We encode and recall knowledge and action
Everything involves filtering and processing
Context is important in affecting our memory
Better to recognize than to recall things
Better at remembering images than words
– George Millers “72” theory
Learning
• Processes involved in learning
– Memorization
– Understanding concepts & rules
– Acquiring motor skills
• Facilitated
– By analogy
– By structure & organization
– If presented in incremental units
• Use user’s previous knowledge in interface
User’s learning process
expert
advanced
beginner
complex
system
interaction
operator
Matthias Rauterberg (1996) found a negative
correlation between Behavioral-Complexity
and Mental-Complexity
learning
time
Problem Solving
• Cognitive skill development
novice
Learning and
practice
Meta cognition
And regulation
Internal and
external drives
Knowledge
processing
Thinking
And problem
solving
Expert
Practice-reflection-practice
• User’s cognitive skill is the information processing and
operation on interface
Motor skills in interface operation
• Mouse, keyboard,game pad etc. Action:
Click,double-click, move, pull…
• Feedback is important
• Minimize eye movement
• Cross-model (Eyes, ears and hand;mouth…）
information processing and response
Whom is the HCI designed for?
• Categorizing the user in
several dimensions
–Handling a Computer
interface
–Knowing the Application
–Domain knowledge
• The user’s expertise level?
–Novice
–Advance beginer
–Competent
–Proficient
–Expert
• Special population
– Age and gender
– Disability
– Culture and profession
– Personality
• Accept the user(s) as
－
－
－
－
－
Intelligent
Creative
Curious
Perceptive
Emotional
Methods for evaluating the HCI
•
•
•
•
•
•
Observations
Thinking aloud protocol
Card sorting
Measuring reaction time
Eye-tracking
Measuring users’ opinions
– questionnaires
– focus groups
– interviews
Key points for interface design(1)
• The principle of user background
– Know whom is your user?Their background?
• The principle of metaphor
– Borrow behaviours from systems familiar to
your users.
• The principle of feature or function exposed
– Let the user see clearly what functions are
available
Key points for interface design(2)
• The principle of coherence
– The behaviour of the program should be internally and
externally consistent
• The principle of state visualization
– Change in behaviour should be reflected in the
appearance of the program
• The principle of the present focus task
– Some aspects of the UI attract more than others do
– Salient feature is very important
Key points for interface design(3)
• The principle of context
– Limit user activity to one well-defined context
– Salient cues is very important
• The principle of aesthetics
– Create a program with beauty and creativity
• The principles of user testing
– Find the inevitable defects in your design
– Modify your program
Key points for interface design(4)
• The Principle of grammar
– A user interface is a kind of interactive language – we
should know what the rules are
• The principle of help
– Understand the different kinds of help that user needs
• The principle of safety
– Let the user develop confidence by providing a safety
interface
• Let all the operation works smoothly
Thanks for everybody!