Figma

Drag and drop is an interaction pattern that lets users move, reorder, or transfer UI elements by clicking (or touching), holding, and dragging them to a new position. It's used for file uploads, kanban boards, sortable lists, and layout builders. The HTML Drag and Drop API provides native browser support, while libraries like dnd-kit and react-beautiful-dnd offer more polished, accessible, and touch-friendly implementations.

Dark mode is a UI color scheme that uses light-colored text and elements on a dark background. It reduces eye strain in low-light environments, can save battery on OLED screens, and has become an expected feature in modern applications. Implementation typically involves CSS custom properties or design tokens that switch between light and dark theme values, often respecting the user's system-level preference via the `prefers-color-scheme` media query.

Accessibility (often abbreviated a11y) is the practice of designing and building websites and apps so they can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. This involves proper semantic markup, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Beyond being an ethical responsibility, accessibility is increasingly a legal requirement in many jurisdictions.

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.

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.

Progressive enhancement is a web development strategy that starts with a baseline of functional HTML content accessible to all browsers, then layers on CSS styling and JavaScript interactivity for more capable environments. This approach ensures that core functionality works everywhere, while users with modern browsers get a richer experience. It contrasts with graceful degradation, which starts with the full experience and tries to handle failures.