Glossary
Accordion
A vertically stacked list of items that can be expanded or collapsed to show or hide content.
Above the fold / below the fold
Content visible without scrolling / content that requires scrolling to view.
A/B testing
A method of comparing two versions of a design or content to determine which performs better.
Affordance
A visual cue that suggests how something should be used (e.g. a button looks clickable).
Alt text
Descriptive text for images, improving accessibility and SEO.
ARIA labels
accessibility features that describe elements to screen readers.
Aspect ratio
The proportional relationship between the width and height of media elements.
Breadcrumbs
A navigation aid showing the user’s current location within the site structure.
Breakpoints
Defined screen widths where layout or design adapts for responsiveness.
Card
A contained UI element used to display grouped content or actions, such as blog previews.
Card sorting
A research method used to define or improve information architecture.
Carousel / slider
A rotating set of images or content panels, typically interactive.
Cognitive load
The amount of mental effort required to interact with a product or interface.
Component
A reusable design or code element (e.g. button, header, input field).
Container
A layout structure that groups and contains content or components.
Conversion
When a user completes a desired action (e.g. form submission or demo request).
CTA (Call to action)
A prompt encouraging users to take a specific action.
Delight
Positive, often unexpected, user experiences that increase satisfaction.
Dropdown
A menu that expands to reveal additional options.
Error prevention
Design strategies that reduce the likelihood of user errors.
F-pattern
A typical reading pattern where users scan web content in an F-shaped layout.
Feedback
Responses or visual cues that indicate the outcome of a user’s action.
Flow
The sequence of steps a user follows to complete a task.
Fold
The line dividing visible and scrollable content on a web page.
Form fatigue
User disengagement caused by long or complex forms.
Gesture
User interaction via touch or motion, such as swiping or pinching.
Gestalt principles
Psychological rules that describe how users visually group elements (e.g. proximity, similarity).
Grid system
A layout framework based on rows and columns for consistent design alignment.
Hamburger menu
A three-line icon used to toggle navigation menus, often on mobile.
Heuristic evaluation
A usability inspection based on established principles.
Hero section
The prominent area at the top of a page, often with a heading, subheading, and CTA.
Hover state
The change in appearance of a UI element when a user hovers over it with a pointer.
VWO
Tool used for session recording, heatmaps, and usability testing.
Iconography
The style, usage, and meaning of icons within a user interface.
Information architecture (IA)
The structure and labelling of content to help users navigate efficiently.
Label
Descriptive text associated with a UI element, such as a form field.
Lightbox
A feature that opens media in a larger view overlaid on the page.
Mental model
The user’s internal understanding or expectation of how a system should work.
Microcopy
Short text that guides or supports users, such as button labels or error messages.
Mobile-first design
A design strategy that begins with mobile layouts and scales up for larger screens.
Modal
A dialog box or popup that appears above page content to deliver additional information or actions.
Module
A self-contained section of content or functionality, often made of multiple components.
Navigation (global/local)
Global navigation refers to the primary site-wide menu; local navigation pertains to section-specific links.
Onboarding
The process of introducing and guiding new users through key functions or value.
Pagination
A control allowing users to navigate through multiple pages of content.
Path analysis
The study of user movement through a site to understand behaviour patterns.
Persona
A fictional character based on user research representing a segment of your audience.
Placeholder
Example text inside a form input providing guidance on what to enter.
Pill / tag
A small label used to categorise or highlight content, often removable or clickable.
Primary / secondary button
Buttons styled to indicate action hierarchy: main CTA versus supporting actions.
Progress indicator
A visual tool showing how far a user is in a multi-step process.
Progressive disclosure
A design technique that reveals only necessary information to avoid overwhelming users.
Radio buttons
Form elements that allow users to select one option from a list.
Range slider
An interactive control for selecting a numeric range by dragging handles.
Responsive design
Design that adapts seamlessly to different screen sizes and devices.
Skeleton loader
Placeholder UI shown while content is loading, indicating layout structure.
Skeuomorphism
A design style that mimics the appearance or function of physical objects.
Sticky header/footer
Fixed navigation elements that remain visible as the user scrolls.
System status visibility
UI feedback that communicates what’s happening or changed in the system.
Tab
A navigation element that toggles between different views or content areas without page reload.
Tag
A label applied to content for categorisation or filtering, often styled as a pill.
Task completion rate
A usability metric measuring how many users successfully complete a task.
Tooltip
A small popup with helpful text shown on hover or focus.
Usability testing
Evaluating a product by observing users attempting to complete tasks.
User intent
The underlying goal or reason behind a user’s actions.
User journey
A visualisation of the steps a user takes to complete a goal.
Wayfinding
Features that help users orient themselves and navigate through the website.
Wireframe
A low-fidelity visual guide to page structure and layout, typically without styling.
Z-index
A CSS property controlling the stacking order of overlapping elements.