Atomic Design

Usability testing is a UX research method where real users attempt to complete specific tasks while observers note difficulties, confusion, and behavior patterns. It can be moderated (with a facilitator) or unmoderated (self-guided with recording), and conducted on prototypes or live products. Even testing with just 5 users typically uncovers the majority of usability issues, making it one of the highest-ROI activities in product development.

JSX (JavaScript XML) is a syntax extension for JavaScript used primarily in React that lets you write HTML-like markup directly within your JavaScript code. It gets transpiled by tools like Babel or SWC into regular `React.createElement()` calls before reaching the browser. JSX supports embedding dynamic expressions with curly braces, conditional rendering, and mapping over arrays, making it a powerful and intuitive way to describe UI structures declaratively.

Headless UI refers to component libraries that provide behavior, state management, and accessibility logic without any predefined styling or markup. Libraries like Radix Primitives, Headless UI by Tailwind Labs, and React Aria give developers full control over visual presentation while handling complex patterns like focus management, keyboard navigation, and ARIA attributes. This approach decouples functionality from design, making it ideal for custom design systems.

A design system is a collection of reusable components, guidelines, and standards that ensure visual and functional consistency across a product or suite of products. It typically includes a component library, design tokens, typography rules, color palettes, and documentation. Design systems bridge the gap between designers and developers, enabling teams to build interfaces faster while maintaining a unified look and feel.

CSS Animation uses `@keyframes` rules and the `animation` property to create complex, multi-step animations entirely in CSS without JavaScript. Combined with CSS transitions for simple state changes, these tools handle most UI animation needs performantly since browsers can optimize them on the GPU compositor thread. Properties like `transform` and `opacity` are particularly efficient to animate because they don't trigger layout recalculations or repaints.

Cognitive load refers to the amount of mental effort required to use an interface. In UX design, reducing cognitive load means simplifying choices, minimizing distractions, and presenting information progressively so users aren't overwhelmed. Techniques like consistent layouts, clear visual hierarchy, familiar patterns, and sensible defaults all help keep cognitive load manageable and allow users to focus on their actual tasks.