Interaction in HCI: Principles, types, and examples

Have you noticed that we’re increasingly relying on computer interactions to get things done? Technology makes almost anything we can imagine possible, from sending a quick text message to a friend to ordering a new pair of sneakers online and more.

Human-computer interaction (HCI) focuses on evaluating, designing, and implementing user-friendly UIs. HCI shapes how we engage with digital products and can tremendously impact UX, helping us as UX designers to create products that are more accessible, enjoyable, and efficient.

In this article, we’ll look at interaction in HCI. We’ll start with a brief overview of what HCI is, discuss its principles, then look at interaction design in HCI and its applications.

What is human-computer interaction (HCI)?

Human-computer interaction (HCI) is a field of study that focuses on the interaction between a human (the person using the system) and a computer system (the machine or network of machines that run the system).

Between the human and computer is a user interface that we design to facilitate smooth interactions. A primary focus of HCI is to help us create systems that make these interactions feel more like a natural conversation between people.

In the 1980s when HCI emerged, it focused on making desktop computers easier to use. But as technology evolved beyond desktops to include mobile phones, smartwatches, and other devices, its focus broadened to encompass a wider range of user experiences and interaction methods.

Goals and objectives of HCI

HCI aims to bridge the gap between humans and technology. Some of its goals and objectives include:

• Improve usability — Ensuring that interfaces are easy for our users to learn and use, reducing the effort required to perform tasks
• Enhance accessibility — Designing interfaces that all users can access and use easily, regardless of their abilities
• Increase efficiency — Helping users complete tasks more quickly and accurately by minimizing the number of steps needed to complete a task and optimizing the interface’s functionalities
• Promote user-centered design — Ensuring that digital products meet our users’ needs, preferences, and limitations, potentially by involving the users throughout the design process
• Improve user experience — Creating positive user experiences, ensuring that their interactions with technology are effective, engaging, and enjoyable

Ultimately, we want to make human-computer interactions enjoyable, not just functional. So, HCI looks at the user’s emotional experience as well as practical considerations to help us create more engaging, intuitive, and aesthetically pleasing interfaces.

Types of interaction in HCI

Now let’s look at six ways humans can interact with a computer system:

1. Graphical user interfaces (GUIs) — The most common form of interaction for most computer users. GUIs allow users to interact with their devices using visual components. On an ecommerce platform, for instance, you can scan through images to choose the products you want to buy
2. Touch interfaces — Allow users to interact with the system through touch-based gestures such as swiping, tapping, and pinching. An example is the pinch-to-zoom feature on a smartphone
3. Command-line interfaces (CLIs) — Use typed commands to interact with the system. An example is the built-in terminal application on most operating systems (Windows, Mac, Linux) with a text-based interface, where you can type commands to interact with the system
4. Voice user interfaces (VUIs) — Allow users to interact with a system through voice commands. Examples include Siri and Alexa. These are particularly useful to users with mobility impairments and those in a hands-free environment.
5. Natural user interfaces (NUIs) — Use gestures and body movements to make interactions with a system more natural and intuitive. Examples include virtual reality gaming and Microsoft Kinect
6. Multimodal interfaces — Combine multiple modes of interaction, such as vision, touch, and voice, to provide a more flexible user experience. An example is when you search for an item with a voice command and select it with touch

These interface types offer different ways for our users to interact with our systems, but it’s also important to ensure these interactions are seamless and intuitive. Let’s explore nine principles to help us do so.

9 principles of HCI

The following nine principles of HCI can help guide you in creating more enjoyable and user-friendly interfaces.

1. Consistency

Ensure that similar actions and elements are represented the same way throughout the interface so that users won’t need to learn new interactions for every task. Also, reuse components and behaviors to make it easy for users to transfer knowledge from one task to another:

A great example of this principle is the consistent interface across the three Google Workspace tools shown above. Although the toolbars are contextual based on the product, most elements are in the same location across all interfaces.

2. Feedback

Let users know the results of their actions. This helps users understand whether their actions were successful and helps them use the system correctly:

For example, this confirmation message from Medium lets a user know that their story has been successfully submitted and what next step to expect.

3. Visibility

Users should be able to easily see and understand the state of the system and its components so they can take the right actions:

An example of this is an always-visible icon showing the number of items in a cart, as shown in the screenshot from the Jumia website above. This tells users the current status of their cart without navigating away from their task — more shopping.

4. Error prevention and recovery

Make it easy for users to undo their last action and recover from mistakes without significant consequences:

An example of this principle is the “Undo” option that appears for a few seconds after a user sends an email on Gmail. This allows the user to retract an email if it was sent by mistake.

5. Constraints

Limit the range of possible actions in an interface to avoid unintended actions or invalid selections. For example, if you had a form with a phone number field, you could ensure the user can only input numbers, as shown in this example from Airbnb:

But be careful when implementing constraints — too many can make an interface feel restrictive.

6. Learnability

Provide users with brief tutorials and guided tours to show them how to navigate and use the product’s features quickly. A simple example of this principle is the tooltips in Google Forms that help new users understand how to use the different tools in the interface:

Onboarding tutorials can save users the extra time they might spend figuring things out on their own.

7. Simplicity

Use minimalistic design to ensure users can perform their primary tasks without distractions. As you can see in the example below, Google’s search engine homepage only has a search bar and a few buttons, leaving almost no room for confusion:

Minimizing the number of elements with high visual priority on a page allows you to guide users to the most important actions.

8. Mental models

Design interfaces to align with users’ real-world experiences. This makes it easy for them to understand how things work based on their existing knowledge.

You can see this principle being applied in the use of icons that resemble objects or concepts from the real world. An example is using a trash can icon for deleting files or a magnifying glass icon for search functions.

9. Affordance

Use intuitive features to make clear to users how to interact with interface elements. Affordances are important as they let users know what actions are possible in an interface:

An example is using a button with the word “Search” to indicate that users can trigger a search by pressing it. If the example above looks familiar to you, you’re probably remembering my in-depth exploration of affordances in UX design — check it out if you’d like to learn more about this principle.

Use visual cues — such as the button’s shape, color, and style — that align with the user’s prior experiences, making it easy for them to understand the button’s purpose.

Interaction design in HCI

Interaction design (IxD), as the name suggests, focuses on designing the interaction between users and products. Considering the users’ needs and abilities will help you create intuitive actions (clicks, taps, voice commands) and clear system responses (visual cues and sounds) for a smooth UX.

IxD is a central component of HCI. It directly influences how users perceive and interact with a system and ensures that the user experience is smooth and efficient, from making navigation easier to guiding users and preventing errors.

Now, let’s look at some practical applications of HCI in some industries and their impact on user experience.

Applications of HCI

You can leverage HCI’s types and principles across various industries to improve user experiences and boost productivity. Here are some specific examples of how HCI is integrated into different sectors:

1. Microsoft Office Suite (Software development) — Microsoft has constantly enhanced its user interface based on HCI principles. In 2007, they introduced the Ribbon interface to improve user experience by enabling users to find, understand, and use commands with minimal clicks
2. Roomba vacuum (Robotics) — Roomba, one of the most popular consumer robotic vacuum cleaners, makes it easy for users to interact with it using simple commands. Its user-friendly interface and ability to guide itself while cleaning make it accessible to a wide audience
3. Learning management systems (Education) — Online learning platforms like Duolingo use HCI principles to create intuitive, engaging features like interactive quizzes, assessments, and progress-tracking dashboards that make the platform more engaging and improve learning outcomes
4. Electronic health record systems (Healthcare) — EHR systems such as NextGen and Cerner use HCI principles to build easy-to-use UIs where healthcare providers can enter, retrieve, and analyze patient medical records. This improves workflow, reduces errors, and ultimately enhances patient care

These examples illustrate how to take the principles of HCI beyond theory and make a profound impact on improving user experiences.

Final words

As we increasingly turn to technology to get things done, HCI is shaping our interaction with these devices. Understanding and applying HCI principles equips us to craft more functional, intuitive, and enjoyable interfaces.

We’ve explored key HCI principles and their practical applications across various industries. Now, I encourage you to consider the role of HCI in shaping your experience in the real world as you use various sites and apps. These seamless interactions hold valuable lessons that can help us design even better experiences for the future.