{ "_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": "zebra-striping", "name": { "zh": "斑马纹", "en": "Zebra Striping" }, "page": "https://designvocabulary.com/en/entries/zebra-striping/", "self": "https://designvocabulary.com/en/entries/zebra-striping.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/zebra-striping.json", "en": "https://designvocabulary.com/en/entries/zebra-striping.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": "zebra-carbon", "url": "https://carbondesignsystem.com/components/data-table/usage/", "title": "Carbon Design System · Data table usage", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/data-table/usage/" } }, { "id": "zebra-alistapart-enders", "url": "https://alistapart.com/article/zebrastripingdoesithelp/", "title": "A List Apart · Jessica Enders, Zebra Striping: Does it Really Help? (2008-05-06)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/zebrastripingdoesithelp/" } }, { "id": "zebra-nng-data-tables", "url": "https://www.nngroup.com/articles/data-tables/", "title": "Nielsen Norman Group · Page Laubheimer, Data Tables: Four Major User Tasks (2022-04-03)", "checkedAt": "2026-10-20", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260916054518/https://www.nngroup.com/articles/data-tables/", "capturedAt": "2026-09-16T05:45:18Z", "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/data-tables/" } } ], "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": "zebra-striping", "type": "micro", "name": { "zh": "斑马纹", "en": "Zebra Striping" }, "aliases": [ "Zebra Stripes", "Alternating Row Colors", "隔行变色", "交替行底色" ], "granularity": "component", "intents": [ "read-content", "find-item" ], "tags": [ "table", "alternating rows", "data table", "horizontal scanning", "row background" ], "definition": "Giving adjacent rows of a data table or list alternating background colours (usually one row plain and the next light grey), so users scanning across a whole row do not slip onto the row above or below.", "boundary": "Zebra striping is a static way of separating rows, not a state: it does not change with what the user does, unlike hover highlighting and selected rows, which mark \"the row I am looking at\" or \"the row I chose\". Nor is it grouping: alternating backgrounds say only \"this is another row\", not that some rows belong together, and using them to suggest groups misleads. The evidence on whether it actually helps reading is mixed: a 2008 online experiment found no significant difference in accuracy and no consistent difference in speed, though more participants preferred striped tables (46%) than chose either other option; this entry therefore treats it as a cheap, preference-driven aid rather than a proven gain in efficiency.", "signature": [ "Adjacent rows alternate in background colour at low contrast, without pulling attention from the data itself", "Each stripe spans the full row, from the first column to the last", "Stripes keep strictly alternating after sorting, filtering, or adding and removing rows" ], "when": [ "The table is wide, has generous column spacing, or scrolls horizontally, so the eye easily drifts off a row midway", "There are many short rows whose data looks similar in shape from one row to the next", "The table has no horizontal rules and users still need help staying on the same row" ], "when_not": [ "The table has only a handful of rows or columns, where stripes add nothing but visual noise", "The alternating background is too close to the selected, hover, or status colour, so users cannot tell which row is selected", "Rows already carry grouping or hierarchy, and alternating stripes would break the rhythm the groups provide" ], "tradeoff": "Zebra striping takes almost no space and is cheap to build; on wide tables it can spare users from holding their place with a finger or mouse, and users often find it more attractive. The cost is that measurable efficiency gains are inconsistent, and it competes with hover, selection, and status colours for the same visual channel, which grows more confusing as the colour system gets richer.", "comparison": { "focus": "Not slipping onto a neighbouring row while scanning across a wide table", "mechanism": "Adjacent rows take alternating low-contrast backgrounds that span the full row", "cost": "Evidence of an efficiency gain is mixed, and it competes with selection, hover, and status colours for the visual channel" }, "sources": [ { "id": "zebra-carbon", "title": "Carbon Design System · Data table usage", "url": "https://carbondesignsystem.com/components/data-table/usage/", "claim": "The usage guidance lists zebra stripes as an optional data table modifier that colours table rows in alternating colours to make scanning horizontal information easier for the user; it does not set conditions under which they must be used. This entry takes the definition and purpose from it; the conditions of use are editorial.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/data-table/usage/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:52.445Z", "error": "save-request-failed" } }, { "id": "zebra-alistapart-enders", "title": "A List Apart · Jessica Enders, Zebra Striping: Does it Really Help? (2008-05-06)", "url": "https://alistapart.com/article/zebrastripingdoesithelp/", "claim": "In a two-week online experiment the author gathered usable data from 244 participants, comparing a fictional table of 15 rows and 9 columns with and without stripes. After unreliable questions were excluded, accuracy showed no statistically significant difference; of six questions, two were slower and four faster with stripes, with only one difference significant; 46% of participants preferred stripes and 33% had no preference. The author concludes there is no consistent evidence that striping improves accuracy or speed, and none that it harms them, noting that only one data set was used and that wider column spacing or horizontal scrolling might show a larger effect. This entry relies on it to label the evidence honestly as mixed.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/zebrastripingdoesithelp/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:53.139Z", "error": "save-request-failed" } }, { "id": "zebra-nng-data-tables", "title": "Nielsen Norman Group · Page Laubheimer, Data Tables: Four Major User Tasks (2022-04-03)", "url": "https://www.nngroup.com/articles/data-tables/", "claim": "Under the task of locating relevant information, the article says the visual design must let users keep their place as they move their eyes across the table, and names borders, zebra striping, and hover highlighting of a record as aids for doing so. This entry uses it to place zebra striping among several interchangeable and combinable ways of keeping one's row, rather than as the only answer.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/data-tables/", "status": "available", "checkedAt": "2026-09-16T05:44:47.270Z", "jobId": "spn2-0cc4fc46527b310e11d25305239adc9893614208", "url": "https://web.archive.org/web/20260916054518/https://www.nngroup.com/articles/data-tables/", "timestamp": "20260916054518" } } ], "relations": [ { "target": "comparison-table", "kind": "composes_with", "condition": "A comparison table has many rows and wide columns, and users need to read one attribute across all the options", "reason": "Zebra striping helps the eye travel along a single attribute row without slipping onto the rows above or below.", "basis": "editorial" }, { "target": "proximity", "kind": "related", "condition": "A table relies on the arrangement of cells in a row for users to read them as one record", "reason": "When columns are far apart and proximity alone no longer ties a row's cells together, an alternating background restores the row's unity through a shared region.", "basis": "editorial" }, { "target": "contrast-legibility", "kind": "conflicts_when", "condition": "The stripe colour is dark or contrasts too little with the text colour", "reason": "Text on striped rows will have lower contrast than on plain rows, so text contrast must be checked on both row backgrounds.", "basis": "editorial" }, { "target": "similarity", "kind": "related", "condition": "The stripe colour is close to colours that mark selection, warnings, or categories", "reason": "Similarity leads users to read same-coloured rows as one kind, so an alternating background that resembles a semantic colour gets misread as a state or a group.", "basis": "editorial" } ], "rules": [ { "when": "Zebra stripes are added to a table", "instruction": "Keep the stripes clearly distinguishable from selection, hover, and status colours, and check text contrast on each row background separately.", "strength": "recommend", "basis": "editorial" }, { "when": "The table supports sorting, filtering, or adding and removing rows", "instruction": "Recalculate the alternation from the rendered order of visible rows, rather than binding stripes to data records.", "strength": "recommend", "basis": "editorial" } ], "behavior": { "states": [ "odd-row", "even-row", "hover", "selected" ], "a11y": [ "Text meets contrast requirements on every row background", "Selected and hover states are not expressed only by a background close to the stripe colour", "Stripes are a visual aid only; row and column relationships are still expressed by the table's semantic structure" ], "motion": "Stripes are static and not animated; after sorting or filtering they update instantly as rows reorder" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch with the table data shown as placeholder bars. Before shipping, check text contrast on each row background, confirm stripes are distinguishable from selected and hover states, and recheck that the alternation stays correct after sorting and filtering.", "image": { "src": "/images/zebra-striping.webp", "alt": "A sketch: a fictional FIELDNOTES data table of eight rows and seven columns, its cells shown as grey placeholder bars, with adjacent rows alternating between cream and a very light slate-blue background; one row is marked as selected with a thin terracotta outline, and a dashed line runs along a row from its left end to its right end to suggest the eye scanning across." }, "searchTerms": [ "表格", "隔行", "数据表", "横向扫读", "行背景" ] } }