Sections en zigzag — Format, règles et exemples

Les sections en zigzag présentent une séquence de fonctionnalités parallèles sous forme de paires répétées image-texte, en alternant le visuel d’un côté à l’autre sur les grands écrans. Utilisez ce motif pour créer des points de repère visuels clairs à travers une histoire produit réfléchie, et non pour étirer une courte liste en une longue page d’atterrissage.

L’exemple rendu montre le rythme, mais ses zones grises sont des éléments d’interface explicatifs dans cette spécification. Les instances de production doivent contenir des visuels réels et informatifs.

Pourquoi cet élément est important

Une longue page crée un problème de navigation. Les lecteurs ont besoin de repères qui leur indiquent quand une idée se termine et quand la suivante commence. Un zigzag fournit ces repères par la répétition : image, titre, explication ; puis la même structure avec un alignement différent sur grand écran. L’anatomie répétée rend chaque section plus facile à comprendre, tandis que l’alternance empêche les éléments adjacents de fusionner en une seule colonne.

Le bénéfice psychologique est le plus fort lorsque les éléments sont véritablement parallèles. Un lecteur voit la première paire, apprend le motif, et peut parcourir les titres et visuels suivants avant de choisir où ralentir. Le visuel apporte la reconnaissance ; le titre nomme la capacité ; le corps explique sa conséquence. L’alternance ajoute juste assez de changement spatial pour réinitialiser l’attention sans modifier le modèle d’information.

Ce bénéfice a une limite. Chaque paire consomme un espace vertical considérable, particulièrement sur un téléphone où les colonnes s’empilent. Si l’explication ne fait qu’une phrase et que le visuel n’apporte aucune preuve, le motif fait voyager le lecteur plus loin sans lui apprendre davantage. L’alternance décorative peut aussi donner l’impression d’un modèle commercial plutôt que d’une séquence réfléchie. L’élément mérite son espace seulement lorsque chaque visuel aide le lecteur à comprendre une fonctionnalité, un état, un résultat ou un flux de travail distinct.

L’extractibilité machine signifie qu’un logiciel peut isoler une unité de contenu sans perdre le contexte qui la rend précise. Un zigzag bien rédigé est un ensemble d’éléments explicites, chacun avec un titre, une explication autonome, une description visuelle et un lien optionnel. Les systèmes d’extraction peuvent isoler un élément comme un énoncé de fonctionnalité cohérent car son sens ne dépend pas du fait d’être « celui de gauche ». L’ordre source, et non le placement CSS, établit la séquence.

Appliquez les règles de rédaction des éléments avant les règles de cette page : rédigez d’abord l’explication complète, puis appliquez l’élément typé dans une passe structurelle séparée. Lorsque cette page fixe des limites plus strictes de nombre d’éléments, d’exigences médiatiques, de mappage du corps ou de restrictions d’imbrication, ces règles spécifiques à l’élément prévalent.

Quand l’utiliser

Utilisez un zigzag lorsque toutes ces conditions sont réunies :

1. La page comporte trois à six fonctionnalités, capacités, résultats ou vues de flux de travail non séquentielles parallèles.
2. Chaque élément possède un visuel réel qui explique ou démontre son sujet.
3. Chaque élément nécessite plus d’explication qu’une carte ne le permet mais moins qu’un chapitre indépendant complet.
4. Les lecteurs bénéficient du balayage de la séquence avant de lire chaque détail.
5. L’ordre est utile mais pas procédural ; un élément reste compréhensible s’il est extrait seul.

Les bons usages incluent une visite guidée de produit avec une vue d’interface par capacité, une page solution associant chaque problème opérationnel à son flux de travail correspondant, ou un guide ultime présentant plusieurs modèles parallèles. Le visuel peut être une capture d’écran, un diagramme, un graphique ou une photographie lorsque ce support transporte de l’information. Utilisez une capture d’écran annotée à l’intérieur d’un élément lorsqu’une capture d’interface brute forcerait les lecteurs à chercher le contrôle pertinent.

Les cas limites sont fréquents. N’utilisez pas un zigzag pour des instructions numérotées : changer de côté affaiblit le signal directionnel dont les étapes ont besoin. Ne l’utilisez pas pour une comparaison, car l’alternance des produits empêche une évaluation critère par critère. Ne l’utilisez pas pour douze avantages qui nécessitent chacun une phrase ; les cartes, les puces ou un tableau récapitulatif utilisent mieux l’espace. Ne l’utilisez pas pour un argumentaire où chaque section dépend de la conclusion précédente ; la prose continue et les titres préservent cette logique plus clairement.

Le test le plus révélateur consiste à retirer les images. Si les titres restants forment un ensemble cohérent de pairs et que chaque visuel manquant laisse un vide de preuve significatif, le zigzag est probablement approprié. Si le texte devient une liste générique d’avantages et que rien d’important n’est perdu, les images étaient décoratives et l’élément est un mauvais usage.

Où le placer

Placez le zigzag après que la page a défini le problème partagé et nommé le groupe de capacités. Les lecteurs doivent savoir pourquoi la séquence est importante avant de rencontrer le premier grand visuel. Sur une page produit ou solution, c’est normalement après le hero, la réponse directe ou le court aperçu, et avant les preuves, les spécifications détaillées, les tarifs ou l’appel à l’action final.

Introduisez toute la séquence avec un H2 et un court paragraphe de cadrage. N’ajoutez pas de H2 séparé avant chaque élément ; chaque titre d’élément est un titre enfant au sein de la section partagée. Gardez tous les éléments contigus afin que le rythme d’alternance communique un seul ensemble. Si une longue qualification doit interrompre la séquence, terminez le zigzag et commencez une nouvelle section après.

Un zigzag ne doit pas se trouver immédiatement à côté d’une autre grande séquence visuelle, d’une galerie d’images, d’un curseur de produit, d’une frise chronologique ou d’une grille de cartes répétée. Les motifs d’affichage dos à dos créent une fatigue visuelle et obscurcissent la collection principale. Il ne doit pas séparer une affirmation de sa preuve, un avertissement de l’instruction qu’il qualifie, ou un prix de ses conditions d’achat. Il ne doit pas apparaître à l’intérieur d’une liste ordonnée, d’une cellule de tableau, d’un panneau d’accordéon ou d’un autre zigzag.

Utilisez un zigzag par page par défaut. Un second n’est acceptable que lorsque les deux collections répondent à des questions clairement différentes, utilisent des titres de section distincts et sont séparées par de la prose ou des preuves. N’alternez jamais l’alignement de sections de page non liées simplement pour imiter le motif ; la limite de la collection fait partie du sens de l’élément.

Anatomie

1. Titre de collection : Nomme la question ou catégorie partagée couverte par chaque élément.
2. Introduction de collection : Explique pourquoi les éléments vont ensemble et ce que le lecteur devrait remarquer.
3. Conteneur d’élément : Maintient un visuel et une zone de texte associés de manière programmatique et visuelle.
4. Titre d’élément : Nomme une fonctionnalité, un résultat ou une vue spécifique dans un langage concret.
5. Corps d’élément : Explique ce que fait l’élément, pourquoi il compte et toute limite nécessaire pour l’interpréter correctement.
6. Visuel informatif : Démontre le même sujet que le texte et possède un texte alternatif utile ou une légende accessible.
7. Lien optionnel d’élément : Propose une exploration approfondie ou une action pertinente après l’explication.
8. Alternance de présentation : Change le côté du visuel sur les grands écrans sans modifier l’ordre DOM ni le sens.

L’espacement, la couleur, le rayon des coins, le recadrage des images et le point de rupture appartiennent au moteur de rendu. Les auteurs fournissent l’ordre sémantique, le texte complet et les informations média accessibles.

Exemples de conception

Les variantes suivantes sont prises en charge. Elles partagent un même contrat de contenu ; seuls l’alignement de départ, le traitement visuel ou le comportement selon la fenêtre changent.

Média d’abord : La variante par défaut sur grand écran commence avec le premier visuel à gauche. Utilisez-la lorsque le premier visuel fournit une reconnaissance immédiate et que la page environnante ne place pas déjà une image dominante de ce côté.

Texte d’abord : Commence par le texte à gauche, puis alterne. Utilisez-la lorsque l’explication d’ouverture doit établir le sens avant le premier visuel ou lorsqu’elle crée un meilleur équilibre avec la section précédente.

Média contenu : Place les captures d’écran ou diagrammes dans un cadre cohérent. Utilisez-le pour les interfaces produit, les graphiques et les diagrammes dont les bords et les étiquettes sont importants. Tous les éléments utilisent la même logique de cadre même lorsque les images sources ont des dimensions différentes.

Média débordant : Permet aux photographies ou illustrations non liées à l’interface de remplir leurs zones. Le recadrage peut changer de manière responsive, mais il ne doit pas supprimer le sujet ni aucune information décrite par le texte.

Empilé mobile : Supprime l’alternance gauche-droite et utilise un ordre de lecture cohérent pour chaque élément. Il s’agit d’un comportement responsive obligatoire, et non d’une variante éditoriale optionnelle.

Il n’existe pas de variante texte seul, lecture automatique ou carrousel. Supprimer le média significatif supprime la raison d’utiliser le zigzag ; le mouvement et les diapositives cachées introduisent des contrats d’interaction différents.

Paramètres

Le corps parent mappe son premier titre à title, son paragraphe suivant à intro, et chaque élément imbriqué à une paire répétée. Le premier titre d’un élément est mappé à item.title ; le reste de son corps est mappé à item.content. Les références média et le texte alternatif restent sur l’élément car ils décrivent cet élément uniquement. Les auteurs ne peuvent pas définir gauche ou droite par élément : le moteur de rendu déduit l’alignement sur grand écran de la position source et de start.

Syntaxe et exemples de code

Tous les adaptateurs doivent préserver un titre parent, une introduction, des éléments ordonnés et un ordre source stable. Les exemples abrègent la collection à trois éléments, le nombre minimum valide.

Directive Markdown portable

:::zigzag{start=media mediaFit=contain}
## Transformez les décisions de contenu en système reproductible

Passez d'un inventaire complet à une production priorisée et des résultats mesurés.

::item{media="inventory-view" alt="Inventaire de contenu regroupé par statut et propriétaire."}
### Voir l'inventaire complet

Rassemblez chaque URL, propriétaire, statut et indicateur de performance dans une seule vue avant de décider quoi modifier.
::

::item{media="priority-view" alt="File d'attente prioritaire ordonnée par valeur métier et effort."}
### Prioriser le travail utile

Ordonnez les opportunités par valeur métier et effort afin que l'équipe puisse agir sur une file d'attente raisonnée.
::

::item{media="impact-view" alt="Vue de rapport avec annotations de publication à côté des changements de performance."}
### Mesurer l'impact publié

Reliez chaque modification à une annotation et une fenêtre de rapport stable afin que les évolutions ultérieures puissent être étudiées.
::
:::

Ces identifiants documentent le contrat portable ; un adaptateur de production résout chaque identifiant en un actif approuvé. Les auteurs doivent confirmer que l’actif résolu existe avant publication.

Shortcode Hugo

{{< zigzag title="Transformez les décisions de contenu en système reproductible" intro="Passez d'un inventaire complet à une production priorisée et des résultats mesurés." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="Voir l'inventaire complet" media="inventory-view" alt="Inventaire de contenu regroupé par statut et propriétaire." >}}
  Rassemblez chaque URL, propriétaire, statut et indicateur de performance dans une seule vue avant de décider quoi modifier.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Prioriser le travail utile" media="priority-view" alt="File d'attente prioritaire ordonnée par valeur métier et effort." >}}
  Ordonnez les opportunités par valeur métier et effort afin que l'équipe puisse agir sur une file d'attente raisonnée.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Mesurer l'impact publié" media="impact-view" alt="Vue de rapport avec annotations de publication à côté des changements de performance." >}}
  Reliez chaque modification à une annotation et une fenêtre de rapport stable afin que les évolutions ultérieures puissent être étudiées.
  {{< /zigzag-item >}}
{{< /zigzag >}}

L’adaptateur Hugo utilise uniquement des paramètres nommés. Il dérive les classes d’alternance de la position de l’élément et ne doit pas réécrire l’ordre source pour obtenir le motif visuel.

Bloc WordPress

<!-- wp:amicited/zigzag {"title":"Transformez les décisions de contenu en système reproductible","intro":"Passez d'un inventaire complet à une production priorisée et des résultats mesurés.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"Voir l'inventaire complet","media":"inventory-view","alt":"Inventaire de contenu regroupé par statut et propriétaire."} -->
  <p>Rassemblez chaque URL, propriétaire, statut et indicateur de performance dans une seule vue avant de décider quoi modifier.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Prioriser le travail utile","media":"priority-view","alt":"File d'attente prioritaire ordonnée par valeur métier et effort."} -->
  <p>Ordonnez les opportunités par valeur métier et effort afin que l'équipe puisse agir sur une file d'attente raisonnée.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Mesurer l'impact publié","media":"impact-view","alt":"Vue de rapport avec annotations de publication à côté des changements de performance."} -->
  <p>Reliez chaque modification à une annotation et une fenêtre de rapport stable afin que les évolutions ultérieures puissent être étudiées.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress doit restreindre les blocs internes aux éléments de zigzag et exposer le réordonnancement de liste sans offrir de contrôles manuels gauche/droite. L’aperçu de l’éditeur et le front-end doivent utiliser le même ordre d’éléments.

Exemples

Bon exemple

Titre : Comprendre chaque étape d’une actualisation de contenu

1. Trouver les pages en déclin — Un graphique de tendance montre la même URL sur des périodes comparables. Le texte explique comment distinguer un déclin durable d’une variation hebdomadaire ordinaire.
2. Diagnostiquer la cause — Une vue requête-et-page montre quels sujets ont perdu en visibilité. Le texte sépare la dérive d’intention, les concurrents plus forts, les informations obsolètes et les défauts techniques.
3. Enregistrer l’intervention — Une vue d’annotation montre la date de publication et le changement exact. Le texte explique pourquoi une intervention enregistrée rend la mesure ultérieure crédible.
4. Examiner le résultat — Une vue de rapport montre la fenêtre d’observation convenue. Le texte indique ce que déclenchent le succès, l’absence de changement et le nouveau déclin.

Cela fonctionne car les quatre éléments décrivent des vues parallèles au sein d’un même système d’actualisation, chaque visuel fournit une preuve que la prose ne peut pas reproduire efficacement, et les titres seuls offrent aux lecteurs un balayage utile. L’ordre soutient une histoire sans transformer l’élément en instructions.

Mauvais exemple

Titre : Pourquoi notre plateforme est meilleure

1. Facile — Une photographie décorative d’une personne souriante accompagne « Notre plateforme est facile à utiliser. »
2. Puissant — Une forme abstraite décorative accompagne « Obtenez des résultats puissants plus rapidement. »
3. Flexible — Une photo libre de droits accompagne « Des fonctionnalités flexibles s’adaptent à chaque entreprise. »
4. Contactez-nous — Un grand formulaire demande sept champs.
5. Digne de confiance — Une bande de logos apparaît sans expliquer qui les logos représentent.
6. Plus de fonctionnalités — Huit puces sans lien remplissent une longue rangée finale.

Cela échoue car les affirmations sont génériques, les images ne portent aucune information et les éléments remplissent des rôles différents. Le formulaire intégré interrompt la collection, tandis que le dernier élément cache une liste dans un format destiné à une explication ciblée. La page devient longue sans devenir plus claire. Remplacez les trois premières affirmations par de la prose étayée par des preuves ou des cartes d’avantages compactes, placez le formulaire après la section explicative, identifiez la preuve de confiance et donnez aux fonctionnalités restantes une liste ou un tableau approprié.

Balisage schema et accessibilité

Le zigzag est un motif de présentation, pas un type Schema.org. Son texte reste partie intégrante de l’Article ou de la WebPage englobante, et les faits produit peuvent contribuer à un balisage Product ou SoftwareApplication valide uniquement lorsque la page et les faits répondent indépendamment à ces exigences. N’émettez pas ItemList simplement parce que l’élément répète des éléments, et n’émettez jamais HowTo lorsque les éléments sont des fonctionnalités parallèles plutôt que des étapes requises.

Utilisez une section avec un titre accessible pour la collection et une section sémantique ou un article pour chaque élément. Maintenez l’ordre DOM logique et identique sur tous les points de rupture. L’ordre de la grille CSS peut changer l’endroit où l’image apparaît visuellement, mais l’ordre du clavier, du lecteur d’écran, du copier-coller et de l’extraction par recherche doit rester cohérent. N’écrivez jamais « comme montré à gauche » ou « dans l’image à droite », car ces positions s’inversent ou disparaissent sur les écrans plus petits.

Chaque image informative nécessite un texte alternatif qui indique ce que l’image apporte en contexte. Ne répétez pas mot pour mot le paragraphe adjacent. Si un graphique, une interface ou un diagramme complexe ne peut pas être décrit de manière concise, ajoutez une légende visible ou une description longue à proximité. L’imagerie décorative est déconseillée car chaque élément est tenu de justifier son visuel ; si un moteur de rendu ajoute des embellissements décoratifs, ils reçoivent un texte alternatif vide.

Les titres doivent suivre la hiérarchie de la page plutôt que d’être codés en dur à une taille visuelle. Les liens des éléments nécessitent des étiquettes descriptives telles que « Consulter le flux de travail d’inventaire », et non un texte répété « En savoir plus ». Ne faites pas de la ligne entière texte-et-image un seul grand lien : les liens imbriqués et les zones d’activation floues créent des problèmes de clavier et de lecteur d’écran. Respectez les préférences de mouvement réduit et n’exigez jamais d’animation déclenchée par le défilement pour révéler le contenu.

Règles de rédaction

Rédigez le titre de la collection en 3 à 12 mots et son introduction en 20 à 60 mots. Chaque titre d’élément utilise 3 à 9 mots concrets, et chaque corps utilise 40 à 120 mots. Trois à six éléments est la plage prise en charge. Ces limites existent car l’élément a besoin de suffisamment de substance pour justifier de grandes zones visuelles sans transformer chaque paire en essai indépendant.

Rendez les titres des éléments grammaticalement parallèles. Si le premier commence par un verbe — « Trouver les pages en déclin » — les autres doivent faire de même. Chaque corps doit répondre à trois questions dans un ordre naturel : qu’est-ce que c’est, pourquoi est-ce important ici, et que devrait remarquer le lecteur dans le visuel ? Utilisez des noms spécifiques, des étiquettes d’interface, des conditions et des conséquences. Évitez les superlatifs non qualifiés tels que « meilleur », « puissant » ou « révolutionnaire ».

Maintenez la profondeur équilibrée. Un élément de 110 mots à côté de deux éléments de 40 mots signale que la collection mélange peut-être des niveaux d’abstraction. Divisez l’élément large, combinez les éléments superficiels ou déplacez les détails vers une page liée. Les liens sont optionnels et limités à un par élément afin que la séquence reste explicative plutôt que de devenir un répertoire de navigation.

Ne mettez jamais ce qui suit à l’intérieur d’un élément de zigzag :

• Un formulaire, une capture de newsletter, un tableau de prix, une offre ou un appel à l’action principal.
• Un tableau comparatif, un accordéon, des onglets, un carrousel, une galerie, un lecteur vidéo ou un autre zigzag.
• Une procédure numérotée dont l’ordre est requis pour réussir.
• Plusieurs puces de fonctionnalités sans lien ajoutées pour remplir la hauteur visuelle.
• Une affirmation non étayée, un fragment de témoignage ou un logo sans sa source et son contexte.
• Une image ajoutée uniquement parce que la mise en page comporte un emplacement pour image.

Types d’articles qui l’utilisent

Le champ postTypes dans le front matter est la source de vérité pour cette relation. Un zigzag est optionnel dans chaque type listé et ne devrait apparaître que lorsque la page comporte une séquence visuelle parallèle admissible.

Liste de vérification QA

• La séquence contient trois à six éléments véritablement parallèles.
• Un H2 et une courte introduction expliquent pourquoi les éléments vont ensemble.
• Chaque élément a un titre concret et grammaticalement parallèle.
• Chaque corps reste entre 40 et 120 mots et a une profondeur comparable.
• Chaque visuel existe, apporte de l’information et correspond à son élément.
• Un texte alternatif ou une légende accessible transmet l’information utile de chaque visuel.
• L’ordre DOM par défaut est logique sans aucun CSS ni image.
• L’alternance sur grand écran est dérivée automatiquement ; les auteurs n’ont pas attribué de côtés arbitraires.
• Le mobile utilise un ordre empilé cohérent sans défilement horizontal.
• Aucun libellé ne dépend de gauche, droite ou d’une autre position spécifique à la fenêtre.
• Aucun élément ne contient de formulaires, tableaux, composants d’affichage imbriqués ou étapes procédurales.
• La collection n’est pas adjacente à un autre grand motif visuel répété.
• Les liens sont descriptifs et limités à un lien optionnel par élément.
• Aucun type de schema n’est déduit de la seule mise en page alternée.
• La page reste utile lorsque l’animation est désactivée et que les images chargent lentement.
• Les représentations Markdown, Hugo et WordPress préservent les mêmes champs et le même ordre des éléments.

Utilisez les sections en zigzag lorsque des idées parallèles méritent des preuves parallèles. L’alternance devrait aider les lecteurs à remarquer chaque élément cohérent ; elle ne devrait jamais être la raison pour laquelle l’élément existe.