UI/UX Glossary

A

A/B testing #

Comparing two versions of a screen or flow with real users to see which performs better on a chosen goal.

Above the fold #

The part of a page visible without scrolling on a given device.

Accessibility #

Designing products so people with disabilities can perceive, understand, navigate and use them.

Accessibility tree #

Structured representation of interface elements that assistive technologies read.

Accordion #

Vertically stacked sections that expand and collapse to reveal content.

Action button #

Button that performs the primary task on a screen, often styled to stand out.

Active state #

Visual style shown while a control is being pressed or activated.

Affordance #

Visual cue that suggests how an element can be used, such as a raised button.

Alt text #

Text description of an image that screen readers announce and that shows when an image fails to load.

Anchor link #

Link that jumps to a specific section of the same page.

Animation easing #

Curve that controls how an animation accelerates and decelerates over time.

Aria label #

Accessible name added to an element so assistive technology can describe it.

Aspect ratio #

Proportional relationship between width and height of an element or media.

Auto-complete #

Suggestions that complete a query or entry as the user types.

Auto-save #

Automatically saving user input so work is not lost.

Avatar #

Image or initials that represent a user in an interface.

B

Back button #

Control that returns the user to the previous screen or step.

Banner #

Full-width message or promotional area placed at the top of a page or section.

Baseline grid #

Vertical rhythm of evenly spaced lines that aligns text and components.

Bottom navigation #

Persistent navigation bar at the bottom of a mobile screen for main destinations.

Bottom sheet #

Panel that slides up from the bottom of a mobile screen with contextual options.

Bounce rate #

Percentage of visitors who leave a site after viewing only one page.

Brand guidelines #

Rules for logo, color, type and voice that keep interfaces consistent with the brand.

Breadcrumb #

Trail of links showing where the current page sits in the site hierarchy.

Breadcrumb trail #

Sequence of linked locations shown as a path through the site.

Breakpoint #

Screen width at which a layout changes to suit a different device size.

C

Call to action (CTA) #

Element that prompts the user to take a specific next step.

Card #

Container that groups related content and actions into one visual unit.

Card grid #

Layout that arranges cards in rows and columns for browsing.

Carousel #

Set of items shown one at a time that the user can move through.

Checkbox #

Control that selects one or more independent options.

Chip #

Compact element that represents an input, filter or tag.

Cognitive accessibility #

Designing so people with memory, attention or learning differences can understand and complete tasks.

Cognitive load #

Amount of mental effort a screen demands from the user.

Color blindness #

Reduced ability to distinguish certain colors, which designs should not rely on alone.

Color contrast #

Difference in luminance between foreground and background, which determines readability.

Color token #

Named color value, such as primary or surface, used instead of hard-coded colors.

Compact mode #

Denser view of a list or table that shows more items at once.

Component library #

Collection of reusable interface components with documented behavior.

Confirmation dialog #

Message asking the user to confirm an action, often before a destructive step.

Consistency #

Using the same patterns, terms and behavior across a product so users can predict outcomes.

Container #

Element that holds and constrains the width of content.

Contextual help #

Guidance shown within the task at the moment it is needed.

Contrast ratio #

Numerical measure of the difference in brightness between two colors.

Conversion rate #

Percentage of users who complete a desired action such as sign-up or purchase.

Copywriting #

Writing short text for interface elements such as buttons, labels and messages.

Core Web Vitals #

Google metrics for loading speed, interactivity and visual stability.

Corner radius #

Degree of rounding on the corners of an element.

Cursor #

Pointer that shows where input will occur and can signal interactivity.

D

Dark mode #

Interface theme with dark backgrounds and light text, which can reduce glare.

Dashboard #

Screen that summarizes key data and status for quick monitoring.

Data table #

Grid of rows and columns for comparing and sorting structured information.

Debounce #

Delaying an action until input has stopped changing for a set time.

Default state #

Appearance of a component when no interaction has happened.

Density #

How tightly spacing and sizing are arranged in an interface.

Design system #

Shared set of components, tokens, patterns and guidelines used across products.

Design token #

Named design decision, such as a color, spacing or font size, stored as a reusable value.

Destructive action #

Action that deletes or cannot easily be undone, usually styled as a warning.

Dialog #

Window that asks for input or shows information and interrupts the current task.

Disabled state #

Appearance of a control that cannot currently be used.

Drag and drop #

Interaction that lets users move items by dragging them to a new place.

Drawer #

Panel that slides in from a screen edge to show additional content or options.

Dropdown menu #

Menu that opens from a control to show a list of options.

E

Edge case #

Unusual condition, such as an empty list or very long text, that the design must handle.

Empty input #

Field left blank, which should be validated and explained rather than silently failing.

Empty state #

Screen or area shown when there is no content yet, often with guidance on what to do next.

Error message #

Text that explains what went wrong and how to fix it.

Error state #

Appearance of a field or component when input is invalid.

Expandable section #

Area that reveals more content when the user activates it.

Eye tracking #

Method that records where users look on a screen, used in usability research.

F

F-pattern #

Eye movement pattern that scans across the top, then down the left side of content.

Fitts's law #

Time to reach a target depends on its distance and size, so larger, closer targets are faster to hit.

Focus indicator #

Visible outline that shows which element currently has keyboard focus.

Focus order #

Sequence in which keyboard focus moves through interactive elements.

Font weight #

Thickness of characters, such as regular or bold, used to show hierarchy.

Footer #

Area at the bottom of a page with secondary links, legal text and contact details.

Form validation #

Checking user input against rules and giving feedback on errors.

G

Gestalt principles #

Rules describing how people group visual elements by proximity, similarity, continuity and closure.

Gesture #

Touch action such as swipe, pinch or long press used to control an interface.

Google Analytics #

Web analytics tool that measures traffic and user behavior.

Grid system #

Structure of columns and gutters that organizes layout.

Gutter #

Space between columns or grid items.

H

Hamburger menu #

Three-line icon that opens a hidden navigation menu.

Happy path #

Most common, error-free route a user takes through a flow.

Haptic feedback #

Vibration that confirms an action on a touch device.

Heatmap #

Visual showing where users click, move or scroll most on a page.

Heuristic evaluation #

Expert review of an interface against established usability principles.

Hick's law #

Decision time increases with the number and complexity of choices.

Hierarchy #

Visual ordering of content by importance using size, weight, color and position.

Hit area #

Invisible or visible region that responds to input, larger than the visible element when needed.

Hover card #

Preview panel that appears on hover, showing extra information about a link or item.

Hover delay #

Short pause before a hover effect or tooltip appears, which prevents accidental triggering.

Hover state #

Appearance of an element when a pointer is over it.

I

Icon #

Simple graphic symbol that represents an action, object or idea.

Icon button #

Button that uses an icon alone, which needs a text label for accessibility.

Infinite scroll #

Pattern that loads more content automatically as the user scrolls.

Information architecture #

Structure and labeling of content so users can find what they need.

Inline link #

Link within running text that takes the user to related content.

Inline validation #

Checking input as the user types or leaves a field.

Input field #

Area where users type or enter data.

Interaction design #

Design of how users and the interface respond to each other over time.

Interaction state #

Set of visual states an element moves through, such as default, hover, focus and pressed.

J

Jakob's law #

Users expect a site to work like the sites they already know.

Journey map #

Diagram of the steps, emotions and touchpoints a user experiences with a product.

K

Kerning #

Spacing between specific pairs of letters.

Keyboard navigation #

Using a keyboard alone to move through and operate an interface.

Keyboard shortcut #

Key combination that performs an action quickly.

L

Landing page #

Standalone page built to move visitors toward one action.

Layout #

Arrangement of elements on a screen or page.

Leading #

Vertical space between lines of text.

Learnability #

How quickly new users can complete basic tasks.

Light mode #

Interface theme with light backgrounds and dark text.

Link text #

Words that describe where a link goes, which should make sense out of context.

Live region #

Part of the page that announces content changes to screen readers without moving focus.

Load more button #

Control that adds the next set of items to a list on demand.

Loading spinner #

Animated icon that shows that something is loading.

Loading state #

Feedback shown while content or a process is in progress.

Localization #

Adapting an interface to a language, region and cultural conventions.

Logo #

Visual mark that identifies a brand.

M

Magic number #

Hard-coded value without explanation, which design systems replace with tokens.

Mega menu #

Large navigation panel that shows many links in organized columns.

Menu #

List of options or commands that a user can choose from.

Micro-interaction #

Small, contained moment of feedback, such as a toggle animation or a confirmation tick.

Microcopy #

Short interface text such as labels, hints, button text and error messages.

Mobile navigation #

Menu patterns designed for small screens, such as bottom bars and drawers.

Mobile-first design #

Designing for small screens first, then adding layout for larger screens.

Modal #

Dialog that appears over the current page and requires attention before the user continues.

Modal focus trap #

Keeping keyboard focus inside an open dialog until it is closed.

Motion design #

Use of movement to explain change, guide attention and add personality.

Motion sensitivity #

Reaction to animation that can cause discomfort, which designs can reduce with reduced-motion settings.

N

Navigation #

Means by which users move between sections, pages and tasks.

Navigation bar #

Persistent bar that holds the main links of a product.

Negative space #

Empty area around elements that helps group and separate content.

Nielsen's heuristics #

Ten general principles for interaction design, such as visibility of system status and error prevention.

Notification #

Message that informs the user of an event or update.

O

Offline state #

Interface shown when the connection is lost, which should explain what still works.

Onboarding #

Introductory experience that helps new users learn the product and reach their first success.

Onboarding checklist #

List of setup steps that guides a new user toward key actions.

Optimistic UI #

Showing the expected result immediately while the action completes in the background.

P

Pagination #

Splitting long lists into pages with controls to move between them.

Passwordless login #

Sign-in method that uses a link, code or device instead of a password.

Pattern library #

Collection of reusable interaction and layout patterns with usage guidance.

Persona #

Fictional representation of a user group based on research, used to guide decisions.

Pill button #

Button with fully rounded ends, often used for filters and tags.

Placeholder text #

Hint text shown inside an empty field, which should not replace a label.

Popover #

Small floating panel that appears near the element that triggered it.

Primary action #

Most important action on a screen, usually given the strongest visual emphasis.

Product tour #

Guided walkthrough that highlights key features in the interface.

Progress indicator #

Visual showing how far a user has come in a task or process.

Progressive disclosure #

Showing only essential information first and revealing more on demand.

Progressive web app (PWA) #

Web app that can install on a device and work offline in part.

Prototype #

Interactive model of a design used to test flows before development.

Pull-to-refresh #

Gesture that reloads content by pulling down from the top of a list.

R

Radio button #

Control that selects one option from a group.

Rating control #

Interface element that lets users give a score, often shown as stars.

Read time #

Estimated time needed to read a piece of content.

Readability #

How easily text can be read and understood.

Reading order #

Sequence in which content is read, which should match the visual order and the code order.

Recognition over recall #

Principle that users should see options rather than remember them.

Reduced motion #

User setting that limits animation for people sensitive to motion.

Required field #

Input the user must complete, usually marked clearly.

Reset button #

Control that clears a form or restores default values.

Responsive design #

Layouts that adapt to different screen sizes and orientations.

Responsive image #

Image that loads a size or format suited to the device and screen.

Retention rate #

Percentage of users who return to a product over a set period.

Role (ARIA) #

Attribute that tells assistive technology what type of element something is.

Rounded corners #

Curved corners on elements, which affect perceived friendliness.

S

Scannability #

How easily users can pick out key information on a page at a glance.

Screen reader #

Software that reads interface content aloud for people who are blind or have low vision.

Scroll behavior #

How content moves as the user scrolls, including sticky and snapping behavior.

Scroll indicator #

Visual cue that more content can be reached by scrolling.

Search bar #

Input that lets users find content by typing a query.

Search filter #

Controls that narrow search results by attributes such as price or category.

Secondary action #

Less prominent action that supports the primary one.

Segmented control #

Group of options shown as connected buttons, where one is selected at a time.

Selection state #

Appearance of an item that has been chosen.

Session timeout #

Automatic sign-out after a period of inactivity.

Sign-in flow #

Steps a user takes to access an account, including password, social or passwordless options.

Sitemap #

Structured list or diagram of a site's pages.

Skeleton screen #

Placeholder layout that shows the shape of content while it loads.

Skip link #

Link at the top of a page that lets keyboard users jump past repeated navigation.

Slider #

Control that lets users select a value or range by dragging a handle.

Snackbar #

Brief message that appears at the bottom of a screen and disappears on its own.

Sorting control #

Control that changes the order of items in a list or table.

Spacing scale #

Set of consistent spacing values used across a design.

Splash screen #

Brief screen shown while an app starts.

Split button #

Button with a primary action and an adjacent menu of related actions.

Split view #

Layout that shows two related panels side by side.

State management #

How an interface tracks and updates what the user is doing and seeing.

Status indicator #

Visual that shows the condition of an item, such as active, pending or failed.

Stepper #

Control that moves a value up or down, or a flow through numbered steps.

Sticky footer #

Footer that remains at the bottom of the viewport when content is short.

Sticky header #

Header that stays visible at the top while the user scrolls.

Storyboard #

Sequence of sketches that shows how a user moves through an experience.

Style guide #

Document that defines how an interface should look and behave.

Subtitles #

Text that shows speech or sound in video, which also supports accessibility.

Success message #

Feedback that confirms a task was completed.

Swipe gesture #

Quick sideways or vertical touch movement used to move between items or reveal actions.

System status #

Feedback that tells users what the system is doing.

T

Tab bar #

Row of labeled tabs that switch between related views.

Tap target #

Area that responds to a tap, which should be large enough to hit comfortably.

Task flow #

Sequence of screens and actions needed to complete a task.

Template #

Reusable page layout with placeholders for content.

Temporary state #

Appearance that lasts only for a short time, such as a transient error.

Tertiary action #

Least prominent action, often shown as a text link.

Text input #

Field where users type free-form text.

Text scaling #

Ability to enlarge text without breaking the layout.

Thumb zone #

Area of a phone screen that is easy to reach with the thumb.

Thumbnail #

Small preview image representing a larger item.

Timeline #

Visual showing events or steps in order over time.

Toast #

Short, temporary message that confirms an action or reports a result.

Toggle switch #

Control that switches a setting on or off.

Tone of voice #

Consistent personality and attitude expressed through interface copy.

Tooltip #

Short label that appears when a user hovers over or focuses an element.

Touch target size #

Minimum recommended size for touchable elements, often around 44 by 44 points or 48 by 48 density-independent pixels depending on the platform guideline.

Transition #

Animated change between two states or screens.

Two-factor authentication #

Security step requiring a second verification method after a password.

Typography #

Choice and arrangement of type to make text readable and establish hierarchy.

U

Undo #

Ability to reverse a recent action.

Unsaved changes warning #

Alert that appears when a user tries to leave with unsaved input.

Usability testing #

Observing real users as they attempt tasks to find problems in a design.

User experience (UX) #

Overall experience a person has when using a product, including ease, value and emotion.

User flow #

Diagram showing the paths a user can take through a product.

User interface (UI) #

Visual and interactive elements through which people operate a product.

User research #

Methods for learning about users' needs, behaviors and goals.

Utility class #

Single-purpose style rule used to build layouts quickly.

V

Validation message #

Feedback shown when input does not meet a rule.

Vertical rhythm #

Consistent spacing between lines and blocks that gives text a steady pace.

Video autoplay #

Video that starts without user action, which should be muted and easy to stop.

Visual feedback #

Change in the interface that confirms a user action.

Visual hierarchy #

Arrangement of elements that guides the eye in order of importance.

Visual weight #

How heavy or dominant an element looks compared with others.

W

Wayfinding #

Cues that help users understand where they are and how to get where they want to go.

White space #

Empty area around content that improves readability and focus.

Wireframe #

Simple, low-detail sketch of a layout that shows structure before visual design.

Wizard #

Multi-step flow that guides users through a complex task one step at a time.

Z

Z-pattern #

Eye movement pattern across a page from top left to top right, then diagonally to bottom left and right.

Zero-state #

Screen shown before any data exists, with guidance on how to start.

Zoom #

Enlarging content, which layouts should support without losing function.