Zigzag-secties — Opmaak, regels en voorbeelden

Zigzag-secties presenteren een reeks parallelle functies als herhaalde afbeelding-en-tekst-paren, waarbij de visual op brede schermen van de ene naar de andere kant alterneert. Gebruik het patroon om duidelijke visuele checkpoints te creëren in een doordacht productverhaal, niet om een korte lijst uit te rekken tot een lange landingspagina.

Het weergegeven voorbeeld toont het ritme, maar de grijze gebieden zijn verklarende UI in deze specificatie. Productie-exemplaren moeten echte, informatieve visuals bevatten.

Waarom dit element ertoe doet

Een lange pagina creëert een navigatieprobleem. Lezers hebben oriëntatiepunten nodig die vertellen wanneer het ene idee eindigt en het volgende begint. Een zigzag biedt die oriëntatiepunten door herhaling: afbeelding, kop, uitleg; dan dezelfde structuur met een andere breedbeeld-uitlijning. Herhaalde anatomie maakt elke sectie gemakkelijker te begrijpen, terwijl alternatie voorkomt dat aangrenzende items samensmelten tot één kolom.

Het psychologische voordeel is het sterkst wanneer de items echt parallel zijn. Een lezer ziet het eerste paar, leert het patroon en kan volgende koppen en visuals scannen voordat hij besluit waar te vertragen. De visual biedt herkenning; de kop benoemt de mogelijkheid; de tekst legt het gevolg uit. Alternatie voegt net genoeg ruimtelijke verandering toe om de aandacht te resetten zonder het informatiemodel te wijzigen.

Dat voordeel heeft een grens. Elk paar verbruikt aanzienlijke verticale ruimte, vooral op een telefoon waar de kolommen stapelen. Als de uitleg slechts één zin is en de visual geen bewijs toevoegt, zorgt het patroon ervoor dat de lezer verder reist zonder meer te leren. Decoratieve alternatie kan ook aanvoelen als een verkoopsjabloon in plaats van een doordachte reeks. Het element verdient zijn voetafdruk alleen wanneer elke visual de lezer helpt een onderscheidende functie, toestand, uitkomst of workflow te begrijpen.

Machine-extraheerbaarheid betekent dat software een contenteenheid kan isoleren zonder de context te verliezen die het accuraat maakt. Een goed geschreven zigzag is een verzameling expliciete items, elk met een kop, zelfstandige uitleg, visuele beschrijving en optionele link. Retrievalsystemen kunnen één item extraheren als een samenhangende functiebeschrijving omdat de betekenis niet afhangt van “de linkerkant zijn.” Bronvolgorde, niet CSS-plaatsing, bepaalt de volgorde.

Pas de regels voor het schrijven van elementen toe vóór de regels op deze pagina: stel eerst de volledige uitleg op en pas het getypeerde element toe in een aparte structurele stap. Waar deze pagina smallere aantallen items, mediavereisten, body-mapping of nestingsgrenzen stelt, hebben deze elementspecifieke regels voorrang.

Wanneer te gebruiken

Gebruik een zigzag wanneer aan al deze voorwaarden is voldaan:

1. De pagina heeft drie tot zes parallelle functies, mogelijkheden, uitkomsten of niet-sequentiële workflowweergaven.
2. Elk item heeft een echte visual die het onderwerp uitlegt of demonstreert.
3. Elk item heeft meer uitleg nodig dan een kaart toelaat, maar minder dan een volledig onafhankelijk hoofdstuk.
4. Lezers hebben baat bij het scannen van de reeks voordat ze elk detail lezen.
5. De volgorde is nuttig maar niet procedureel; een item blijft begrijpelijk als het afzonderlijk wordt geëxtraheerd.

Sterke toepassingen zijn onder meer een producttour met één interfaceweergave per mogelijkheid, een oplossingspagina die elk operationeel probleem koppelt aan de bijbehorende workflow, of een ultieme gids die verschillende parallelle modellen toont. De visual kan een schermafbeelding, diagram, grafiek of foto zijn wanneer dat medium informatie draagt. Gebruik een geannoteerde schermafbeelding in een item wanneer een ruwe interface-opname lezers zou dwingen naar het juiste bedieningselement te zoeken.

Bijna-goede toepassingen komen vaak voor. Gebruik geen zigzag voor genummerde instructies: het wisselen van zijden verzwakt het directionele signaal dat stappen nodig hebben. Gebruik het niet voor een vergelijking, omdat alternerende producten evaluatie per criterium verhindert. Gebruik het niet voor twaalf voordelen die elk één zin nodig hebben; kaarten, bullets of een samenvattingstabel gebruiken de ruimte beter. Gebruik het niet voor een argument waar elke sectie afhangt van de vorige conclusie; doorlopend proza en koppen behouden die logica duidelijker.

De meest onthullende test is om de afbeeldingen te verwijderen. Als de overgebleven koppen een samenhangende verzameling gelijkwaardigen vormen en elke ontbrekende visual een betekenisvolle bewijskloof achterlaat, is zigzag waarschijnlijk geschikt. Als de tekst verandert in een generieke voordelenlijst en er niets belangrijks verloren gaat, waren de afbeeldingen decoratie en is het element misbruikt.

Waar te plaatsen

Plaats de zigzag nadat de pagina het gedeelde probleem heeft gedefinieerd en de groep mogelijkheden heeft benoemd. Lezers moeten weten waarom de reeks ertoe doet voordat ze de eerste grote visual tegenkomen. Op een product- of oplossingspagina is dit normaal gesproken na de hero, directe antwoord of korte overzicht en vóór bewijs, gedetailleerde specificaties, prijzen of de definitieve call-to-action.

Introduceer de hele reeks met een H2 en één korte inleidende alinea. Voeg geen aparte H2 toe vóór elk item; elke itemtitel is een kindkop binnen de gedeelde sectie. Houd alle items aaneengesloten zodat het alternerende ritme één verzameling communiceert. Als een lange kwalificatie de reeks moet onderbreken, voltooi dan de zigzag en begin een nieuwe sectie erna.

Een zigzag mag niet direct naast een andere grote visuele reeks, afbeeldingsgalerij, productschuifregelaar, tijdlijn of herhaald kaartraster staan. Opeenvolgende weergavepatronen creëren visuele vermoeidheid en verdoezelen welke verzameling primair is. Het mag een bewering niet scheiden van het bewijs, een waarschuwing niet van de instructie die het kwalificeert, en een prijs niet van de aankoopvoorwaarden. Het mag niet verschijnen in een geordende lijst, tabelcel, accordeonpaneel of een andere zigzag.

Gebruik standaard één zigzag per pagina. Een tweede is alleen acceptabel wanneer de twee verzamelingen duidelijk verschillende vragen beantwoorden, aparte sectiekoppen gebruiken en proza of bewijs ertussen hebben. Alterneer nooit de uitlijning van niet-gerelateerde paginasecties alleen om het patroon na te bootsen; de verzamelinggrens maakt deel uit van de betekenis van het element.

Anatomie

1. Verzamelingskop: Benoemt de gedeelde vraag of categorie die door elk item wordt behandeld.
2. Inleiding van de verzameling: Legt uit waarom de items bij elkaar horen en wat de lezer moet opmerken.
3. Itemcontainer: Houdt één visual en één tekstregio programmatisch en visueel geassocieerd.
4. Itemkop: Benoemt één specifieke functie, uitkomst of weergave in concrete taal.
5. Itembody: Legt uit wat het item doet, waarom het ertoe doet en eventuele grenzen die nodig zijn om het correct te interpreteren.
6. Informatieve visual: Demonstreert hetzelfde onderwerp als de tekst en heeft nuttige alternatieve tekst of een toegankelijk bijschrift.
7. Optionele itemlink: Biedt één relevante verdieping of actie na de uitleg.
8. Presentatie-alternatie: Verandert de visuele zijde op brede schermen zonder DOM-volgorde of betekenis te wijzigen.

Afstand, kleur, hoekradius, beelduitsnede en breekpunt behoren tot de renderer. Auteurs leveren semantische volgorde, volledige tekst en toegankelijke mediainformatie.

Ontwerpvoorbeelden

Het volgende zijn de ondersteunde varianten. Ze delen één contentcontract; alleen de startuitlijning, visuele behandeling of viewport-gedrag verandert.

Media-eerst: De standaard breedbeeld-variant begint met de eerste visual links. Gebruik het wanneer de eerste visual directe herkenning biedt en de omringende pagina niet al een dominante afbeelding aan die zijde plaatst.

Tekst-eerst: Begint met tekst links, alterneert dan. Gebruik het wanneer de openingsuitleg betekenis moet vestigen vóór de eerste visual of wanneer het een betere balans creëert met de voorgaande sectie.

Bevatte-media: Plaatst schermafbeeldingen of diagrammen binnen een consistent kader. Gebruik het voor productinterfaces, grafieken en diagrammen waarvan de randen en labels ertoe doen. Alle items gebruiken dezelfde kaderlogica, zelfs wanneer bronafbeeldingen verschillende afmetingen hebben.

Rand-media: Staat foto’s of niet-interface-illustraties toe om hun regio’s te vullen. Bijsnijden kan responsief veranderen, maar mag het onderwerp of enige informatie die door de tekst wordt beschreven niet verwijderen.

Mobiel-gestapeld: Verwijdert links-rechts-alternatie en gebruikt één consistente leesvolgorde voor elk item. Dit is vereist responsief gedrag, geen optionele redactionele variant.

Er is geen tekst-only, automatisch afspelen of carrousel-variant. Het verwijderen van betekenisvolle media verwijdert de reden om zigzag te gebruiken; beweging en verborgen dia’s introduceren verschillende interactiecontracten.

Parameters

De bovenliggende body wijst zijn eerste kop toe aan title, zijn volgende alinea aan intro en elk genest item aan één herhaald paar. De eerste kop van een item wordt toegewezen aan item.title; de resterende body wordt toegewezen aan item.content. Mediareferenties en alternatieve tekst blijven bij het item omdat ze dat item alleen beschrijven. Auteurs kunnen geen links of rechts per item instellen: de renderer leidt breedbeeld-uitlijning af van de bronpositie en start.

Syntax en codevoorbeelden

Alle adapters moeten één bovenliggende titel, één inleiding, geordende items en een stabiele bronvolgorde behouden. De voorbeelden verkorten de verzameling tot drie items, het minimale geldige aantal.

Draagbare Markdown-richtlijn

:::zigzag{start=media mediaFit=contain}
## Maak van contentbeslissingen een herhaalbaar systeem

Ga van een complete inventaris naar geprioriteerde productie en gemeten resultaten.

::item{media="inventory-view" alt="Contentinventaris gegroepeerd op status en eigenaar."}
### Bekijk de volledige inventaris

Breng elke URL, eigenaar, status en prestatiesignaal in één overzicht voordat u beslist wat u wilt wijzigen.
::

::item{media="priority-view" alt="Prioriteitswachtrij geordend op bedrijfswaarde en inspanning."}
### Prioriteer waardevol werk

Orden kansen op bedrijfswaarde en inspanning, zodat het team kan werken aan een doordachte wachtrij.
::

::item{media="impact-view" alt="Rapportageweergave met publicatieannotaties naast prestatieveranderingen."}
### Meet gepubliceerde impact

Koppel elke wijziging aan een annotatie en een stabiel rapportagevenster, zodat latere bewegingen kunnen worden onderzocht.
::
:::

Deze identificatoren documenteren het draagbare contract; een productie-adapter lost elke identificator op naar een goedgekeurde asset. Auteurs moeten bevestigen dat de opgeloste asset bestaat vóór publicatie.

Hugo shortcode

{{< zigzag title="Maak van contentbeslissingen een herhaalbaar systeem" intro="Ga van een complete inventaris naar geprioriteerde productie en gemeten resultaten." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="Bekijk de volledige inventaris" media="inventory-view" alt="Contentinventaris gegroepeerd op status en eigenaar." >}}
  Breng elke URL, eigenaar, status en prestatiesignaal in één overzicht voordat u beslist wat u wilt wijzigen.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Prioriteer waardevol werk" media="priority-view" alt="Prioriteitswachtrij geordend op bedrijfswaarde en inspanning." >}}
  Orden kansen op bedrijfswaarde en inspanning, zodat het team kan werken aan een doordachte wachtrij.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Meet gepubliceerde impact" media="impact-view" alt="Rapportageweergave met publicatieannotaties naast prestatieveranderingen." >}}
  Koppel elke wijziging aan een annotatie en een stabiel rapportagevenster, zodat latere bewegingen kunnen worden onderzocht.
  {{< /zigzag-item >}}
{{< /zigzag >}}

De Hugo-adapter gebruikt alleen benoemde parameters. Het leidt alternerende klassen af van de itempositie en mag de bronvolgorde niet herschrijven om het visuele patroon te bereiken.

WordPress-blok

<!-- wp:amicited/zigzag {"title":"Maak van contentbeslissingen een herhaalbaar systeem","intro":"Ga van een complete inventaris naar geprioriteerde productie en gemeten resultaten.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"Bekijk de volledige inventaris","media":"inventory-view","alt":"Contentinventaris gegroepeerd op status en eigenaar."} -->
  <p>Breng elke URL, eigenaar, status en prestatiesignaal in één overzicht voordat u beslist wat u wilt wijzigen.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Prioriteer waardevol werk","media":"priority-view","alt":"Prioriteitswachtrij geordend op bedrijfswaarde en inspanning."} -->
  <p>Orden kansen op bedrijfswaarde en inspanning, zodat het team kan werken aan een doordachte wachtrij.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Meet gepubliceerde impact","media":"impact-view","alt":"Rapportageweergave met publicatieannotaties naast prestatieveranderingen."} -->
  <p>Koppel elke wijziging aan een annotatie en een stabiel rapportagevenster, zodat latere bewegingen kunnen worden onderzocht.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress moet innerlijke blokken beperken tot zigzag-items en lijstherschikking blootstellen zonder handmatige links/rechts-bediening aan te bieden. De editorvoorbeeld en front-end moeten dezelfde itemvolgorde gebruiken.

Voorbeelden

Goed voorbeeld

Kop: Begrijp elke fase van een contentvernieuwing

1. Vind dalende pagina’s — Een trendgrafiek toont dezelfde URL over vergelijkbare perioden. De tekst legt uit hoe blijvende daling te onderscheiden is van gewone wekelijkse schommeling.
2. Diagnosticeer de oorzaak — Een query-en-pagina-weergave toont welke onderwerpen zichtbaarheid verloren. De tekst scheidt intentieverschuiving, sterkere concurrenten, verouderde feiten en technische fouten.
3. Registreer de interventie — Een annotatieweergave toont de publicatiedatum en exacte wijziging. De tekst legt uit waarom een geregistreerde interventie latere meting geloofwaardig maakt.
4. Evalueer het resultaat — Een rapportageweergave toont het afgesproken observatievenster. De tekst vermeldt wat succes, geen verandering en verdere daling elk als volgende stap triggeren.

Dit werkt omdat de vier items parallelle weergaven beschrijven binnen één vernieuwingssysteem, elke visual bewijs levert dat het proza niet efficiënt kan reproduceren, en de koppen alleen lezers een nuttige scan geven. De volgorde ondersteunt een verhaal zonder het element in instructies te veranderen.

Slecht voorbeeld

Kop: Waarom ons platform beter is

1. Makkelijk — Een decoratieve foto van een glimlachend persoon begeleidt “Ons platform is makkelijk te gebruiken.”
2. Krachtig — Een decoratieve abstracte vorm begeleidt “Krijg sneller krachtige resultaten.”
3. Flexibel — Een stockfoto begeleidt “Flexibele functies passen bij elk bedrijf.”
4. Contacteer ons — Een groot formulier vraagt om zeven velden.
5. Vertrouwd — Een logostrook verschijnt zonder uit te leggen wie de logo’s vertegenwoordigen.
6. Meer functies — Acht niet-gerelateerde opsommingstekens vullen een hoge laatste rij.

Dit faalt omdat de claims generiek zijn, de afbeeldingen geen informatie dragen en de items verschillende taken doen. Het ingebedde formulier onderbreekt de verzameling, terwijl het laatste item een lijst verbergt in een formaat bedoeld voor één gerichte uitleg. De pagina wordt lang zonder duidelijker te worden. Vervang de eerste drie claims door bewijs-ondersteund proza of compacte voordelenkaarten, plaats het formulier na de verklarende sectie, identificeer het vertrouwensbewijs en geef de overige functies een passende lijst of tabel.

Schema-opmaak en toegankelijkheid

Zigzag is een presentatiepatroon, geen Schema.org-type. De tekst blijft deel uitmaken van het omvattende Article of WebPage, en productfeiten kunnen bijdragen aan geldige Product- of SoftwareApplication-opmaak alleen wanneer de pagina en feiten onafhankelijk aan die vereisten voldoen. Geef geen ItemList weer alleen omdat het element items herhaalt, en geef nooit HowTo weer wanneer de items parallelle functies zijn in plaats van vereiste stappen.

Gebruik een sectie met een toegankelijke kop voor de verzameling en een semantische sectie of artikel voor elk item. Houd de DOM-volgorde logisch en identiek over alle breekpunten. CSS-grid-ordening kan veranderen waar de afbeelding visueel verschijnt, maar de toetsenbord-, schermlezer-, kopieer-en-plak- en zoekextractievolgorde moeten consistent blijven. Schrijf nooit “zoals links getoond” of “in de afbeelding rechts”, omdat die posities omkeren of verdwijnen op kleinere schermen.

Elke informatieve afbeelding heeft alternatieve tekst nodig die vermeldt wat de afbeelding bijdraagt in context. Herhaal niet de aangrenzende alinea woord voor woord. Als een complexe grafiek, interface of diagram niet beknopt kan worden beschreven, voeg dan een zichtbaar bijschrift of een nabije lange beschrijving toe. Decoratieve beeldspraak wordt afgeraden omdat elk item zijn visual moet rechtvaardigen; als een renderer decoratieve versieringen toevoegt, krijgen die lege alternatieve tekst.

Koppen moeten de paginahiërarchie volgen in plaats van te zijn vastgezet op een visuele grootte. Itemlinks hebben beschrijvende labels nodig zoals “Bekijk de inventarisworkflow”, niet herhaalde “Meer informatie”-tekst. Maak niet de hele tekst-en-afbeelding-rij één grote link: geneste links en onduidelijke activeringsregio’s creëren toetsenbord- en schermlezerproblemen. Respecteer voorkeuren voor beperkte beweging en vereis nooit scroll-geactiveerde animatie om de inhoud te onthullen.

Schrijfregels

Schrijf de verzamelingstitel in 3–12 woorden en de inleiding in 20–60 woorden. Elke itemtitel gebruikt 3–9 concrete woorden en elke body gebruikt 40–120 woorden. Drie tot zes items is het ondersteunde bereik. Deze limieten bestaan omdat het element genoeg substantie nodig heeft om grote visuele regio’s te rechtvaardigen zonder elk paar in een onafhankelijk essay te veranderen.

Maak itemkoppen grammaticaal parallel. Als de eerste begint met een werkwoord—“Vind dalende pagina’s”—dan moeten de andere dat ook doen. Elke body moet drie vragen beantwoorden in een natuurlijke volgorde: wat is dit, waarom is het hier belangrijk en wat moet de lezer opmerken in de visual? Gebruik specifieke zelfstandige naamwoorden, interfacelabels, voorwaarden en gevolgen. Vermijd ongekwalificeerde superlatieven zoals “beste,” “krachtig” of “revolutionair.”

Houd de diepte gebalanceerd. Eén item van 110 woorden naast twee items van 40 woorden signaleert dat de verzameling mogelijk abstractieniveaus mengt. Splits het brede item, combineer ondiepe items of verplaats details naar een gelinkte pagina. Links zijn optioneel en beperkt tot één per item, zodat de reeks verklarend blijft in plaats van een navigatiedirectory te worden.

Plaats nooit deze dingen in een zigzag-item:

• Een formulier, nieuwsbriefaanmelding, prijstabel, aanbieding of primaire call-to-action.
• Een vergelijkingstabel, accordeon, tabbladen, carrousel, galerij, videospeler of een andere zigzag.
• Een genummerde procedure waarvan de volgorde vereist is voor succes.
• Verschillende niet-gerelateerde functieopsommingen toegevoegd om de visuele hoogte te vullen.
• Een niet-ondersteunde bewering, testimoniumfragment of logo zonder bron en context.
• Een afbeelding toegevoegd alleen omdat de lay-out een afbeeldingsplek heeft.

Posttypen die het gebruiken

De postTypes-frontmatter is de bron van waarheid voor deze relatie. Een zigzag is optioneel in elk vermeld type en mag alleen verschijnen wanneer de pagina een kwalificerende parallelle, visuele reeks heeft.

QA-checklist

• De reeks bevat drie tot zes echt parallelle items.
• Eén H2 en een korte inleiding leggen uit waarom de items bij elkaar horen.
• Elk item heeft een concrete, grammaticaal parallelle kop.
• Elke body blijft binnen 40–120 woorden en heeft vergelijkbare diepte.
• Elke visual bestaat, draagt informatie bij en past bij het item.
• Alternatieve tekst of een toegankelijk bijschrift geeft de nuttige informatie van elke visual weer.
• De standaard DOM-volgorde is logisch zonder enige CSS of afbeeldingen.
• Breedbeeld-alternatie wordt automatisch afgeleid; auteurs hebben geen willekeurige zijden toegewezen.
• Mobiel gebruikt één consistente gestapelde volgorde zonder horizontaal scrollen.
• Geen formulering hangt af van links, rechts of een andere viewport-specifieke positie.
• Geen item bevat formulieren, tabellen, geneste weergavecomponenten of procedurele stappen.
• De verzameling bevindt zich niet naast een ander groot herhaald visueel patroon.
• Links zijn beschrijvend en beperkt tot één optionele link per item.
• Er wordt geen schema-type afgeleid uit de alternerende lay-out alleen.
• De pagina blijft bruikbaar wanneer animatie is uitgeschakeld en afbeeldingen langzaam laden.
• Markdown-, Hugo- en WordPress-representaties behouden dezelfde velden en itemvolgorde.

Gebruik zigzag-secties wanneer parallelle ideeën parallel bewijs verdienen. Alternatie moet lezers helpen elk samenhangend item op te merken; het mag nooit de reden zijn waarom het item bestaat.