The Study of Interaction Between People and Computer-Based

Systems
The field focuses on understanding how users interact with computer
systems, aiming to design interfaces that enhance usability and satisfaction.

Physical and Psychological Aspects

It examines both the physical aspects, such as hardware ergonomics, and
the psychological aspects, including cognitive load and user experience.

Theoretical Frameworks
Theoretical frameworks help inform the design and evaluation of systems to
improve human-computer interaction efficiency.

Why do human-computer interaction? • to enable us to design interactive

products to support people in their everyday and working lives [Rogers et al,
preface, v] • Develop usable products: – easy to learn – effective to use –
provide an enjoyable experience make it in headings with additional
information

Why Do Human-Computer Interaction?

Human-Computer Interaction (HCI) is essential for designing systems that
meet user needs and enhance their interaction with technology.

Supporting People in Everyday and Working Lives

HCI helps create interactive products that support people in both personal
and professional contexts, allowing technology to seamlessly integrate into
daily routines and work processes. This improves productivity, convenience,
and overall quality of life.

Developing Usable Products

The goal of HCI is to develop products that are:

1. Easy to Learn: Ensuring that users can quickly become proficient with
the system, reducing the learning curve.
2. Effective to Use: The design prioritizes functionality, allowing users to
accomplish tasks efficiently and with minimal errors.
3. Enjoyable Experience: A key aim is to provide users with a positive and
satisfying interaction, enhancing overall user satisfaction and long-
term engagement.
These principles are foundational to creating systems that not only work but
also make a meaningful difference in users' lives

Why is Human-Computer Interaction Important?

Human-Computer Interaction is crucial for improving how people engage with technology,
making it more accessible and user-friendly.
Preventing Design Problems
Many poorly designed systems can lead to confusion, inefficiency, and frustration for users. HCI
helps identify and address these common issues.
Enabling Effective User Interaction
Good design is rooted in understanding how users think, behave, and interact with computers.
HCI ensures that systems are designed to be intuitive, allowing users to navigate and use
technology effectively.
To avoid problematic design we
need to...
• Take into account
– who the users are
– what activities are being carried out
– where the interaction is taking place
• Optimise the interactions users have with a
product
– such that they match users’ activities and needs
Usability (1)
Usability Goals
4. Effectiveness: The system enables users to achieve their goals
accurately and completely.
5. Efficiency: Users can perform tasks quickly with minimal effort.
6. Safety: The design minimizes user errors and protects against
unintended actions or data loss.
7. Utility: The system provides the functionality needed to complete
tasks.
8. Learnability: Users can quickly understand how to use the system.
9. Memorability: Once learned, the system is easy to remember,
allowing users to return and use it without difficulty.
USABIILITY(2)
Design Principles
10. Visibility: Important elements of the interface should be easily visible,
allowing users to know what actions are possible at any moment.
11. Feedback: The system should provide clear and immediate responses
to users’ actions, confirming that their input has been received and
processed.
12. Constraints: Design should limit the scope of possible actions to
prevent errors and guide users toward correct usage.
13. Mapping: The relationship between controls and their effects should
be intuitive, so users understand how actions lead to outcomes.
14. Consistency: The design should use familiar patterns and layouts,
making the system predictable and easier to learn.
15. Affordance: Elements should suggest their purpose or function
clearly, helping users know how to interact with them (e.g., buttons
look clickable).
FEEDBACK
Sending Information Back to the User
The system provides feedback to inform the user about what actions have
been completed.

Types of Feedback
This can include sound, highlighting, animation, or a combination of these.

Example
For instance, when a screen button is clicked, the system might provide a
sound or a red highlight to confirm the action was successful

Constraints

• Restricting the possible actions that can

be performed

• Helps prevent user from selecting

incorrect options
• Three main types of constrains are:

Physical

Cultural

Logical

Physical Constraints
Physical constraints limit how objects can be used based on their design.

Example
For instance, a mouse and keyboard can only be plugged in one way due to
their specific design, ensuring correct connections.

Logical Constraints
Logical constraints use people’s understanding of how things relate to guide
their actions.

Example A
When a picture is placed next to an object, it suggests that the object
belongs in that location, indicating “it goes here.”

Example B
Similar to Example A, but with an added step: using color-coding to further
help users understand where things should go.

Cultural Constraints
Cultural constraints are learned conventions that help us understand how to
use technology.

Examples
16. Icons and Menus: Certain symbols and menu layouts are recognized
based on common usage, guiding users on what actions to take.
17. Keyboards and Number Pads: The arrangement of keys and buttons
follows familiar patterns, making it easier for users to interact with
devices without confusion.
Mapping
Relationship between controls and their
movements and the results in the world
EXAMPLE
Consider a volume control knob on a speaker.
18. Good Mapping: Turning the knob to the right increases the volume,
while turning it to the left decreases it. This direct relationship between
the control (the knob) and the result (the volume level) makes it easy
for users to understand and predict the outcome of their actions.

19. Poor Mapping: If turning the knob left increased the volume and
turning it right decreased it, users would likely be confused and
frustrated because the control’s movement doesn’t match their
expectations.

Consistency in Interface Design

Principle: Design interfaces to have similar operations and use similar elements for similar
tasks. This approach helps create an intuitive user experience.
Example of Consistency
 Keyboard Shortcuts: Always use the Ctrl key plus the first initial of
the command for operations:
o Ctrl + C: Copy
o Ctrl + S: Save
o Ctrl + O: Open

Benefits
Consistent interfaces are easier to learn and use, allowing users to quickly understand and
remember how to perform tasks across different applications. This reduces cognitive load and
enhances overall productivity.

Consistency Breakdowns in Interface Design

Issue with Multiple Commands
When there is more than one command starting with the same letter, such as:
 Save
 Spelling
 Select
 Style

Loss of Consistency
To differentiate between these commands, alternative initials or key combinations must be used:
 Ctrl + S: Save
 Ctrl + Sp: Spelling
 Ctrl + Shift + L: Style
Impact on Users
 Increased Learning Burden: Users must remember additional
shortcuts, making it harder to learn the interface.
 Higher Error Rate: The complexity of remembering different key
combinations can lead to user errors and frustration.

Conclusion
Maintaining consistency in command shortcuts is crucial for a user-friendly interface. When
shortcuts diverge, it complicates the learning process and diminishes usability.

Internal and External Consistency in Interface

Design
Internal Consistency
Definition: Internal consistency refers to designing operations to behave the same within an
application.
Example
 Button Behavior: If a "Submit" button performs the same action
across various forms within a single application, this creates internal
consistency.
 Navigation: If all menus follow the same layout and functionality (e.g.,
similar dropdowns and options), users can navigate the application
more easily.
Challenges: Achieving internal consistency can be difficult, especially in complex applications
with multiple features or functionalities, leading to variations in how users interact with different
parts of the interface.

External Consistency
Definition: External consistency refers to designing operations, interfaces, and interactions to be
the same across different applications and devices.
Example
 File Management: Using Ctrl + C to copy and Ctrl + V to paste is
consistent across many applications (e.g., word processors,
spreadsheet software, and email clients).
 Icons: The trash can icon for deleting files is commonly used across
various operating systems and applications.
Challenges: External consistency is rarely achieved due to differing designer preferences and
varying industry standards, which can lead to confusion for users transitioning between different
applications or devices.
Conclusion
Both internal and external consistency are essential for creating intuitive user interfaces. While
internal consistency enhances user experience within a single application, external consistency
ensures a seamless experience across different applications and platforms.

Affordances in Design
Definition
Affordances refer to the attributes of an object that indicate how it can be used. They help users
understand the function of an object without needing additional instructions.
Examples
 Mouse Button: Invites pushing to perform actions like clicking.
 Door Handle: Affords pulling to open the door.

Origin
 The term "affordance" was popularized by Donald Norman in 1988 to
discuss the design of everyday objects, emphasizing how design
influences user interaction.

Application in Interaction Design

Affordances have become essential in interaction design, guiding how interface elements
communicate their functions to users.
Examples in Interfaces
 Scrollbars: Designed to afford moving up and down the content.
 Clickable Icons: Icons that visually suggest clicking, often through the
use of visual cues like shadows or buttons.

Conclusion
Incorporating clear affordances in design helps users intuitively understand how to interact with
objects, enhancing usability and improving the overall user experience.

Physical Affordances
Physical affordances refer to the inherent properties of objects that suggest how they should be
used. Here are some common physical objects and their affordances:
Examples of Physical Affordances
1. Door Handle
 Affordance: A door handle allows a user to pull or push to open the
door.
 Obviousness: The shape and placement of the handle indicate
whether it should be pulled or pushed. A rounded handle often
suggests pulling, while a flat plate suggests pushing.
2. Button
 Affordance: A button invites pressing.
 Obviousness: The raised shape and sometimes a tactile feel make it
clear that it can be pushed to perform an action.
3. Chair
 Affordance: A chair is designed for sitting.
 Obviousness: Its flat surface and height make it clear that it is
intended for a person to sit on. The legs and backrest also support this
function.
4. Stairs
 Affordance: Stairs afford climbing up or down.
 Obviousness: The step design, with a flat top for standing and a riser
to lift your foot, clearly indicates how to use them.
5. Bottle
 Affordance: A bottle is made for holding liquids.
 Obviousness: The shape allows for easy gripping and pouring, while
the opening at the top suggests where to drink or pour from.
6. Light Switch
 Affordance: A light switch allows you to turn the lights on or off.
 Obviousness: The toggle or button shape clearly indicates that it
should be pushed up or down.

Conclusion
Physical affordances make it easier for users to understand how to interact with objects just by
looking at them. When affordances are clear and obvious, users can use objects without needing
instructions, leading to a more intuitive experience.
Relationships Between Usability Principles
Usability principles are interconnected and often work together to create a better user experience.
Here’s how some key principles relate to each other:

1. Visibility
 Definition: Ensures users can easily see and understand available
options.
 Relationship: Visibility supports affordance by making it clear how to
interact with elements. For example, a visible button shows users they
can click it.

2. Feedback
 Definition: Provides users with information about the results of their
actions.
 Relationship: Feedback reinforces visibility by confirming actions
(e.g., a sound or visual change when a button is pressed). It also helps
users understand the consequences of their interactions.

3. Constraints
 Definition: Limits user actions to prevent errors.
 Relationship: Constraints work with visibility and feedback to guide
users. For instance, graying out an unavailable option makes it visible
that the action cannot be performed, while feedback can indicate why
it’s disabled.

4. Mapping
 Definition: Refers to the relationship between controls and their
effects in the system.
 Relationship: Good mapping enhances visibility, as users can
intuitively understand how to interact with controls (e.g., a volume
knob that clearly indicates increasing or decreasing sound). It also ties
in with feedback, as the effects should be clear and immediate.

5. Consistency
 Definition: Ensures similar operations and elements behave similarly
across the interface.
 Relationship: Consistency supports visibility by making it easier for
users to learn and predict how to interact with different parts of the
interface. It also relates to feedback, as consistent responses to actions
help users develop a clear understanding of the system.
6. Affordance
 Definition: Indicates how an object can be used based on its design.
 Relationship: Affordances enhance visibility by clearly suggesting
how to interact with objects. They work alongside constraints to guide
users toward correct actions (e.g., a push plate on a door suggests
pushing).

Conclusion
These usability principles are not mutually exclusive; they complement each other to create a
more effective and user-friendly interface. By considering how these principles interact,
designers can improve the overall user experience.