Definition
A zone hierarchy is a structured relationship between zones that represent elements or sections of a webpage or app screen. A parent zone contains one or more child zones: for example, a dropdown menu can be the parent, while its individual menu entries are children. In Contentsquare’s Zoning Analysis, the relationship helps users analyze a component at different levels of detail.
The hierarchy matters because metrics can be read at both the container and element level. Contentsquare’s mobile Zoning Analysis documentation describes a surface-based aggregation method that connects parent and child zones through their visual nesting, and applies a coverage threshold to decide whether a child is visually nested inside a parent. When a parent is analyzed, the data from its child zones is aggregated into the parent result. The product also documents a DOM-hierarchy basis for its Multi-zone selector, so the method used can depend on the analysis workflow.
Zone hierarchy is not the same as a site’s navigation hierarchy or an information architecture map. It describes the relationship between measurable page or screen areas inside a zoning, not the full structure of a website, app, or organization.
What does that mean
Think of a page like a set of boxes inside bigger boxes. The big box is the parent zone, and the smaller boxes inside it are child zones. The hierarchy shows how the pieces fit together so you can study the whole area and each part.
Why this matters
Without a clear hierarchy, a strong result for a large component can hide a weak result for one of its important elements. Understanding the relationship helps teams choose the right level of analysis, compare related elements fairly, and prioritize changes that improve the experience or business outcome.
Use cases
Analyze menus and other nested navigation components
When a menu receives attention but users still struggle to find the next page, a parent-level metric alone may not show which choices are helping or creating friction. Zone hierarchy lets teams examine the menu as a whole and then compare the child zones representing individual entries or controls.
This helps UX/UI and Product teams identify overlooked labels, high-value destinations, or menu items that attract interaction without supporting the next step. The expected benefit is a clearer navigation experience and better prioritization of menu changes.
Diagnose performance inside complex page sections
Product pages, promotional modules, and forms often contain several links, labels, images, and calls to action inside one larger section. If the section is analyzed only as a single zone, underperforming child elements can be hidden by the total result.
Using the hierarchy, Ecommerce and UX/UI teams can compare the parent section with its child elements and connect interaction metrics to outcomes such as conversion or revenue. This makes it easier to decide whether to simplify the section, change its order, or strengthen a specific call to action.
See it in practice
HARTING used Contentsquare’s Journey Analysis and zone-based Heatmaps to identify information overload caused by an unclear page structure and hierarchy on product detail pages. The team restructured product information and reported a 38% increase in PDP downloads after optimizing the experience.
Compare parent and child behavior in mobile app screens
A mobile screen can contain controls nested inside cards, menus, or other containers, making it difficult to tell whether a problem belongs to the overall component or one interactive element. A zone hierarchy provides a way to compare screen-level and element-level behavior within the same analysis.
Product and Data teams can use parent-child relationships to isolate weak tap performance, confusing controls, or elements that are visually prominent but rarely used. The expected benefit is more focused investigation and more confident decisions about mobile UI changes.
How Contentsquare helps.
Heatmaps — Zone-based heatmaps show how people interact with page elements and can connect those elements to outcomes such as conversions and revenue.
Session Replay — Session Replay adds behavioral context by showing the clicks, taps, scrolling, hesitation, or errors that occur around a parent or child zone.
Journeys — Journeys helps teams understand what users do before and after reaching a page or component, and compare paths across audiences to find drop-offs or successful routes.
FAQs on zone hierarchy
A parent zone is a zone that contains one or more nested zones. A dropdown menu, card, or larger page section can act as a parent when its individual controls or elements are represented as child zones.