Glossary: Usability and Interaction Design

Estimated reading time: 10 minutes

Welcome! This alphabetized glossary contains many terms used in this module. Understanding these terms is essential when working in the industry, participating in user groups, and completing other certificate programs.

Download the Glossary Document for a complete list of terms and definitions.

Note: If the glossary doesn't download, right-click and open the link in a new tab.

How to Create Interactive Prototypes

Term	Definition	Role in UX/UI
Design-development handoff	Sharing a finalized prototype with developers, often with specs and interactions.	Aligns expectations and reduces rework or misinterpretation in implementation.
Interaction triggers	Events that initiate actions, such as "on click," "on hover" or "on swipe."	Replicates real-world gestures and responses for realistic user testing.
Interactive prototype	A clickable, navigable model of an app or website that simulates user experience.	Allows teams to validate functionality and design before coding, reducing costly changes later.
Iteration	The process of improving a prototype based on feedback and observations.	Central to refining design and achieving a user-validated experience before development.
Overlays	Layered pop-ups or modals triggered by interactions.	Simulate real-time feedback such as confirmations or alerts within the prototype.
Prototype mode	A setting in tools such as Figma, Adobe XD, or InVision where you can link elements to simulate interactivity.	Enables click-based flows, transitions, and interactions without code.
Prototype testing	The act of manually going through flows to ensure everything works as intended.	Identifies usability gaps and broken flows before sharing with stakeholders or developers.
Real-world testing example (for example, Instagram)	Using prototypes internally before launch to simulate features such as Reels.	Demonstrates how major platforms rely on prototyping to ensure seamless rollouts.
Shareable link	A link generated by prototyping tools that allows external users to interact with and comment on the prototype.	Streamlines collaboration and allows for asynchronous feedback gathering.
Transitions	Animated effects between screens (for example, slide, fade).	Makes navigation smooth and visually engaging for users testing the prototype.
UI design (user interface)	The visual design layer of the product, including colors, icons, fonts, and branding.	Gives realism and polish to prototypes, making them feel like actual products.
Usability feedback	Insights from users, stakeholders, or team members about how intuitive and effective the prototype feels.	Drives design decisions by pinpointing confusion, delays, or unmet expectations.
User-centric design	A design philosophy where decisions are based on user needs, behavior, and feedback.	Ensures the product is intuitive, accessible, and functional for real users.
Wireframe	A low-fidelity layout of each screen that outlines structure and key components.	Establishes the skeleton of the design and serves as a foundation for interactivity.

Gesture-Based Interactions in Mobile Apps

Double tap	Two quick taps to trigger a shortcut (for example, like, zoom).	Adds efficiency for frequent tasks, but must be intuitive or taught.
Drag & drop	Move objects by dragging them to new positions.	Ideal for dashboards or reorderable lists—requires clear affordance.
Edge swipe	Swiping from the screen's edge to reveal hidden UI-like menus.	Saves space and creates fluid navigation but needs backup controls.
Gesture-based interaction	Interactions performed through touch-based motions such as swiping, pinching, dragging, and so on.	Enhances mobile UX by making interactions feel natural, fast, and immersive.
Long press	Press-and-hold to reveal extra options or enable actions.	Useful for rearranging items or exposing contextual menus.
Pinch/Spread	Gesture to zoom in or out, often used on maps or images.	Provides spatial control and visual freedom without cluttering UI.
Swipe	A directional gesture used to navigate or trigger actions.	Common in carousels, cards, and navigation between screens.
Tap	A quick touch used for selection or activation.	Common for buttons, toggles, and links—must be responsive and visible.

Using Animation for Better UX

Animation duration (Timing)	Ideal range: 200–500ms for most UX animations.	Ensures animations are helpful, not frustratingly slow or imperceptibly fast.
Easing curves	Motion timing functions like ease-in or ease-out used in animations.	Makes transitions feel natural and smooth instead of robotic or abrupt.
Feedback animations	Visual responses indicating task completion, errors, or confirmations.	Improves transparency and builds user confidence in system response.
Loading animations	Visual indicators during content loading or data fetching.	Keeps users engaged and manages expectations during wait times.
Microinteractions	Small, functional animations triggered by user actions (for example, tapping a button).	Reinforces the effect of user input and adds personality to interactions.
Navigation and transition animations	Smooth visual flows between screens or elements (for example, page slide-ins).	Helps users form a spatial map of the interface and reduces disorientation.
Onboarding animations	Motion graphics used to guide new users through key features.	Enhances user learning, boosts retention, and reduces drop-off.
UX animation	Movement or transitions applied to UI elements to improve the user experience.	Provides feedback, direction, emotion, and clarity in user interactions.