Chapter -2

Advanced Principles of
Human-Computer
Interaction
A website and a Device
Introduction
 Advanced HCI principles are those that go beyond the basics of HCI, such as usability
and affordance. They focus on more complex issues, such as user experience, interaction
design, and ethics.

 These principles are essential for creating products and services that are both usable and
enjoyable. They can help designers to create products that are easy to use, efficient, and
ethical.

 The purpose of advanced HCI principles is to create products and services that are more
user-friendly, efficient, enjoyable, and ethical.
Introduction
 User experience
 User experience (UX) design: UX design is the process of designing the overall
experience that a user has when interacting with a product or service.

 Interaction design
 is the process of designing how users interact with a product or service. It involves
considering factors such as the user's input and output devices, the user's physical and
cognitive abilities, and the user's overall experience.

 Ethics
 As technology becomes more complex and powerful, it is important to consider the
ethical implications of its use. Some ethical concerns in HCI include privacy, bias,
accessibility, and transparency.
Pupose of advanced HCI principles:
1. Are easier to learn and use
 Advanced HCI principles can be used to design interfaces that are more intuitive and easy to navigate. This
can help users to learn how to use a product or service more quickly and efficiently.

2. Are more efficient to use

 Advanced HCI principles can be used to design products and services that reduce the number of steps
required to complete a task. This can help users to save time and reduce their cognitive load.

3. Are more enjoyable to use

 Advanced HCI principles can be used to design products and services that are more aesthetically pleasing
and engaging. This can help users to have a more positive overall experience when using a product or
service.

4. Are more ethical

 Advanced HCI principles can be used to design products and services that respect the user's privacy and
avoid bias. This can help to ensure that all users have a positive and fair experience.
Benefits of advanced HCI principles:
1. Increased productivity
 Increase productivity in the workplace by making it easier for employees to use the tools and
systems they need.

2. Improved customer satisfaction

 Improve customer satisfaction by making it easier for customers to use products and services.

3. Reduced errors
 Reduce errors by making interfaces more clear and concise.

4. Increased accessibility
 Make products and services more accessible to people with disabilities.

5. Enhanced safety
 Enhance safety by designing interfaces that reduce the risk of accidents or mistakes.
 Three Key Points of HCI Principles

Mental models and Affordances and GOMS model

conceptual models constraints (Goals, Operators,
Methods, and Selection
rules)
Mental models and Conceptual models
 What is mental model?

 The term mental model has its roots in psychology. Which refers to someone thought
process about how the world works as their frame of reality.
 Mental models allow us to predict how things work.
 These are cognitive constructs built on beliefs, assumptions, and past experiences.
 Mental models are internal representations of the world that people use to understand and
interact with it. They are based on our experiences, knowledge, and beliefs.
Mental models and Conceptual models in HCI
Mental model:

 A user's mental model of a thermostat might include the following

elements:

1. The thermostat has a knob or buttons that can be used to adjust

the temperature.
2. The thermostat has a display that shows the current temperature.
3. The thermostat has a sensor that detects the temperature of the
room.
4. The thermostat turns on the heater or air conditioner to maintain
the desired temperature.
Mental models and Conceptual models
 What is conceptual model?

 Conceptual models are external representations of systems that are used to explain and
communicate how the system works.
 It can be a diagrams, charts, equations, or other types of representations.
 It is often used in science, engineering, and design to help people understand complex
systems.
Mental models and Conceptual models
Conceptual model:

 A conceptual model of a thermostat might include the following

elements:

1. The thermostat has a set point temperature, which is the desired

temperature for the room.
2. The thermostat has a current temperature, which is the actual
temperature of the room.
3. The thermostat compares the current temperature to the set point
temperature and adjusts the heater or air conditioner accordingly.
How mental models and conceptual models can be used in HCI?

 A designer can use the user's mental model of a thermostat to design a user interface that is easy to learn and use.

For example:
• The designer could use a familiar thermostat icon or symbol to represent the thermostat on the screen.
• The designer could also use a clear and concise display to show the current temperature and the set point
temperature.

 A HCI designer can also use the conceptual model of a thermostat to design a user interface that provides users
with the information they need to interact with the thermostat effectively.

For example:
• The designer could provide a feedback mechanism that shows the user how their changes to the set point
temperature will affect the current temperature.
How mental models and conceptual models can be used in HCI in
a Jollibee App?
How mental models and conceptual models can be used in HCI in
a Jollibee App?

Mental model:

 A user's mental model of the Jollibee app might include the following elements:

1. The app has a home screen with links to different sections, such as the menu, the cart, and the rewards program.
2. The app has a search bar where users can search for specific products or information.
3. The app allows users to add items to the cart and place an order for delivery or pickup.
4. The app allows users to track their order status and view their order history.
5. The app allows users to redeem rewards and earn new rewards for making purchases.
How mental models and conceptual models can be used in HCI in
a Jollibee App?

Conceptual model:

 A conceptual model of the Jollibee app might include the following elements:

1. The app is a convenient way for users to order food from Jollibee on the go.
2. The app allows users to browse the Jollibee menu, view nutritional information, and add items to their cart.
3. The app allows users to place an order for delivery or pickup and track the status of their order.
4. The app allows users to redeem rewards and earn new rewards for making purchases.
How mental models and conceptual models can be used in the Jollibee
app?

1. The Jollibee app can be designed to be more user-friendly by following the user's mental
model of the app.

 For example, the app could use familiar labels and icons for the different sections and
features.
 The app could also provide clear and concise instructions for completing tasks, such as
adding items to the cart or placing an order.

2. The Jollibee app can also be designed to be more informative by following the conceptual
model of the app.

 For example, the app could provide detailed information about the different Jollibee
products, including ingredients, nutritional information, and photos.
 The app could also provide information about Jollibee promotions and events.
The Jollibee App?
Affordances and Constraints
What are affordances?

1. Affordances are the perceived or actual properties of an object that suggest how it can be
used.
2. Affordances can be physical, such as the shape and size of a door handle, or they can be
logical, such as the icon for a save button.

 For example, the affordance of a door handle is to be grasped and pulled.

 The affordance of a button is to be pressed.
Affordances and Constraints

What are constraints?

1. These are limitations or restrictions that prevent or discourage certain actions.

2. Constraints can be physical, such as the size of a hole, or they can be logical, such as the
requirement to enter a password before logging in.

 For example, a round hole can only be fit with a round peg.
 A button that is disabled cannot be pressed
Why Affordances and Constraints Important?

1. Affordances and constraints are important concepts in human-computer interaction (HCI)

because they can help designers to create interfaces that are easy to use and understand.
2. Provide interfaces that have clear and obvious affordances, and by avoiding constraints
that are likely to confuse or frustrate users, designers can create interfaces that are more
user-friendly.
3. Affordances and constraints can be used to guide users through the user interface and to
help them to understand how to use the system.
Here are some examples of affordances and constraints in HCI:

 Affordances

1. The affordance of a text field is to be typed into.

2. The affordance of a link is to be clicked on.
3. The affordance of a menu bar is to be selected from.
4. The affordance of a scroll bar is to be scrolled up or down.
5. The affordance of a button is to be pressed.

 Constraints

1. A required field cannot be left blank.

2. A password must be at least 8 characters long and contain at least one number and one
special character.
3. A file cannot be uploaded if it is larger than 10MB.
4. A user cannot access a certain page unless they are logged in.
Here are some examples of affordances and constraints in HCI using
Jollibee App
Affordances

1. The Jollibee App menu: The Jollibee App menu is a list of all the food items that
Jollibee offers. The affordance of the Jollibee App menu is to be browsed and
selected from.
2. The Jollibee App cart: The Jollibee App cart is a list of all the food items that the
user has added to their order. The affordance of the Jollibee App cart is to be
viewed, edited, and checked out from.
3. The Jollibee App search bar: The Jollibee App search bar allows the user to
search for specific food items. The affordance of the Jollibee App search bar is to
be typed into.
4. The Jollibee App add to cart button: The Jollibee App add to cart button allows
the user to add food items to their cart. The affordance of the Jollibee App add
to cart button is to be pressed.
5. The Jollibee App checkout button: The Jollibee App checkout button allows the
user to place their order. The affordance of the Jollibee App checkout button is
to be pressed.
Here are some examples of affordances and constraints in HCI using
Jollibee App
Constraints

 Required fields: When the user places an order, they must fill in all the required
fields, such as their name, address, and phone number. This constraint prevents
the user from placing an order without providing all the necessary information.
 Payment information: When the user places an order, they must enter their
payment information. This constraint ensures that the user has a valid payment
method before they place their order.
 Order minimum: The Jollibee App has a minimum order amount. This constraint
ensures that Jollibee can make a profit on each order.
 Delivery times: The Jollibee App has delivery times that vary depending on the
user's location. This constraint ensures that Jollibee can deliver orders in a
reasonable amount of time.
 Item availability: The Jollibee App may not have all food items available at all
times. This constraint is due to factors such as the availability of ingredients and
the popularity of certain items.
GOMS model
(Goals, Operators, Methods, and Selection rules)
 The GOMS model (Goals, Operators, Methods, and Selection rules) is a cognitive model of
human-computer interaction that describes how users learn and perform tasks on computers.
 It was developed by Stuart K. Card, Thomas P. Moran, and Allen Newell in the 1980s.

1. The GOMS model is based on the idea that users decompose complex tasks into smaller, more
manageable steps. These steps are called operators.

2. Operators can be physical actions, such as pressing a key or moving the mouse, or they can be
cognitive actions, such as reading text or making a decision.

3. Once the user has decomposed the task into operators, they use a set of rules, called selection
rules, to determine the order in which to perform the operators.

4. Selection rules can be based on a variety of factors, such as the user's experience, the current
state of the system, and the user's goals.
The Focuc of GOMS model
(Goals, Operators, Methods, and Selection rules)
 The GOMS model can be used to predict how long it will take a user to complete a task, and to identify areas where the user
interface can be improved to make the task easier or faster.

Example of how the GOMS model can be used to analyze the task of sending an email:

Goal: Send an email to a friend.

Operators:

1. Open the email client.

2. Create a new email message.
3. Enter the recipient's email address in the To field.
4. Enter a subject line.
5. Compose the email message.
6. Click the Send button.

Selection rules:

7. If the email client is not already open, open it.

8. If a new email message is not already selected, create a new email message.
9. Enter the recipient's email address in the To field.
10. Enter a subject line.
11. Compose the email message.
12. Click the Send button.
GOMS model
(Goals, Operators, Methods, and Selection rules) in a Jollibee App

Goal: Order food from the Jollibee app.

 Operators:

1. Open the Jollibee app.

2. Browse the menu.
3. Select the items you want to order.
4. Add the items to your cart.
5. Review your cart.
6. Enter your delivery or pickup information.
7. Place the order.

 Selection rules:

1. If the Jollibee app is not already open, open it.

2. Browse the menu and select the items you want to order.
3. Add the items to your cart.
4. Review your cart to ensure that it is correct.
5. Enter your delivery or pickup information.
6. Review your order and place it.
Summary:
1. HCI principles are guidelines for designing user-friendly interfaces. They focus on making interfaces easy to
learn and use, efficient, enjoyable, and ethical.

2. Mental models are representations of the world that people use to understand and interact with it. They are
influenced by our experiences, knowledge, and beliefs. Mental models are important for HCI because they can
help designers create interfaces that are consistent with user expectations.

3. Conceptual models are external representations of systems that are used to explain and communicate how
the system works. They can be diagrams, charts, equations, or other types of representations. Conceptual
models are useful for HCI because they can help users to understand how to use a system and to troubleshoot
problems.

4. Affordances are the perceived or actual properties of an object that suggest how it can be used. For example,
the affordance of a button is to be pressed. Affordances are important for HCI because they can help designers
create interfaces that are intuitive and easy to use.

5. Constraints are limitations or restrictions that prevent or discourage certain actions. For example, a text field
may have a character limit. Constraints are important for HCI because they can help to prevent errors and to
ensure that users are able to complete tasks successfully.

6. GOM (Goals, Operators, Methods, and Selection rules) is a cognitive model of human-computer interaction
that describes how users learn and perform tasks on computers. GOM can be used to analyze the efficiency of
an interface and to identify areas where the interface can be improved.
Some example of the HCI principles:
Thank you and Good day