What is Interaction Design?
Interaction design is one of the most critical facets of user experience design. It makes the product’s interface respond to user’s action, aiding in human-to-computer interaction.
Key takeaways:
- Interaction design is a multidisciplinary design field that focuses on the interaction between users and digital products, systems, or interfaces.
- It involves designing how users engage with and experience a product, with the goal of making that interaction intuitive and efficient.
- It’s often abbreviated as IxD.
It’s one of the most challenging stages of UX design process. UXPin’s code-based design tool reduces those challenges by allowing designers to build functional prototypes with extreme fidelity and interactivity. Deliver better customer experiences today. Sign up for a free trial.
What is Interaction Design?
Interaction design is a process of making human-to-computer interfaces (HCI) feel human-like. Interactive digital products create this “human” connection by giving feedback to the end-users. The feedback can be through a scroll-provoked animation, clicked state of a button or transition to another page.
Often shortened to IxD, interaction design uses appropriate interactive elements, such as transitions, microinteractions, animation, but also text, color, visuals, and layout impact users’ feeling and behavior–allowing them to design interactions strategically to elicit the appropriate response.
A good use of interaction design successfully leads to positive user experiences, including:
- Greater product satisfaction
- Deeper usability comprehension
- Faster learnability
- A deeper personal connection
- Increased likelihood of repeated use
Interaction Design vs UI Design
Interaction design focuses on human-computer interaction, including animations, microinteractions, transitions, search, and other motion-based designs. They decide, for example, 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 movement
- UI design is about visual design and aesthetics
In 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.
User experience designers apply UX fundamentals like design thinking, human-centered design, and user research to make decisions. They’re specifically concerned with a user’s tasks, actions, and environment, while interaction designers focus on making the digital product respond to user actions in an appropriate way. They tend to think about what happens when a user clicks a button, types a phrase into a search bar or hovers over an image.
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.
They 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.
For 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.
- Define 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
UXPin–The Ultimate Interaction Design Tool
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.
