Website Analysis Glossary
Visual hierarchy and UX terms for websites and landing pages.
65 terms
A
A/B Testing
The practice of showing two versions of a design element to different user segments and measuring which performs better against a defined metric — the most reliable method for validating design decisions.
Above the Fold
The portion of a webpage visible without scrolling — the most valuable real estate for first impressions, key messages, and primary CTAs.
Accent Color
A bold, high-saturation color used sparingly throughout a design to draw attention to key elements such as CTAs, highlights, or critical information — its power comes from contrast with surrounding neutrals.
Attention Ratio
In landing page design, the ratio of interactive elements (all links) to the number of conversion goals — a page with one goal and many links dilutes attention; an ideal ratio approaches 1:1.
B
Blur Test
A design evaluation technique where an image is progressively blurred to reveal which elements stand out based purely on size, color, and contrast — independent of content.
Bounce Rate
The percentage of visitors who leave after viewing only one page — a high bounce rate on a landing page often signals a mismatch between the ad promise and the page content or design.
Brand Consistency
The uniform application of visual elements — colors, fonts, imagery style, and spacing — across all design touchpoints to build recognition, trust, and perceived professionalism.
Breadcrumb Navigation
A secondary navigation element showing a user's location within a site hierarchy — improves orientation, reduces bounce rate, and provides internal linking value for SEO.
C
Cognitive Load
The mental effort required to process the visual information on a screen — lower cognitive load means faster comprehension and better conversions.
Color Blocking
A design technique using large areas of single, bold colors to create strong visual separation and hierarchy between content sections — particularly effective for distinguishing CTAs from body content.
Color Contrast
The degree of visual difference between two colors placed adjacent to each other — high contrast increases legibility and attention, while low contrast reduces both.
Color Harmony
The visually pleasing combination of colors based on their relationships on the color wheel — complementary, analogous, or triadic — creating a cohesive palette that reinforces brand identity.
Color Psychology
The study of how specific colors influence perception, emotional response, and behavior — used in design to direct attention, signal meaning, and build brand associations.
Color Saturation
The intensity or purity of a color; highly saturated elements attract the eye faster than muted ones, making saturation a powerful tool for establishing visual priority.
Color Temperature
The warmth or coolness of a color; warm colors (red, orange, yellow) advance visually and attract attention faster, while cool colors (blue, green, purple) recede.
Contrast Ratio
The ratio of luminance between two colors, used to measure how distinguishable one element is from another.
Conversion Friction
Any design element, UX pattern, or content gap that adds hesitation, confusion, or effort to the path toward conversion — identifying and reducing friction is the core task of CRO.
Conversion Funnel
The series of pages and steps a visitor moves through before completing a desired action — with drop-off points at each stage that reveal where design or UX friction exists.
Conversion Rate Optimization
The systematic practice of increasing the percentage of website visitors who complete a desired action — through iterative improvements to design, copy, and user experience.
CTA Visibility
A measure of how easily a call-to-action button or link can be spotted within the visual hierarchy of a design.
F
F-Pattern
A common eye-tracking reading pattern where users scan content in an F-shape: two horizontal sweeps across the top, then a vertical movement down the left side.
Figure-Ground
A Gestalt principle describing how the brain separates elements (figure) from their background (ground) — fundamental to readability, focal point clarity, and contrast-based hierarchy.
Focal Point
The single element in a design that first attracts the viewer's attention, established through size, contrast, color, or position.
G
Gestalt Principles
A set of psychological laws describing how humans automatically perceive visual elements as unified wholes — including proximity, similarity, continuity, and figure-ground relationships.
Grid System
A framework of horizontal and vertical lines that creates structure, alignment, and visual rhythm across a layout — the invisible scaffolding behind consistent, professional designs.
Gutenberg Diagram
A model of natural reading patterns showing that attention flows from top-left (primary optical area) to bottom-right (terminal area), with reduced attention in the top-right and bottom-left corners.
H
Heatmap
A data visualization showing where users click, move, and concentrate attention on a webpage — using color gradients from cool (low activity) to warm (high activity) to reveal real user behavior.
Hero Image
The large, dominant visual at the top of a landing page that sets the emotional tone, provides context, and supports the headline message — should reinforce rather than compete with the CTA.
Hero Section
The large introductory area at the top of a webpage, typically containing the headline, value proposition, and primary CTA.
L
Landing Page Hierarchy
The deliberate visual structure of a landing page: headline → value proposition → social proof → CTA, in order of visual weight.
Logo Placement
The strategic positioning and sizing of a brand logo within a design — should be present and recognizable but never the dominant focal point, which belongs to the offer or message.
M
Micro-Copy
Short pieces of text — button labels, error messages, tooltips, placeholder text — that guide users through an interface and reduce friction at key decision points.
Mobile-First Design
A design approach that begins with the smallest screen size and progressively adds layout complexity for larger screens — essential given that the majority of web traffic is now mobile.
P
Page Load Speed
The time required for a web page to fully render in a browser — directly impacts both user experience and conversion rates, with each second of delay measurably reducing conversions.
Perceptual Grouping
The brain's automatic tendency to organize visual elements into meaningful patterns and relationships — the foundation of Gestalt principles and a core mechanism of visual hierarchy.
Pre-Attentive Attributes
Visual properties — such as color, size, orientation, and motion — processed by the brain within 200ms before conscious attention is engaged, making them the fastest tool for establishing hierarchy.
Progressive Disclosure
A UX design technique where secondary information is hidden until needed, reducing cognitive load and keeping the user's primary path clear and uninterrupted.
Proximity Principle
A Gestalt principle stating that elements placed close together are perceived as related — the primary tool for visually grouping related content without borders or backgrounds.
R
Reading Gravity
The natural tendency of audiences reading left-to-right languages to begin scanning from the top-left and move toward the bottom-right — a core assumption in Western visual hierarchy design.
Rule of Thirds
A composition principle where the frame is divided into nine equal parts; placing key elements at the intersections or along the dividing lines creates more balanced and visually engaging layouts.
S
Scarcity Signal
A visual element (countdown timer, "limited availability" badge, low stock indicator) that creates urgency and accelerates conversion decisions by activating loss aversion.
Scroll Depth
The measurement of how far users scroll down a page — indicating engagement level and identifying where users stop engaging, which informs where key content and CTAs should be placed.
Similarity Principle
A Gestalt principle stating that elements sharing visual characteristics — color, shape, size, or texture — are perceived as belonging to the same group.
Skimmability
The degree to which a design's content can be understood through rapid scanning without detailed reading — determined by heading hierarchy, bullet points, short paragraphs, and visual breaks.
Social Proof Placement
The strategic positioning of trust signals (reviews, logos, testimonials) within the visual hierarchy to reduce friction at key decision points.
Split Testing
The systematic comparison of two or more design variations shown to separate user groups to determine which produces the best outcome — encompasses A/B testing and multivariate testing.
Sticky Navigation
A navigation bar that remains fixed to the top of the screen as users scroll — maintains persistent access to key CTAs and links, reducing friction for users who decide to convert mid-page.
T
Trust Badge
A small visual element — security seal, money-back guarantee icon, or certification logo — that reduces purchase anxiety and increases conversion confidence near CTAs.
Typography Hierarchy
The visual system of differentiating text elements through font size, weight, style, and spacing to clearly communicate the relative importance of content.
V
Value Proposition
The clear, concise statement of the specific benefit a product delivers to its target customer — typically the headline element with the highest visual weight on a landing page.
Viewport
The visible area of a web page within a browser window at any given time — varies by device and screen size, making viewport-aware design critical for above-the-fold content placement.
Visual Anchor
A dominant visual element that establishes the primary focal point of a design, from which all other elements are perceived in relation — typically the hero image, headline, or CTA.
Visual Balance
The perceived equilibrium between design elements, achieved through symmetrical or asymmetrical distribution of visual weight — unbalanced layouts feel unstable and reduce trust.
Visual Entry Point
The first element the eye encounters when viewing a design, established through size, contrast, or position — should always align with the most important piece of content or action.
Visual Feedback
Visual responses to user actions — hover states, loading indicators, success animations — that confirm interactions and reduce uncertainty, improving trust and completion rates.
Visual Hierarchy
The arrangement of design elements by order of importance to guide the viewer's eye through content in a deliberate sequence.
Visual Identity
The complete set of visual elements — logo, color palette, typography, imagery style, and layout principles — that together make a brand recognizable across all touchpoints.
Visual Noise Reduction
The deliberate removal or de-emphasis of non-essential design elements to strengthen hierarchy and improve the signal-to-noise ratio of the most important content.
Visual Rhythm
The repetition of visual elements at consistent intervals, creating a sense of movement and structural flow that guides the eye predictably through a layout.
Visual Scanning
The rapid, non-linear movement of the eye across a design to extract key information before settling into focused reading — effective designs accommodate and guide this behavior.