{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "entry", "locale": "en", "id": "product-detail-page", "name": { "zh": "商品详情页", "en": "Product Detail Page" }, "page": "https://designvocabulary.com/en/entries/product-detail-page/", "self": "https://designvocabulary.com/en/entries/product-detail-page.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/product-detail-page.json", "en": "https://designvocabulary.com/en/entries/product-detail-page.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "pdp-baymard-research", "url": "https://baymard.com/research/product-page", "title": "Baymard Institute · Product Page UX research", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/research/product-page" } }, { "id": "pdp-baymard-tabs", "url": "https://baymard.com/blog/avoid-horizontal-tabs", "title": "Baymard Institute · Avoid Using \"Horizontal Tabs\" for the Main Product Page Sections", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/blog/avoid-horizontal-tabs" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "product-detail-page", "type": "layout", "name": { "zh": "商品详情页", "en": "Product Detail Page" }, "aliases": [ "PDP", "Product Page", "产品详情页", "商品页" ], "granularity": "page", "intents": [ "browse-detail", "find-option" ], "tags": [ "e-commerce", "product images", "buy box", "specifications", "reviews" ], "definition": "The page on an e-commerce site that presents everything about a single product and where the purchase decision is made: it usually combines a product image area, a buy section with the price and the add-to-cart button, variant selectors such as colour and size, the description and specifications, shipping and returns information, user reviews, and related products.", "boundary": "The test is “one product, all of its attributes, chosen and added to the cart on the page”. It is not a landing page: a landing page tells only what one conversion needs and orders it for persuasion, while a product page answers every pre-purchase question and users skim it in their own order. Nor is it master–detail: master–detail keeps the selectable list and the detail on the same screen, while a product page is usually a separate page reached from a product list that does not stay in view. Product lists and comparison tables are for choosing among several products; the product page is for confirming one. Prices, stock and reviews on the page must be genuine: hiding unavoidable costs, inventing scarcity or faking reviews are anti-patterns and fall outside this entry.", "signature": [ "The image area and the buy section (price, variant selection, add to cart) sit side by side near the top", "Description, specifications, shipping and returns, and reviews are split into headed sections", "When a variant changes, the images, price and stock update with it" ], "when": [ "Users need to confirm a product’s appearance, specifications, price and delivery terms before buying", "The product has variants such as colour or size that must be chosen before purchase", "Other buyers’ reviews and questions genuinely help the decision" ], "when_not": [ "The goal is to persuade new visitors for one campaign rather than to cover every attribute of a product", "Users need to compare several products side by side, which calls for a list or comparison table first", "The product has a single variant and little information, so a separate page only adds a click" ], "tradeoff": "Gathering everything about one product on one page lets users answer their pre-purchase questions without leaving; the cost is a long page where the order and collapsing of sections decide whether users find key content such as reviews and shipping, and one template has to serve products whose amount of information varies widely.", "comparison": { "focus": "Confirming one product before buying", "mechanism": "Images and buy section on top, description, specifications, shipping and reviews in sections below", "cost": "A long page where poorly ordered sections let key information be missed" }, "sources": [ { "id": "pdp-baymard-research", "title": "Baymard Institute · Product Page UX research", "url": "https://baymard.com/research/product-page", "claim": "Baymard’s public research overview states that nearly all users go through a product page before making any purchase, and says its large-scale usability testing produced more than 110 product page guidelines covering layout, product images, video and 360-degree views, the “buy” section with the add-to-cart button and price, shipping and returns, variant selection, product descriptions, specification sheets, user reviews, auxiliary content such as Q&A, and cross-sells; most detailed findings require paid access. This entry lists the page’s components from it and cites no paid content.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/research/product-page", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:27.934Z", "error": "save-request-failed" } }, { "id": "pdp-baymard-tabs", "title": "Baymard Institute · Avoid Using \"Horizontal Tabs\" for the Main Product Page Sections", "url": "https://baymard.com/blog/avoid-horizontal-tabs", "claim": "Alan Blackwood’s article (published 17 October 2018, updated 8 July 2026) reports that test participants often missed core content such as reviews, shipping and specifications when it sat in horizontal tabs, and therefore recommends not using horizontal tabs for the main product page sections: expanded vertical sections on desktop, and collapsible sections for longer pages on mobile. This entry paraphrases its layout rule from it; tabs remain usable for subsections inside one section.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/blog/avoid-horizontal-tabs", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:30.031Z", "error": "save-request-failed" } } ], "relations": [ { "target": "landing-page", "kind": "alternative", "condition": "A product needs a public page that visitors land on", "reason": "A landing page tells only what supports the conversion, in persuasive order; a product page covers the whole product and tolerates skimming. Use the former for a campaign and the latter for the standing catalogue.", "basis": "editorial" }, { "target": "master-detail", "kind": "related", "condition": "Users enter a product from a product list", "reason": "Both are “pick one item from a list and see its detail”, but master–detail keeps the list on the same screen while a product page is usually a separate page; consider the former when users switch between products often.", "basis": "editorial" }, { "target": "comparison-table", "kind": "composes_with", "condition": "Users are torn between a few similar products", "reason": "The product page confirms one product, the comparison table weighs a few candidates; offering an add-to-compare entry from the product page spares users from juggling tabs and memory.", "basis": "editorial" }, { "target": "hidden-costs", "kind": "conflicts_when", "condition": "Unavoidable costs such as shipping or tax appear only at checkout", "reason": "The product page is where users make the purchase decision; holding back unavoidable costs until the end robs the price shown here of its value as a basis for that decision.", "basis": "editorial" } ], "rules": [ { "when": "Arranging the main sections such as description, specifications, shipping and reviews", "instruction": "Make them headed sections that can be read by scrolling vertically (collapsible on long mobile pages); do not put them in horizontal tabs where users miss them.", "strength": "recommend", "basis": "editorial" }, { "when": "Users choose variants such as colour or size", "instruction": "Update the images, price and stock along with the selection, and mark unavailable variants clearly instead of reporting an error only at add-to-cart.", "strength": "recommend", "basis": "editorial" }, { "when": "The page shows stock, discounts or reviews", "instruction": "Show only genuine data; never invent scarcity notices, countdowns or reviews.", "strength": "must", "basis": "editorial" } ], "behavior": { "states": [ "wide", "compact", "expanded", "collapsed" ], "a11y": [ "Product images have alternative text describing their content, and the gallery can be operated with the keyboard", "Variant controls have readable names and current values, and unavailability is not conveyed by colour alone", "Changes to price or stock after a selection are announced as status messages" ], "motion": "Gallery changes may have a brief transition; under a reduced-motion preference they switch directly" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of how the image area, buy section and the information sections below relate, its products, prices and reviews are invented, and it does not represent a verified implementation. Before shipping, check with real product data that every section stays readable when the amount of information varies widely.", "image": { "src": "/images/product-detail-page.webp", "alt": "A fictional FIELDNOTES product page sketch: at top left a large illustration of a notebook with a row of small thumbnails, at top right the buy section with title and price placeholder bars, a row of colour dots, a row of size squares and a terracotta add-to-cart button; below come headed sections for description, specifications, shipping and reviews with star ratings." }, "searchTerms": [ "电商", "商品图", "购买区", "规格", "评价" ] } }