Principles of Interaction
Lecture 3
Agenda
• Principles of Interaction:
• Affordances
• Signifiers
• Mapping
• Feedback
• Constraints
• Conceptual models
• Mental models
• 7-stage action model
• Human Errors
• Design Heuristics
What is interaction?
People-Technology System describes state of the
system to user
feedback
People Technologies
actions
describes state of the
user to system
Activities
Context
Affordance and Signifier
• Affordance
• Affordances determine what actions are possible between an object and an agent.
• Perceived Affordance: How a user interprets an element’s functionality based on its
visual or other sensory cues (e.g., a button that looks “clickable”).
• Actual Affordance: The element’s real capacity for action (e.g., whether the button is
truly interactive).
• It is a relationship between the properties of an object and the capabilities of the
agent that determine just how the object could possibly be used.
• Signifier
• Signifiers determine where the action should take place between an object and an
agent.
• It is any perceivable cue—such as a label, icon, shape, or sound—that indicates what
action is possible or how an element should be used.
• It explicitly communicates appropriate behavior to an agent.
Affordances and Signifiers
Affordances and Signifiers
Door Opening Affordances
1 2 3 4 5
• Which doors are easy to open?
• Which doors are hard to open?
• Why?
6 7
Accidental Affordances
Men’s bathroom in restaurant
Anti-affordances
Hidden Affordances
• Interfaces are virtual and do not
have ‘real’ affordances like physical
objects
• Some affordances are not visible,
hence signifiers are used. Ex:
• Swiping left or right brings up new
restaurant recommendations
• Swiping up reveals the menu for the
restaurant being displayed
• Swiping down, friends who recommend
the restaurant
Norman Mantra
• Complex things may need signifiers, but simple things should not
• If a simple thing requires a signifier, it is likely a failed design
Perceivable
Signifier
Affordance
Which is Faster for Setting Time?
Mapping
• It is a relationship between controls the user interacts with and functions
the device/application performs.
• When number of functions is greater than number of controls, some
functionality is hidden to the user.
• When capabilities are visible and controls associated with them are
correctly mapped, interaction is intuitive.
• Stimulus–response compatibility is the degree to which the physical
arrangement of the stimuli matches the location of the expected
responses.
• Natural mapping refers to a design in which the system’s controls
represent or correspond to the desired outcome.
• When controls share natural similarity, system is faster to learn and easier
to remember
Mapping Types
• Spatial similarity
• By arranging controls in a spatial
layout that mimics the design layout,
users can understand the system
faster.
• Conceptual or metaphorical
similarity
• Commonly accepted metaphor used
as the basis for design decisions.
• Behavioral similarity
• the interface responds in a way that
resembles the action that users
perform.
Spatial Similarity Mappings
or
Mapping Example- Stove
Which controls which?
Mapping Examples – car window
• They are located on the center console
between the front seats.
• One problem with these controls is that
they are not where you expect them to be.
• When a person wants to raise or lower a
window they generally will look over by the
window for the control, not between the
front seats.
• By the way, there is something else wrong
with these controls: "How do you raise the
window?"
Mapping Example: Driver’s Seat
Feedback
• It is the way of communicating the results of an action to an agent.
• Feedback can be visual, auditory or any channel through which an
agent can perceive information.
• Feedback must be immediate, informative, unobtrusive and ranked
according to its level of alert.
Bad Feedback Examples
Good Feedback Examples
Constraints
• Restricting the wrong kind of interactions to make the correct ones
more discoverable.
• Physical Constraints prevent users from performing certain actions.
• Cultural Constraints arise from the social and cultural context in which a
product or system is used.
• Semantic Constraints arise from the meaning of words and symbols used in a
product or system.
• Logical Constraints arise from the logical structure of a product or system.
Constraint Implementations
• Forcing Functions – a failure at one stage prevents the next step from
happening
• Interlocks – force operations to take place in a proper sequence
• Lock-ins – keep an operation active, preventing someone prematurely
stopping it.
• Lock-outs – keep an operation passive, preventing someone
intervening it (usually for safety reasons)
Constraint Example
Physical constraints
Logical constraint
Semantic constraint
Cultural constraint
Good Constraint Example
Bad Constraint Example
Cylindrical Battery with Orientation Cylindrical Battery
without Orientation
Conceptual and Mental Models
• A mental model is an internal representation that people form to
understand and interact with the world around them.
• A conceptual model is a simplified representation that illustrates
the key elements and relationships within a system, process, or
phenomenon.
• Good conceptual models not only teach how to use the device,
but also explain the working principle of the device
• User thinks it works one way
• Designer knows exactly how it works
• Designer can help user foster an appropriate conceptual model
• Appearance
• Instructions
• Behavior
Conceptual Model Example
Refrigerator controls
Good Conceptual Model
• Calendar grid showing dates in a Android Calendar
familiar month layout
• Current date clearly highlighted
• Forward/backward arrows for
navigation between months
• Events shown as colored blocks
• Clear section headers using
keywords Today or Tomorrow
Good Conceptual Model
• Affordances
• Insert something into holes
• Constraints
• Bigger hole for several fingers, small for
thumb
• Mapping
• How to insert fingers into holes
suggested by visible appearance
• Conceptual model
• Suggested by how parts fit together
and move
Bad Conceptual Models
Digital watch with 5 buttons
Umbrella hook at the entrance to museum in Tokyo
Goals, Execution, Evaluation
• Conceptual model
• Affordances • Conceptual model
• Constraints • Feedback
• Natural mappings
Seven Stages of Action
• User encounters a problem in a
certain situation, and his goal could
be solving this problem.
• For that he has to bridge 2 gulfs:
• Gulf of execution:
• Plan: what options do I have?
• Specify: what are the steps?
• Perform: how to perform these steps?
• Gulf of evaluation:
• Perceive: what has happened?
• Interpret: what does it mean?
• Compare: is it what I expected?
Execution-Evaluation Cycle
• User encounters a problem in a
certain situation, and his goal could
be solving this problem.
• For that he has to bridge 2 gulfs:
• Gulf of execution:
• Plan: what options do I have?
• Specify: what are the steps?
• Perform: how to perform these steps?
• Gulf of evaluation:
• Perceive: what has happened?
• Interpret: what does it mean?
• Compare: is it what I expected?
Three-levels of processing
Conscious
reasoning
Subconscious
learned
Subconscious natural
Example
In the middle of the street, I need some cash.
Ask someone Go to bank
Beg a stranger Find ATM Did I withdraw cash?
Insert card …
What is it asking?
… Choose Withdraw …
Does something change on the screen?
Perform insert Select language
… Enter PIN
Human Errors
• Mistakes (hopefully avoidable)
• Wrong intention
• Incorrect mental model
• Novice behavior
• Happen at conscious level
• Slips (unavoidable)
• Wrong execution
• Skilled behavior
• Happen at subconscious level
Mistakes and Slips
• Action-based Slip: • Rule-based Mistake:
• goal and plan are correct • goal is correct (or problem diagnosed
• specification or execution are incorrect properly)
• plan is incorrect, or
• Memory-lapse Slip: • interpret is incorrect
• goal -> plan transition happen
• plan -> specify, or specify -> perform • Knowledge-based Mistake:
transition does not happen • goal is incorrect (or problem is
• world -> perceive, or perceive -> interpret misdiagnosed)
transition does not happen • compare is incorrect
• plan is correct/incorrect
• Memory-lapse Mistake:
• goal->plan transition does not happen
• interpret->compare transition does not
happen
• compare->goal transition does not happen
Where slips and mistakes originate?
Rule-based or Memory-lapse mistakes prevent
Knowledge based mistakes transition in higher levels
Memory-lapse slips prevent
Action-based slips transition at lower levels
Examples
• Action-based slip • Rule-based mistake
• I poured some milk into my coffee • I wanted to listen to my voice mail,
and then put the coffee cup into but instead dialled police
the refrigerator.
• Knowledge-based mistake
• This is the correct action applied
to the wrong object. • Weight of fuel was computed in
pounds instead of kilograms
• Memory-lapse slip
• Memory-lapse mistake
• I forget to turn off the gas burner
on my stove after cooking dinner. • A mechanic failed to complete
troubleshooting because of
distraction
Types of Slips
• Capture Slip
• Continue frequently done activity instead of intended one (similar
starts)
• Example: Confirm deletion of file instead of cancel
• Description Similarity Slip
• Intended action has much in common with others possible (usually
when distracted, close proximity)
• Example: Press CapsLock key, instead of Shift
• Data Driven Slip
• Triggered by arrival of sensory info which intrudes into normal
action
• Example: Call to give someone a number, dial that number instead
Types of Slips
• Loss of activation
• Forgetting goal in middle of sequence of actions
• Example: Start going into room, then forget why you’re going
there
• Associative activation
• Internal thoughts and associations trigger action
• Example: Phone rings, yell “come in”
• Mode errors
• Do action in one mode thinking you’re in another
• Example: In Word, press Ctrl+T to create a new tab
Errors - Three Considerations
1. Avoiding and preventing
2. Identifying and understanding
3. Handling and recovering
Error Prevention Guidelines
• Create a clear and consistent conceptual • Employ constraints to guide users toward
model that aligns the designer's, appropriate actions and decisions.
system's, and user's understanding. • Design for errors by making it easy to
• Simplify tasks to minimize the cognitive undo actions, hard to make irreversible
burden on users, particularly on memory mistakes, and use tools like wizards to
and planning. guide users.
• Make actions and their effects visible so • Standardize elements as a last resort to
users know what to do and can enhance usability, but prioritize the other
understand the consequences of their principles first.
actions.
• Utilize natural mappings between user
intentions, possible actions, system
responses, and the system's state.
Error Message Guidelines
• Take care with the wording and presentation • DO NOT USE ALL UPPERCASE LETTERS as it
of alerts and error messages. looks as if you are shouting
• Avoid using threatening or alarming language • instead, use a mixture of uppercase and
lowercase.
in messages
• e.g. fatal error, run aborted, kill job, catastrophic • Use attention-grabbing techniques cautiously
error • e.g. avoid over-using ‘blinks’ on web pages,
flashing messages, ‘you have mail’, bold colours,
• Do not use double negatives as they can be etc.
ambiguous.
• Do not use more than 4 different font sizes
• Use specific, constructive words in error per screen.
messages
• e.g. avoid general messages such as ‘invalid • Do not over-use audio or video.
entry’ and use specifics such as ‘please enter • Use colours appropriately and make use of
your name’.
expectations
• Make the system ‘take the blame’ for errors • e.g. red = danger, green = ok
• e.g. ‘illegal command’ versus ‘unrecognized
command’
Error Recovery Guidelines
• Provide undo function • Provide appropriate type of response
• Provide cancel function from • Gag - Prevent user from continuing
operations in progress • Erroneous login
• Warn - Warn user an unusual
• Require confirmation for drastic, situation is occurring
destructive commands • Bell or alert box
• Provide reasonableness checks on • Nothing - Don’t do anything (Careful,
input data user must determine problem)
• Did you really mean to order 5000? • move file to bad place
• Return cursor to error field, allow fix • Self-correct - Guess correct action &
do it
• Provide some intelligence • Spell-check correction
• Guess what they wanted to do • Dialog - System opens dialog with
user
• Provide quick access to context- • Go into debugger on run-time crash
sensitive help
Norman’s Principles
• Affordances:
• Design perceivable affordances, beware of actual ones.
• Minimize the use of signifiers for simple activities
• Mappings:
• Use natural mappings between system and real world
• Follow real-world conventions, Gestalt principles and mental models
• Feedback:
• Provide immediate, informative and unobtrusive feedback
• Constraints:
• Use physical, semantic, cultural or logical constraints to prevent error
• Conceptual models:
• Design conceptual models that communicate the working principle of a device
• Minimize the gulfs of execution and evaluation
Cooper’s Principles
• Visual Hierarchy • Conviviality:
• Shows only relevant information • Software should behave like a
• Maintains visual hierarchy and considerate and discreet human-
cohesive style for colors, being:
typography and spacing It is interested in me Don’t bother me with its
personal problems
It is deferential to me It is well-informed
It is conscientious It is perceptive
Uses common sense It is self-confident and
takes responsibility
Anticipates my needs Fails gracefully
Keeps me informed Know when to bend rules
Don’t ask lot of questions Help you avoid awkward
mistakes
Nielsen’s Design Heuristics
1. Visibility of System Status
• The design should always keep users informed
about what is going on, through appropriate
feedback within a reasonable amount of time.
• Shows current state, location, and available
actions
2. Match Between the System and the Real
World Heuristic #1. You Are Here indicators
on mall maps show people where
Heuristic #2. When stovetop controls
match the layout of heating
• The design should speak the users' language. they currently are, to help them elements, users can quickly
• Use words, phrases, and concepts familiar to the understand where to go next. understand which control maps to
which heating element.
user, rather than internal jargon.
• Follow real-world conventions, making
information appear in a natural and logical order.
3. User Control and Freedom
• Users often perform actions by mistake.
• They need a clearly marked "emergency exit" to
leave the unwanted action without having to go
through an extended process.
Heuristic #3. Digital spaces need
quick emergency exits, just like
physical spaces do.
Nielsen’s Design Heuristics
4. Consistency and Standards
• Users should not have to wonder whether different words,
situations, or actions mean the same thing.
• Follow platform and industry conventions.
5. Error Prevention or Effective Diagnose
• Good error messages are important, but the best designs
carefully prevent problems from occurring in the first place.
• Error messages should be expressed in plain language (no error
codes), precisely indicate the problem, and constructively
suggest a solution. Heuristic #4. Checkin counters are Heuristic #5. Guard rails on curvy
• Either eliminate error-prone conditions, or check for them and usually located at the front of hotels. mountain roads prevent drivers from
present users with a confirmation option before they commit to This consistency meets customers’ falling off cliffs.
the action. expectations.
6. Recognition Rather Than Recall
• Minimize the user's memory load by making elements, actions,
and options visible.
• The user should not have to remember information from one
part of the interface to another.
• Information required to use the design (e.g. field labels or menu
items) should be visible or easily retrievable when needed.
Heuristic #6. It’s easier for most people to recognize the capitals of countries, instead of
having to remember them. People are more likely to correctly answer the question Is
Lisbon the capital of Portugal? rather than What’s the capital of Portugal?
Nielsen’s Design Heuristics
7. Flexibility and Efficiency of Use
• Shortcuts — hidden from novice users — may
speed up the interaction for the expert user so
that the design can cater to both inexperienced
and experienced users.
• Allow users to tailor frequent actions.
8. Aesthetic and Minimalist Design
• Interfaces should not contain information that is Heuristic #7. Regular routes are Heuristic #8. An ornate teapot may have
irrelevant or rarely needed. listed on maps, but locals with excessive decorative elements, like an
knowledge of the area can take uncomfortable handle or hard-to-wash
• Every extra unit of information in an interface shortcuts. nozzle, that can interfere with usability.
competes with the relevant units of information
and diminishes their relative visibility.
9. Help and Documentation
• It’s best if the system doesn’t need any
additional explanation.
• However, it may be necessary to provide
documentation to help users understand how to
complete their tasks.
Heuristic #9. Information kiosks at airports are easily recognizable and solve customers’
problems in context and immediately.
Deceptive Patterns – (sometimes illegal)
• Disguised ads • Fake scarcity
• deliberately blurring the line • creating an artificial sense of
between actual content and limited availability around a
advertising, creating confusion for product or service
users
Deceptive Patterns – (sometimes illegal)
• Fake social proof • Forced action
• creates an illusion of popularity • a provider offering users
and credibility by presenting users something they want - but
with falsified or exaggerated requiring them to do something in
endorsements return.
Further Reading
• DoET, Chapters 1 – 5
• More References:
• https://www.nngroup.com/articles/ten-usability-heuristics/
• https://www.deceptive.design/types
• ISO 9241 – Ergonomics of Human-System Interaction standard
