Unit
- Interaction design focuses on shaping the dialogue between users and digital products through deliberate sequencing of input, output, and feedback. It goes beyond screen layout to address the full user journey.
- Five core components define interaction design: words (microcopy), visual representations (layout and icons), physical objects (devices and input methods), time (animation and pacing), and behavior (how the system reacts).
- The goal is to create usable, equitable, enjoyable, and useful experiences by aligning system responses with user expectations and task contexts. Good interaction design feels invisible.
- Interaction design differs from UI design in scope: UI focuses on visual presentation, while interaction design encompasses the entire flow, including navigation, feedback, and system logic.
- Affordances communicate possible actions through visual cues. A button that looks pressable invites clicking; a slider suggests dragging. Misleading affordances cause confusion.
- Signifiers indicate where actions take place. For example, an underlined link signals clickability, an arrow beside a menu suggests expandability. Signifiers make affordances discoverable.
- Feedback confirms that an action has been received. It can be visual (highlighting), auditory (click sound), or haptic (vibration). Timely feedback prevents users from wondering if the system is working.
- Interaction design is iterative and user-centered. Designers create prototypes, test with real users, and refine based on observed behavior. This cycle continues until usability goals are met.
- Mapping refers to the relationship between controls and their effects. For example, pressing the left button on a steering wheel causes the car to turn left. In digital interfaces, spatial mapping where buttons are placed near the elements they control reduces cognitive load and improves usability. Good mapping feels intuitive.
- Constraints limit the range of possible actions to guide users toward correct usage. Disabling a submit button until required fields are filled prevents errors. Constraints can be physical, logical, cultural, or semantic. They help prevent mistakes and streamline decision making by reducing options.
- Consistency allows users to apply prior knowledge to new interfaces by using similar patterns, terminology, and behaviors. Consistent placement of navigation elements, icons, and commands reduces learning time. Inconsistency forces users to relearn, increasing cognitive load and frustration.
- Discoverability ensures that users can find available actions without guesswork. A well designed interface makes core functions obvious through clear labels, visible controls, and intuitive layouts. Hidden or buried features reduce usability. Discoverability is achieved through thoughtful information architecture and progressive disclosure.
Design Principle
Principle: Affordance and Signifier Alignment
Definition: Every interactive element should visually communicate its function and show how to use it. For example, a flat button without depth may no longer signal clickability in a modern interface; subtle shadows or color changes restore the affordance.
Application: In a mobile form, use raised buttons for primary actions, outline buttons for secondary actions, and plain text for links. Ensure the signifier (shape, color, label) matches the affordance (tap to submit) to reduce cognitive load.
Quick Revision
- Interaction design orchestrates the dialogue between user and system through input, output, and feedback.
- The five components are words, visuals, physical objects, time, and behavior.
- Affordances suggest possible actions; signifiers indicate how to perform them.
- Feedback is essential for confirming system response and maintaining user trust.