Affordance

An affordance is a design property that suggests how an element should be used — a raised button looks clickable, a handle looks draggable, an underlined text looks like a link. In UI design, perceived affordances guide users toward correct interactions without explicit instructions. When affordances are missing or misleading (like text that looks clickable but isn't), users experience confusion and frustration.

#ux

Related Terms

Atomic Design

Atomic Design is a methodology by Brad Frost for creating design systems by breaking interfaces into five hierarchical levels: atoms (basic HTML elements), molecules (simple component groups), organisms (complex UI sections), templates (page-level layouts), and pages (specific instances with real content). This approach provides a consistent mental model for organizing component libraries in React, React Native, or Flutter projects and ensures systematic scalability of the UI.

Skeleton Screen

A skeleton screen is a placeholder UI that mimics the page layout with simple shapes and animated gradients while content is loading. Unlike spinners, skeletons give users an immediate sense of the page structure, reducing perceived loading time. They are widely used in apps like Facebook, YouTube, and LinkedIn to create a smoother transition from loading to loaded state.

Media Queries

Media queries are a CSS feature that allows you to apply styles conditionally based on device characteristics like viewport width, height, orientation, color scheme preference, or reduced motion settings. They are the backbone of responsive web design, enabling different layouts for mobile, tablet, and desktop screens. Modern media queries also support user preference detection with `prefers-color-scheme` and `prefers-reduced-motion` for more accessible experiences.

Cognitive Load

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.

Component Library

A component library is a curated set of pre-built, reusable UI elements — buttons, inputs, modals, cards — packaged for consistent use across projects. Libraries like Material UI, Chakra UI, or Radix provide accessible, themeable building blocks so developers don't have to reinvent common patterns. A well-maintained component library drastically reduces development time and ensures visual consistency throughout an application.

Semantic HTML

Semantic HTML means using HTML elements that clearly describe their meaning and purpose, such as `<article>`, `<nav>`, `<header>`, and `<section>`, instead of generic `<div>` tags. This practice improves accessibility for screen readers, boosts SEO by helping search engines understand page structure, and makes code far more readable for other developers. It's considered a foundational best practice in modern web development.

All Words