Interaction design is one of the most critical facets of user experience design. It captivates and surprises users, promising them experiences uniquely responsive to their decisions and actions.

Interaction design also allows designers to communicate with end-users, guiding them through a digital product as efficiently as possible to achieve the user’s goals.

Interaction design is one of the most challenging stages of ideation. UXPin’s code-based design tool reduces those challenges by allowing designers to build functional prototypes with extreme fidelity and interactivity. Sign up for a free trial to discover how designing in UXPin can streamline your prototyping and testing to deliver better customer experiences.

What’s Interaction Design?

Interaction design–often shortened to IxD–is a field dedicated to making human-to-computer interfaces (HCI) feel human-like. Interactive digital products that create this “human” connection successfully lead to positive user experiences, including:

Greater product satisfactionDeeper usability comprehensionFaster learnabilityA deeper personal connectionIncreased likelihood of repeated useCentral to the IxD practice is the concept of increasing the sense of human connection by selecting the appropriate interactive elements. 

Experienced interaction designers know how animation, transitions, microinteractions, copy, color, visuals, timing, and layout impact users’ feeling and behavior–allowing them to design interactions strategically to elicit the appropriate response.

What is the Difference Between Interaction Design and UI Design?

Interaction design focuses on human-computer interaction, including animations, microinteractions, transitions, search, and other motion-based designs. They decide what happens when a user taps an element.

User interface design focuses on visual design and aesthetics, including color, fonts, iconography, layouts, etc. They decide what a user interface must look like.

To summarize:

Interaction design is about Interactions and movementUI design is about visual design and aestheticsIn smaller companies and startups, a UI designer is often responsible for both tasks, while the roles are separate in larger organizations. Like anything in digital product design, the roles and responsibilities can synergize. It all depends on the company, product, and organizational structure.

Interaction Design vs. UX Design

Interaction design is a specialized discipline within UX design. Where UX looks at the entire user experience and how everything ties together, interaction designers focus on user interactions and motion.

Interaction designers apply UX fundamentals like design thinking, human-centered design, and user research (personas, case studies, etc.) to make decisions. They’re specifically concerned with a user’s tasks, actions, and environment, while UX designers focus on usability and how someone experiences a digital product.

Interaction Design Principles

We’ve chosen our favorite IxD principles from Don Norman’s (co-founder of the Nielsen Norman Group) book, The Design of Everyday Things.

Visibility

With many features and limited space, prioritizing visibility is a significant design challenge. Don Norman’s theory is that the more visible something is, the more likely a user sees and interacts with it. Interaction designers must balance visibility prioritization based on user needs and business goals.

A typical example of visibility is prioritizing navigation links on mobile devices. What links are visible via the app bar, and what do designers place in the navigation drawer behind a hamburger menu?

Feedback

Feedback is how a digital product or system communicates with users. Interaction designers have several ways to express this feedback, including motion/animation, tactile, audio, copy, etc.

testing user behavior pick choose 1They must also consider accessibility and how products relay feedback to all types of users and assistive technologies.

Constraints

Cluttered UIs with too many possibilities confuse users and create usability issues. Good interaction design limits (or constrains) user actions to guide them through the product more efficiently.

We see these constraints most commonly with landing pages. Designers strip away navigation, links, and anything else that might tempt users to leave the page, leaving only a prominent CTA or form. Constraining users to a single action allows them to focus on the content that leads to a conversion.

Mapping

Interaction designers must create a clear relationship between controls and their effect on a digital product. The idea is to map these relationships to feel natural to users.

For example, the top button on an iPhone increases the volume while the lower one decreases. This intuitive layout means users don’t have to think about which button performs which action.

The more intuitive and obvious a product is to use, the easier and more enjoyable the experience.

Consistency

Consistency is vital for interaction and UI design. Inconsistency can confuse users and create usability issues. Designers not only have to design consistent UIs and interactions but also consider consistency across multiple screen sizes and devices.

Many organizations build a design system or adopt an open-source component library to increase consistency with approved UI patterns and interactions. When designers don’t have to think about these choices, they can focus on the user experience and apply the appropriate pattern to help users achieve the desired result.

Affordance

Affordance tells users how to use something or perform an action. It’s an interaction designer’s job to ensure that it’s obvious to users how to complete tasks using UI elements.

button interaction click hoverFor example, a submit button’s disabled state tells users to complete a form’s required fields before submitting. Using a different color and underline for links tells users which text they can click.

Cognition

Interaction designers must have a basic understanding of cognitive psychology in UX design–attention and perception, memory, problem-solving, and creative thinking. The aim is to design products and experiences that don’t overload these mental processes.

Cognition deals with several design psychology principles, including:

Gestalt principles: how the human brain perceives visuals to create familiar structures.Von Restorff effect: predicts that in a group of objects, the one that differs stands out or is most likely to be remembered.Hick’s Law: the more choices you give someone, the longer it’ll take them to make a decision.The Principle of Least Effort: users will make choices or take action requiring the least amount of energy.The Serial Positioning Effect: humans are most likely to remember the first (primacy effect) and last (recency effect) items in a list, sentence, or piece of content.The Principle of Perpetual Habit: people rely on familiar routines and habits–which is why it’s crucial to use universal design patterns.The Principle of Emotional Contagion: humans will mimic or empathize with the emotions and behaviors of others, including animals and animations–which is why designers use faces (even emojis) to emphasize feeling and emotion.Fitts’s Law: the time required to move to a target area is a function between the distance and the target’s size.Dive deeper into cognition in this article: UX Design Psychology Tricks for Design Excellence and this one: A UX Designer’s Guide to Improving Speed of Use. These principles apply to all UX disciplines.

Interaction Design Checklist

We found this helpful interaction design checklist from the US Government’s Technology Transformation Services website, usability.gov. The checklist includes several questions to consider when designing interactions.

task documentation dataDefine how users interact with the interface – click/tap, push, swipe, drag & drop, keyboard controls, etc.Give users clues about behavior before they take action – correct labeling, different colors for links, using consistency for clickable UI elements, etc.Anticipate and mitigate errors – how do you prevent errors while providing helpful messages to correct problems?Consider system feedback and response time – what happens after users complete an action, and how soon does that feedback appear?Strategically think about each element – have you chosen the appropriate element/pattern? Is there enough space between clickable elements to avoid errors? Have you followed design psychology principles (mentioned above)? Scrutinize every decision from a user’s perspective.Simplify for learnability – make user interfaces and tasks as simple as possible, use familiar patterns, and minimize cognitive-draining tasks and features to simplify the user experience.Also, check out the IxD Checklist from Aaron Legaspi and Amit Jakhu.

Interaction Design Resources

A lack of fidelity and functionality is a significant problem for interaction designers when prototyping and testing using traditional image-based design tools.

Interaction designers must create multiple frames to replicate basic code functionality, which takes considerable time and effort. With UXPin’s code-based design tool, designers can achieve significantly better results with less effort. Here’s how:

States

UXPin enables designers to create multiple States for a single component. For example, you can build a button with default, hover, active and disabled states, each with separate properties and triggers.

UXPin’s States also allows designers to create more complex UI patterns like carousels, accordions, dropdown menus, and more using a single frame. These UI patterns behave like code, giving interaction designers accurate results and feedback during testing.

Interactions

With UXPin Interactions, designers can build immersive, code-like experiences far beyond the capabilities of image-based design tools. UXPin offers a wide range of triggers, actions, and animations to create fully functional, animated prototypes.

Conditional Interactions allow designers to take prototypes a step further with Javascript-like “if-then” and “if-else” conditions to create dynamic user experiences. 

Variables

In UXPin, form fields look and function like the final product. Variables allow designers to capture user inputs and use that data elsewhere in the prototype–like a personalized welcome message after completing an onboarding form.

Expressions

UXPin Expressions take prototyping to another level with code-like functionality, including form validation and computational components (updating a shopping cart). When combined with States, Interactions, and Variables, Expressions allow designers to build prototypes that function like the final product.

These powerful features mean interaction designers don’t have to learn code or rely on engineers to build fully functioning prototypes for accurate testing. With UXPin, designers can build, test, and iterate faster and achieve significantly better results.

Tired of asking usability participants and stakeholders to “imagine” something happening? Switch to UXPin and start prototyping with the world’s most advanced code-based design tool. Sign up for a free trial today.