Chapter 1

Advanced HCI Theories

Objectives:
1. Critically examine the key principles and contributions of advanced theories in HCI,
including Postmodernism, Activity Theory, and Embodied Interaction.
2. Compare and contrast these theories to understand their unique approaches and
implications for the design of interactive systems.
3. Apply the insights gained from these theories to evaluate real-world HCI design
challenges and solutions.
Introduction:
▪ HCI theories are crucial for several reasons:
1. Usability and User Experience
▪ Understanding how users process information helps designers
create interfaces that reduce cognitive load.
2. Efficiency and Productivity
▪ Theories in HCI can help design interfaces that are easy to learn,
reducing the time it takes for users to become proficient.
3. Technological Innovation
▪ As technology evolves (e.g., AR/VR, voice interfaces), advanced theories adapt
and provide a basis for the development of new interaction paradigms.
4. Ethical and Societal Implications
▪ HCI theories can offer guidelines on how to design for privacy, ensuring that users
have control over their personal data.
5. Business Impact
▪ Good design, informed by HCI theories, increases user satisfaction and,
in turn, user retention.
Introduction:
▪ HCI theories are crucial for several reasons:

1. It help us to understand the complex relationship between humans and computers

2. It help us to design better computer systems and interfaces
3. It help us to evaluate the impact of new technologies on humans.

HCI theories is essential for designing better computer systems and interfaces, and for understanding the impact of
new technologies on humans.
Example:
Shopee E-commerce Platform
Example:
Shopee E-commerce Platform

User-Centered Design
▪ Intuitiveness

✔ The platform focuses on creating an easy-to-navigate interface with categories and

sub-categories that make sense to the users.
✔ They also use features like personalized recommendations to improve the user
experience.
Example:
Shopee E-commerce Platform

Cognitive Load
▪ Processing Efficiency

✔ The platform simplifies the shopping process by providing filters, search auto-
completion, and easy-to-understand product descriptions.
✔ By reducing the cognitive load, users can make quick and informed decisions.
Example:
Shopee E-commerce Platform

Task Analysis
• Optimization

✔ The platform allows users to track their orders, chat with sellers, and even
participate in in-app games, optimizing multiple tasks within a single platform.
Example:
Shopee E-commerce Platform

Social Impact
▪ Influence

✔ The platform incorporates social features like reviews and ratings, directly
impacting user behavior and community trust.
✔ Users are influenced by these social proof mechanisms, reinforcing the importance
of HCI theories related to social impact.
Example:
Shopee E-commerce Platform

Utilizing advanced HCI theories enables Shopee to deliver a smooth, captivating, and
streamlined shopping journey for its users. Such theories provide insights into user
needs and behaviors, creating advantages for both the business and its customer base.

https://shopee.ph/
Advanced HCI Theories
A. Postmodernism in HCI
B. Activity Theory
C. Embodied Interaction
Postmodernism in HCI
▪ It views HCI as a collaborative and creative process between users and
designers, and it emphasizes the importance of diversity and multiple
perspectives.
▪ The comprehension of how different people feel and think when they use
technology.
▪ Assessing technology and user experience beyond just functionality and
efficiency.
▪ It is shaped by our individual experiences and perspectives.
Postmodernism
How can Postmodernism be applied in designing a
website?
Scenario: A designer is working on a new website for Jollibee, a fast-food restaurant chain that is popular in the Philippines and
other parts of the world.

Postmodernism analysis:

Postmodernism encourages designers to challenge traditional assumptions about design and to consider new perspectives. In
the context of a Jollibee website, this could mean challenging traditional assumptions about what a fast-food restaurant
website should look like, what kind of content it should contain, and how users should interact with it.

Design implications:

Based on the postmodernism analysis, the designer could make a number of design decisions to create a more unique and
engaging Jollibee website. For example:

1. The designer could use a bold and colorful design that reflects the fun and festive atmosphere of Jollibee restaurants.
2. The designer could include interactive and engaging content, such as games, quizzes, and videos.
3. The designer could allow users to customize their experience, such as choosing which Jollibee mascot they want to see on
the homepage or which language they want the website to be displayed in.
4. The designer could incorporate elements of Filipino culture and heritage into the design of the website.
How can Postmodernism be applied in designing a
website?
Design implications:

1. Based on the postmodernism analysis, the designer could make a number of design
decisions to create a more unique and Use a variety of different media, such as text, images,
videos, and audio, to tell the story of Jollibee.
2. Be creative and playful with the design of the website. Don't be afraid to experiment with
new ideas.
3. Consider the needs of a diverse range of users, including people of different ages, genders,
cultures, and abilities.
4. Make the website interactive and engaging. Allow users to customize their experience and to
interact with the website in new and creative ways.

With this, designers can create a Jollibee website that is both postmodern and user-centered.
Postmodernism
▪ Application of Postmodernism in HCI

1. Challenge traditional design assumptions

✔ UX designers might challenge the assumption that all users have the same
needs and abilities and instead design for a variety of different user groups.
2. Focus on the user experience
✔ This means designing systems that are not only functional but also enjoyable
and engaging to use.
3. Be open to feedback and iteration
✔ Be open to feedback and to iterate on our designs. This means being willing to
change our designs based on the needs and preferences of our users. (User
Testing)
Postmodernism
▪ Here are some specific examples of how postmodernism in HCI has been applied to
design technology:

1. Inclusive design
✔ To create products and services that can be used by everyone, regardless of their
abilities
2. Participatory design
✔ Is a design approach that involves users in the design process
3. Ethical design
✔ The potential impacts of their designs on users and society.
Activity Theory
▪ Is a framework for understanding and designing computer systems that take
into account the social and cultural context in which they are used.

▪ It views people as active and engaged in their environments, and it emphasizes

the role of tools and artifacts in mediating our interactions with the world.

▪ One of the key concepts in activity theory is the activity triangle, which has
three main components:

1. Subject - The person or people engaged in the activity.

2. Object - The goal or objective of the activity.
3. Tools - The tools and artifacts used to achieve the goal.
Activity Theory
▪ In HCI, activity theory can be applied….

1. Subject - A software developer

2. Object - To develop a new mobile app for a bank
3. Tools - A computer, an IDE (integrated development environment), a mobile
phone, and the bank's existing software systems
Why Activity Theory?
▪ It is a valuable tool for HCI designers and researchers. It helps them to
understand the needs of users and to design systems that are more
supportive of effective and meaningful human-computer interaction.

1. To identify and understand the needs of users

2. To design systems that are more easy to use
3. To design systems that are more supportive of collaboration
Activity Theory
Activity
Example:
Theory
Scenario: A designer is working on a new website for Jollibee, a fast-food
restaurant chain that is popular in the Philippines and other parts of the
world.

Activity theory analysis:

1. Object: The object of the activity is to learn more about Jollibee's

menu, find a Jollibee restaurant near them, and place an order for
delivery or pickup.
2. Subject: The subject of the activity is the user of the website.
3. Mediating artifacts: The mediating artifacts are the website itself, as
well as any other tools and resources that the user uses to interact
with the website, such as their smartphone, tablet, or computer.
4. Outcome: The outcome of the activity is the user's ability to satisfy
their hunger by eating Jollibee food.
Activity
Example:
Theory
Design implications:

Based on the activity theory analysis, the designer can make a number of design
decisions to support the user's activities. For example:

1. The website should be designed to be easy to navigate so that users can

quickly and easily find the information they are looking for.
2. The website should feature a clear and concise menu, with high-quality
photos of Jollibee's food.
3. The website should allow users to easily find a Jollibee restaurant near
them, and to place an order for delivery or pickup.
4. The website should be mobile-friendly, so that users can access it from their
smartphones and tablets.

By applying activity theory, the designer can create a Jollibee website that is
more user-centered and effective at supporting the activities of Jollibee
customers.
Activity Theory
Activity theory can be applied in HCI to design more user-centered and
effective systems.

1. Understand the user's context

▪ Considering the user's goals, motivations, and environment when
designing the system.
2. Design for the user's activities
▪ Designing systems that are easy to use and that support the user's
goals.
2. Consider the social and cultural context
▪ Designing systems that are appropriate for the user's culture and that
support the user's social interactions.
Activity Theory
✔ Example and application of Activity Theory in HCI

1. Understand the user's context

▪ For example, a UX designer who is designing a new email system might
consider the different ways that people use email at work, at home, and on
the go.
2. Design for the user's activities
▪ For example, a UX designer who is designing a new email system might
design the system to make it easy for users to send and receive emails,
manage their inboxes, and collaborate with others.
3. Consider the social and cultural context
▪ For example, a UX designer who is designing a new email system might
consider the different ways that people use email in different cultures and
design the system accordingly.
Applying activity theory to HCI design:
1. Start with user research. It is important to start the design process by
understanding the needs and activities of the target users. This can be done
through interviews, observation, and surveys.
2. Use activity diagrams. Activity diagrams can be used to model the user's
activities and to identify the tools and resources that the user needs to
complete those activities.
3. Design for the user's goals. When designing the system, keep the user's goals
in mind. What is the user trying to achieve with the system? How can the
system help the user to achieve their goals?
4. Test the system with users. Once the system is designed, test it with users to
get feedback and to make sure that it meets their needs.
Why Activity Theory?
1. Identify the needs and goals of the users
2. Design the website in a way that is easy to use and navigate
3. Provide the users with the tools and resources they need to achieve
their goals
4. Make the website accessible to all users

✔ Use user feedback to improve the website

✔ Use analytics to track user behavior
✔ Make the website social
Embodied Interaction
✔ Embodied interaction in HCI is a perspective that emphasizes the role of
the physical body in human-computer interaction.
✔ This means that our interactions with computers are not just about what
we think and see, but also about how we move and interact with the
world around us.
✔ This approach would instead look for ways to allow us to interact with
software using our physical bodies in a more natural way.

For example, we might use gestures, facial expressions, or even our

voice to control the software.

✔ VR systems allow us to immerse ourselves in digital worlds and interact

with them in a realistic way.
Embodied Interaction
✔ The watch
Embodied Interaction
✔ The kinetic
Embodied Interaction
✔ More examples:

1. Smart Watch: The watch is a wearable device that allows users to interact
with their smartphone in a hands-free way. (notifications, making and
receiving calls, and controlling music playback.)
2. Microsoft Kinect: The Microsoft Kinect is a sensor that can track the
movements of the player's body. This can be used to control games,
navigate menus, and even control applications such as PowerPoint.
Embodied Interaction
✔ Example categories of EI

Tangible interfaces
Gesture recognition
Wearable devices
Virtual reality (VR)
& augmented reality (AR)
Embodied Interaction
✔ Here are some of the benefits of embodied interaction:
1. More natural and intuitive
2. More engaging and immersive
3. More accessible

DOST-ICT office holds IT competitions for

persons with disability
Embodied Interaction
✔ Why EI in HCI?
Embodied Interaction
✔ Why EI in HCI?

1.Surgeons are using VR to train for

complex surgeries
2.Children with autism are using gesture
recognition to communicate and learn
3.People with disabilities are using voice
control to operate their computers
4.Gamers are using VR and AR to
experience games in new and immersive
ways
Embodied Interaction
✔ Applying embodied interfaces in HCI:

1.Start with user research. This will help to ensure that the embodied
interface is designed to be useful and enjoyable for the people who
will be using it.

2.Use iterative design. This means creating prototypes of the interface

and testing them with users early and often. This feedback can be used
to improve the design of the interface before it is finalized.

3.Consider all of the senses. UX designers should consider all of these

senses when designing embodied interfaces to create a more
immersive and engaging experience.
Embodied Interaction
✔ Example:

Scenario: A person with a visual impairment is trying to order food from the
Jollibee website.

A person with a physical disability could use a gesture recognition system to

control their computer without having to use a mouse or keyboard.

Embodied interfaces solution: The Jollibee website could use a voice

recognition system to allow users to place their orders without having to
use their hands. The website could also use text-to-speech to read the
menu to users and to provide feedback on their orders.
Summary
✔ HCI Advanced Theories

1. HCI advanced theories are a collection of theoretical frameworks that

can be used to understand and design human-computer interactions.
These theories draw on a variety of disciplines, including psychology,
sociology, and computer science.

1. Postmodernism
2. Activity theory
3. Embodied interfaces
Summary
✔ On Postmodernism

1. Postmodernism in HCI encourages designers to challenge traditional

assumptions about design and to consider new perspectives. This can
lead to more creative and innovative designs that meet the needs of a
wider range of users. Postmodernism also emphasizes the importance
of the user experience and the need to design systems that are both
functional and enjoyable to use.

1. Challenge traditional assumptions about design.

2. Focus on the user experience.
3. Be open to feedback and iteration.
Summary
✔ On Activity Theory

1. Activity theory in HCI emphasizes the importance of understanding

the user's context, activities, and goals when designing systems. This
can be done through user research and by modeling the user's
activities using activity diagrams. By understanding the user's activities
and goals, designers can design systems that are more user-centered
and effective.

1. Understand the user's context

2. Design for the user's activities
3. Consider the social and cultural context
Summary
✔ On Embodied Interfaces

1. Embodied interfaces in HCI allow users to interact with computers in a

way that is more natural and intuitive. This can be done using gestures,
wearable devices, or VR and AR systems. Embodied interfaces can
create more engaging and immersive user experiences, and they can
also make computers more accessible to people with disabilities.

1. Natural and intuitive interaction.

2. Engaging and immersive experiences.
3. Increased accessibility.
Summary
✔ Applying all Theories

1. These three concepts can be applied together to design more user-

centered, engaging, and accessible systems. For example, a designer could
use postmodernism to challenge traditional assumptions about how to
design a learning platform, then use activity theory to understand how
students learn and interact with technology, and finally use embodied
interfaces to create a learning platform that is more natural and intuitive
for students to use. By applying these concepts, designers can create
systems that are more likely to be successful and that meet the needs of
the people who will be using them.
1. Quiz