Interaction Design Glossary

Here you can find important tech terms and definitions, explained in a simple and clear way.

Pseudo class

In CSS, a Pseudo-class is a keyword added to a selector that specifies a special "state" of the selected element. Instead of styling an element based on its name or class (like .button), a pseudo-class styles it based on user interaction or its position in the document tree. The most common examples are :hover (when a mouse is over an element), :focus (when an element is selected via keyboard), and :active (the exact moment a button is clicked).

Infinite Scroll

Infinite Scroll is a web interaction technique where new content continuously loads at the bottom of the page as the user scrolls down, completely eliminating the need for traditional "Page 1, 2, 3" Pagination clicks. It is the core interaction model popularized by social media feeds like LinkedIn, Twitter, and Instagram.

Y-Axis (Vertical Scrolling)

In web design, the Y-Axis represents the vertical plane of a webpage—the dimension that users navigate by scrolling up or down. Because screen widths (the X-Axis) are physically constrained by the user's device (especially on mobile phones), the Y-Axis is theoretically infinite, serving as the primary canvas for digital storytelling and Information Architecture.

WebGL (Web Graphics Library)

WebGL (Web Graphics Library) is a powerful JavaScript API used to render interactive, hardware-accelerated 2D and 3D graphics directly within any compatible web browser. Crucially, it does this natively, without requiring the user to download or install any clunky external plugins (like the obsolete Adobe Flash).

Skeleton Screen

A Skeleton Screen is a UI (User Interface) pattern used to improve perceived performance during page load times. Instead of showing a blank white screen or a spinning loading wheel while a web application fetches data, the UI displays a wireframe-like, animated placeholder—often consisting of pulsing gray boxes and lines—that mimics the exact layout of the content that is about to appear.

Scroll Snapping

Scroll Snapping is a native CSS feature that allows developers to control the panning and scrolling behavior of a webpage. Instead of a user's scroll wheel stopping randomly halfway between two sections of content, scroll snapping forces the browser's viewport to "snap" smoothly to specific, predefined points (usually the top or center of a specific section), creating a presentation-like, slide-by-slide experience.

Carousel (Slider)

A Carousel (often called a Slider) is an interactive UI component that displays a series of content items—like images, customer testimonials, or partner logos—one at a time within the same physical space on the screen. Users can navigate through the items using arrows, swipe gestures, or pagination dots.

Zoom Interaction

Zoom Interaction allows users to enlarge the view of a webpage. This includes: browser zoom and UI zoom.

UI (User Interface)

The UI is the visual layer of the website, including all the design elements: buttons, icons, images, typography, and color schemes. Its primary goals are to ensure the interface is visually appealing, consistent, and reflective of the Brand Identity.

Tooltip

A Tooltip is a common graphical UI element. It is a brief, informative, floating message that appears when a user hovers their cursor over, focuses on, or clicks an item (such as an icon, a link, or a piece of text) on a webpage. Once the user moves their mouse away, the tooltip disappears.

Scroll Animation

Scroll Animation includes effects like elements fading in as they enter the Viewport, objects moving at different speeds (Parallax Scrolling), or entire Sections transitioning as the user scrolls.

Microinteractions

Microinteractions are the subtle details that make a user interface feel alive and polished. They consist of: triggers, rules, feedback, and modes.

Loading Animation

A Loading Animation is a form of Microinteraction used when a system needs a few moments to complete a task, such as fetching Dynamic Content via an API call, or during the initial page load.

Hover Effect

The Hover Effect is a key element of Interaction Design and one of the Button States. It is a small, subtle Animation used to confirm to the user that an element (like a button, link, or image) is interactive and ready to be clicked.

Form Validation

Form Validation is a technical process—running either on the client side (in the browser) or the server side—that checks if the data a user has entered into a web form is complete, accurate, and formatted correctly before the form is allowed to be submitted.

Error State

An Error State is a specific UI (User Interface) condition designed to visually communicate to a user that an action they attempted has failed. This usually occurs during data entry—such as typing an invalid email format into a Lead Form, using an incorrect password on a login screen, or trying to upload a file that is too large.

Button States

Every interactive element on a website, particularly a button or a CTA (Call to Action), should have multiple Button States to provide clear feedback to the user, a core tenet of Interaction Design. The most common states include: normal, hover, disabled, and focus.