Fictional studio example / annotated wireframe
An inspectable design specimen, not a client screenshot, completed provider integration or measured result. Interface choices illustrate the task described in this guide.
Keep the category answer and product choices together
Desk lamps for compact workspaces
01 / A short category explanation identifies the use and the choice that matters.
Desk base
100 × 100 mm footprint
8 W
Clamp mount
40 × 60 mm footprint
12 W
Wall mount
80 × 80 mm footprint
10 W
03 / Each card names mounting, footprint and power. All values are invented for this comparison.
The wireframe illustrates hierarchy; filter URLs, crawlable pagination and canonical behavior need separate implementation checks.
Order the category around the next choice
Lead the desk-lamp category with mounting type because that choice determines whether a product fits the desk. Follow it with comparable dimensions and power information on product cards. A short fit note belongs beside the choice; extensive care advice can sit on a separate linked page.
Worked example — illustrative data.
| Page position | Specimen content | Selection job |
|---|---|---|
| Heading and short lead | Desk lamps: choose task light or ambient light | Explain the range |
| Subcategory links | Clamp-mounted or freestanding | Narrow mounting type |
| Filter and cards | Height and power source, including rechargeable; show dimensions on cards | Compare constraints within either mounting type |
| Buying note | Check desk clearance before choosing an arm | Resolve fit before opening products |
Write the category’s main choice on a sticky note before drawing boxes. For this fictional shop, mounting method changes what fits a desk, so it becomes the first branch. Price remains available without taking over the whole hierarchy. Show the same key attributes across cards so shoppers can compare without repeatedly opening and closing pages. Put a short explanation next to an unfamiliar filter.
Two products may need comparison rather than filters
A category with only two genuinely different products may need a simple comparison rather than a complicated filter panel. An empty subcategory should explain its status and offer a relevant way back, rather than presenting a dead end.
Keep a block only if it helps identify, compare or reach a lamp. Move extended care advice to a guide linked beside the decision it supports.
Continue with Guides for stores, software teams and local businesses, eCommerce SEO services and Create product comparisons that support a choice.