Adobe
Skip to content
Logo-full
Logo-full
  • ProcessWorking methods, best practices, tips and tricks
    • Information Architecture
    • Prototyping
    • UI Design
    • User Research
    • User Testing
    • Wireframing
  • PrinciplesFoundational and emerging concepts
    • App Design
    • Design Systems
    • Emerging Technology
    • Human Computer Interaction
    • Web Design
  • PerspectivesUnique insights, design stories, the impact of design
    • Interviews
    • Leadership Insights
    • Social Impact
    • SoDA Series
    • Wireframe Podcast
  • Design CircleIndustry leaders shaping the future of design
Explore Adobe XD
Logo-full
Explore Adobe XD
  • Process
  • Principles
  • Perspectives
  • Design Circle
  • Explore Adobe XD
XD Ideas   /   Principles   /   Human Computer Interaction

Human Computer Interaction

What is human-computer interaction? Human-computer interaction (HCI) is a design field that focuses on the interfaces between people and computers. HCI incorporates multiple disciplines, such as computer science, psychology, human factors, and ergonomics, into one field. Learn the principles of HCI to help you create intuitive and usable interfaces.

Human Computer Interaction

What is Graphical User Interface Design?

By Nick Babich

GUI is integral for creating effective human–computer interaction. Learn more about GUI design principles here.

Human Computer Interaction

Human Factor Principles in UX Design

By Nick Babich

Familiar with human factors? Learn about human factors in design and how to create a better user experience.

Human Computer Interaction

How Improving HCI Design Can Lead to Better UX

By Muditha Batagoda

Learn how HCI design can lead to a better, more intuitive user experience.

Human-Computer Interaction Makes Interactions More Human

The design of an interface between humans and computers has a direct impact on the efficiency of the interaction between the two parties. HCI emerged in the 1980s with the popularization of personal computing. Computers were no longer being built just for experts, and the goal of HCI was to make all interaction with computers easy and efficient for broad groups of users at different skill levels.

HCI practitioners observe the ways in which people interact with computers and then design technologies to help them use computers more efficiently. The goal is to minimize interaction cost–the amount of physical and mental effort a user must exert when using the technology–and make interactions more human.

Read More

As a discipline, HCI is a forerunner of user experience design. The HCI field seeks to improve human-computer interaction by improving the functionality, reliability, usability, and comfort of computer interfaces.

Iterative design is one of the foundational principles of HCI. Once a designer has gained an understanding of his or her target audience, their tasks, and the empirical measurements surrounding an interaction, designers follow several iterative design steps: design the user interface; conduct user testing; analyze the results of testing; repeat. The iterative design process is repeated until a user-friendly interface is created.

The interaction between a machine and a human can be facilitated in multiple ways. Generally, it’s possible to utilize one or more human senses to form the basis of a UI, such as tactile UI (touch), visual UI (sight), and auditory UI (sound). HCI practitioners find the optimal combination that fits the purpose of the product. For example, for a mobile app, this might be a combination of visual UI and auditory UI.

The rise of mobile devices has prompted UX practitioners to focus on making HCI accessible to large groups of users including cognitively or physically impaired users. Another challenge of HCI design is the need to create omnichannel experiences while considering emerging technologies like VR devices. A typical user might have a range of devices that they interact with, and they should be able to switch from device to device and continue the user journey in a comfortable and effective way. This means HCI practitioners now need to think about every digital product in a holistic way and place even more focus on the needs and wants of end-users.

What Are the Components of HCI and How Are They Related?

There are three main components of human-computer interaction: the user, the interface, and how they work together. How the user interacts with the interface is where behavioral science, computer science, and other fields of study intersect. The relationship between these components is important because computers have nearly infinite uses, and there are countless opportunities for open-ended dialogue between users and computers. By analyzing the relationship between the user and the interface itself, organizations can provide efficient, usable products no matter who the user is.

Why Do We Need HCI?

Human-computer interaction is a fundamental part of the digital world. Every app, software, and product we build interacts with a human, and these interactions must be understood to be thoughtful and effective. At its core, human-computer interaction is necessary because it puts people first by better understanding how they use technology.

Human-computer interaction also makes technology more accessible. No two users are the same, and some may be elderly or cognitively or physically impaired. HCI seeks to understand every user and how they interact with technology to make these interactions better.

Read on for more details and insights into human-computer interaction and to learn more about the latest developments in UX design knowledge.

Show Less
Human Computer Interaction

What Is Extended Reality (XR) Technology?

By Vincent Brathwaite

XR technologies enhance our current experiences, give information, and/or create an artificial experience.

Human Computer Interaction

Design Psychology: 6 Concepts Every UX Designer Should Know

By Justin Morales

Understanding design psychology empowers designers to create intuitive, streamlined designs.

Human Computer Interaction

Man and Machine: A Guide to Human-Computer Interaction

By Nick Babich

Read why it’s crucial to invest in creating good interfaces between people and computers.

Illustration of colorful circles and squares.
Design Systems

Animation in Design System E-Book

By Val Head

Learn how to include motion in your design system with our free e-book.

Illustration of a circle rolling down a hill with animation trails
Human Computer Interaction

Animation Principles for UX Designers

By Nick Babich

Animation is a powerful tool in a designer’s toolkit. Animated effects can help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce the hierarchy of UI elements. Consequently, they ar

Two women talking about design
Human Computer Interaction

User Centered Design Principles & Methods

By Nick Babich

When we design a new product, it’s always essential to understand who and how people will use it. Without this understanding, there is almost no chance of creating a product people will love. “People ignore design that ignores people” is a famous quote

Hands playing with colors circles
Human Computer Interaction

What is Interaction Design & How Does it Compare to UX?

By Nick Babich

“Design is not just what it looks like and feels like Design is how it works.” This famous quote from Steve Job stresses the importance of having good interaction design – the user’s overall experience and satisfaction with a product. And no company em

Man using touch screen technology
Human Computer Interaction

Designing Touch Gesture Recognition User Interfaces

By Nick Babich

“A good tool is an invisible tool. By invisible, we mean that the tool does not intrude on your consciousness; you focus on the task, not the tool.” It is a famous quote from Mark Weiser, a Xerox PARC researcher and the father of ubiquitous computing.

Animation experts share some of the biggest mistakes people make when they use animation and offer practical tips and best practices to improve UX.
Human Computer Interaction

Ask a UXpert: Animation Best Practices for Avoiding Common Mistakes

By Oliver Lindberg

Animation is a powerful tool in UX design, and it’s now possible to create amazing animations on pretty much any platform and device. Auto-Animate in Adobe XD, for example, enables you to create prototypes with immersive animated transitions, which you

Animation header
Human Computer Interaction

Animation for UX: How Animation Adds Meaning to UI

By Val Head

Animation is often regarded as just decoration or a nice-to-have-added bit of delight in user interface (UI) design, but that’s really selling it short. Interface animation can be so much more than just decoration or delight when it’s used purposefully

micro-interactions across devices
Human Computer Interaction

Ask a UXpert: How Micro-Interactions Can Enhance the User Experience

By Oliver Lindberg

“When we think of motion design, the first things to come to mind might be sweeping, choreographed page transitions or elaborate data visualizations,” points out web animation ambassador Rachel Nabors, author of “Animation at Work”. “But often the

Let's XD together.

Where teams create the world’s best experiences at scale, powered by the leader in creative tools.

Download XD For Free
Logo-full

Get XD Ideas delivered to your inbox. Free.

Sign Up
  • Process
  • Principles
  • Perspectives
  • Design Circle
  • About
  • Inspiration
  • Guides
  • Career Tips
Copyright © 2019-2021 Adobe. All Rights Reserved. / Privacy / Terms of use / Cookie Preferences / Do not sell my personal information
/* ----------------------------------------- */ /* Content Template: loop-item-in-index-of-child-pages - start */ /* ----------------------------------------- */ .index-description-more, .index-description-less { cursor: pointer; text-transform: uppercase; } .index-description-less { display: none; } .index-description-3 {display: none;} /* ----------------------------------------- */ /* Content Template: loop-item-in-index-of-child-pages - end */ /* ----------------------------------------- */