Notification : Deux colonnes — Règles et exemples

Une notification sur deux colonnes place deux courts avis étiquetés sous un même sujet commun. Les avis peuvent opposer des actions, expliquer deux conditions ou distinguer des états liés, mais chacun doit rester exact et utile lorsqu’il est lu seul.

Cet élément rendu fonctionne car « Page en brouillon » et « Page publiée » sont de véritables conditions, et non des titres décoratifs. Le titre commun définit la décision, chaque notification fournit une instruction complète, et aucune ne demande au lecteur de déduire le sens à partir de la couleur ou de la position horizontale.

Pourquoi cet élément est important

Les lecteurs rencontrent souvent des conseils en parcourant du regard la condition qui les concerne. Un long paragraphe disant « les brouillons peuvent contenir des exemples étiquetés, tandis que les pages publiées nécessitent des valeurs vérifiées » oblige le lecteur à retenir une clause en mémoire tout en testant l’autre. Deux avis délimités réduisent ce travail. Les étiquettes exposent d’abord la branche, de sorte qu’un lecteur peut identifier la condition pertinente puis lire son instruction.

L’avantage psychologique est l’attention sélective. Les gens n’ont pas toujours besoin des deux messages de manière égale ; ils ont besoin d’être sûrs d’avoir remarqué le bon. Un titre commun établit la question, tandis que des étiquettes distinctes rendent les états disponibles visibles. La présentation côte à côte rend également un contraste pertinent évident sans le surévaluer comme un gagnant et un perdant.

Cet avantage disparaît lorsque l’auteur force une fausse symétrie. La fausse symétrie se produit lorsque la mise en page suggère que deux idées ont une portée, une importance ou une validité égales même si le contenu ne le justifie pas. Une phrase de rappel à côté d’une procédure de sécurité en six étapes ne constitue pas une paire. Pas plus qu’une restriction légale obligatoire à côté d’un conseil de productivité facultatif. Des colonnes de largeur égale peuvent donner l’impression que des messages inégaux sont interchangeables, ce qui est précisément le mauvais signal.

L’extractibilité machine est la capacité d’un logiciel à isoler le contenu tout en préservant les relations qui le rendent exact. Une notification typée sur deux colonnes expose un sujet parent et deux avis enfants étiquetés. Les systèmes de recherche et les agents d’IA peuvent retrouver « Pour une page publiée, utilisez des valeurs vérifiées avec une source et une date de contrôle » sans deviner quel titre régit quelle phrase. Des étiquettes explicites, l’ordre source et des corps autonomes résistent à l’empilement adaptatif et à l’extraction textuelle.

Suivez les règles de rédaction des éléments avant de choisir ce composant. L’objectif prime sur l’apparence. Un risque grave reste une boîte d’avertissement , une correction comportement par comportement reste un bloc à faire et à ne pas faire , et deux faits ne deviennent pas des notifications simplement parce qu’un design peut les mettre en colonnes.

Quand l’utiliser

Utilisez cet élément lorsqu’un sujet commun comporte exactement deux courts avis et que les voir tous les deux en même temps aide le lecteur à classer, comparer ou éviter toute confusion. Les relations appropriées incluent :

• Deux conditions : connecté versus déconnecté, brouillon versus publié, avant migration versus après migration.
• Deux publics : propriétaire du compte versus utilisateur invité, à condition que les deux reçoivent des conseils sur le même événement.
• Comportement recommandé et déconseillé : uniquement lorsque chaque côté est un court avis plutôt qu’une liste de comportements appariés.
• États disponibles et indisponibles : lorsque les étiquettes indiquent les conditions qui produisent chaque état.
• Comportement actuel et à venir : lorsque les dates ou les limites de version sont explicites.

Tous ces tests doivent être réussis :

1. Un titre peut introduire précisément les deux avis.
2. Il existe exactement deux conditions ou messages ; la source ne cache pas un troisième cas.
3. Chaque avis comporte une étiquette spécifique et une conséquence ou action complète.
4. La paire peut être comprise dans l’ordre source sur un écran étroit.
5. Aucun avis ne nécessite une procédure imbriquée, un tableau, un formulaire ou une longue qualification.

Les quasi-échecs révèlent une mauvaise utilisation. Utilisez la prose ordinaire lorsque la deuxième déclaration ne fait que continuer la première. Utilisez un tableau comparatif lorsque les lecteurs doivent évaluer plusieurs critères. Utilisez un arbre de décision lorsque plus de deux conditions bifurquent ou lorsqu’une réponse mène à une autre question. Utilisez un avertissement autonome lorsque manquer le message pourrait causer un préjudice, une perte de données, une exposition juridique ou une action irréversible. Utilisez les blocs à faire et à ne pas faire lorsque plusieurs mauvais comportements nécessitent chacun une correction correspondante.

N’inventez pas de contrepoids. Si l’instruction honnête est « Sauvegardez la base de données avant la migration », ajouter « Après la migration : continuez à travailler » crée une symétrie mais aucune valeur. De même, ne divisez pas un avis en « Important » et « Aussi important ». Les étiquettes doivent nommer des conditions, des états, des publics ou des positions réels.

Où le placer

Placez l’élément immédiatement après le paragraphe qui définit la situation commune. Les lecteurs doivent connaître la décision ou l’état que les avis qualifient avant de rencontrer les branches. Lorsque la paire précède une action, placez-la avant la première étape qui modifie des données ou engage le lecteur dans un choix.

Les règles de position exactes sont :

• Placez une paire de deux conditions après les prérequis et avant les instructions spécifiques à la condition.
• Placez un contraste pré-action avant le contrôle, la commande, le téléchargement ou l’étape qu’il qualifie.
• Placez une paire d’état de résultat après que le résultat a été défini et avant les détails de dépannage.
• Conservez les preuves ou une source dans l’avis concerné lorsqu’elles ne soutiennent que cet avis ; placez les preuves partagées immédiatement après la paire complète.
• Dans les sections documentaires répétées, utilisez le même ordre source afin que les états récurrents n’échangent pas de positions.

L’élément ne peut pas être placé à côté d’un autre composant à deux colonnes, d’un tableau comparatif, d’un contrôle d’onglets, d’une grille tarifaire ou d’un appel à l’action divisé. Les grilles adjacentes rendent les limites ambiguës et peuvent suggérer un choix à quatre voies. Il ne peut pas séparer une affirmation de sa citation, une étape de son avertissement requis, ou un contrôle de formulaire de son étiquette. Ne le placez pas à l’intérieur d’une étape numérotée : les branches imbriquées peuvent rendre la séquence et la responsabilité peu claires.

Ne mettez jamais un avertissement grave dans une colonne à côté d’un conseil de routine dans l’autre. La géométrie égale réduit la dominance de l’avertissement et suggère que les lecteurs peuvent choisir entre les deux. Faites passer le risque à un avertissement autonome avant l’action concernée, puis utilisez cet élément plus tard uniquement si deux conditions sûres nécessitent encore des éclaircissements.

Anatomie

1. Titre commun : nomme la situation ou la décision unique régie par les deux avis.
2. Conteneur d’avis : regroupe la paire comme un élément rédactionnel sans suggérer qu’il s’agit d’une alerte unique.
3. Étiquette d’avis : nomme une condition, un état, un public ou un comportement en 2 à 6 mots.
4. Corps de l’avis : énonce le fait pertinent, la conséquence et l’action suivante dans cet ordre lorsque les trois sont nécessaires.
5. Icône facultative : renforce une étiquette textuelle visible ; elle ne porte jamais la distinction à elle seule.
6. Note de source facultative : soutient une affirmation changeante, réglementée ou définie de l’extérieur dans l’avis qu’elle qualifie.
7. Ordre source : détermine l’ordre pour les lecteurs d’écran, la copie et le mobile ; le style visuel ne doit pas l’inverser.

L’auteur fournit le titre commun, deux étiquettes, deux corps, le ton et les éventuelles sources. Le moteur de rendu fournit la grille adaptative, l’espacement, l’emphase visuelle, le conteneur sémantique et le traitement décoratif des icônes.

Exemples de design

Ce sont les variantes prises en charge complètes. Les variantes modifient les étiquettes et l’emphase, pas le modèle de données à deux avis.

Actions contrastées

À utiliser pour une action recommandée et une action déconseillée lorsqu’il n’y a qu’un seul message de chaque côté. Énoncez l’action et sa raison ; ne développez pas cette variante en listes appariées.

États conditionnels

À utiliser lorsque l’instruction correcte dépend d’une condition mutuellement exclusive telle que « Compte existant » et « Nouveau compte ». Nommez la condition dans chaque étiquette et placez l’état le plus courant ou prérequis en premier.

Clarifications appariées

À utiliser lorsque deux faits liés empêchent des malentendus différents mais ne sont pas des opposés. Appliquez un style neutre aux deux afin que le design n’invente pas d’approbation, de gravité ou de préférence.

Paire d’état compacte

À utiliser pour de courtes conséquences d’état après que les états ont déjà été expliqués. Chaque corps est une phrase. Ne supprimez pas les étiquettes et ne réduisez pas les corps à des valeurs non expliquées.

Paire mobile empilée

Toutes les variantes s’empilent sur les largeurs étroites. Gardez le premier avis immédiatement avant le second et conservez le titre commun. Ne créez pas d’interaction de balayage ou d’onglets, car cacher l’un des avis contredit l’objectif de l’élément.

Paramètres

« Source » identifie où un adaptateur obtient chaque valeur. Le mappage du corps stocke délibérément deux enregistrements d’avis complets plutôt que deux colonnes positionnées visuellement.

Le premier titre du corps parent correspond à title. Chaque élément imbriqué fait correspondre son premier titre à label et tout ce qui suit à content ; les attributs de l’avis contiennent tone et icon. Le moteur de rendu doit rejeter un, trois ou des éléments d’avis vides plutôt que de remplir ou de supprimer silencieusement une colonne.

Syntaxe et exemples de code

Tous les formats préservent le même titre, l’ordre des avis, les étiquettes, les corps, les tons et les sources. « Colonne un » et « colonne deux » sont des termes de présentation, pas des noms de champs.

Directive Markdown portable

:::notification-two-column{variant=conditional}
## Choisissez l'instruction pour votre état de publication

::notice{tone=neutral icon="draft"}
### Page en brouillon

Utilisez des exemples de valeurs uniquement lorsqu'ils sont clairement étiquetés comme exemples. Supprimez ou remplacez tout exemple avant publication.
::

::notice{tone=caution icon="publish"}
### Page publiée

Utilisez des valeurs vérifiées avec une source et une date de contrôle. Si la vérification est incomplète, abstenez-vous de publier l'affirmation.
::
:::

Cet élément remplace le nom générique d’élément imbriqué par notice car les enregistrements ont un comportement de tonalité spécifique aux avis. Le premier titre parent fournit le titre commun ; le premier titre de chaque avis fournit son étiquette.

Shortcode Hugo

Aucun shortcode de production actuel n’implémente ce contrat exact d’avis appariés. Jusqu’à ce qu’un adaptateur existe, utilisez le HTML sémantique comme l’exemple rendu. La notation Hugo prévue est documentée comme suit :

{{< notification-two-column variant="conditional" >}}
## Choisissez l'instruction pour votre état de publication

{{< notification tone="neutral" icon="draft" >}}
### Page en brouillon
Utilisez uniquement des exemples de valeurs étiquetées et supprimez-les avant publication.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Page publiée
Utilisez des valeurs vérifiées avec une source et une date de contrôle.
{{< /notification >}}
{{< /notification-two-column >}}

La forme avec commentaire en barre oblique empêche cet exemple de spécification d’invoquer un shortcode qui n’existe pas. Un adaptateur futur doit valider exactement deux notifications enfants et les rendre dans l’ordre source.

Bloc WordPress

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Choisissez l'instruction pour votre état de publication</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Page en brouillon</h3>
<p>Utilisez uniquement des exemples de valeurs étiquetées et supprimez-les avant publication.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Page publiée</h3>
<p>Utilisez des valeurs vérifiées avec une source et une date de contrôle.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Un éditeur WordPress doit présenter deux emplacements d’avis fixes, permettre le réordonnancement et empêcher la publication lorsque l’étiquette ou le corps est vide. Il ne doit pas permettre aux auteurs d’ajouter un troisième avis simplement parce que la grille prend en charge plus de colonnes.

Exemples

Bon : deux conditions réelles avec des actions complètes

Avant l’importation
Téléchargez les enregistrements actuels et notez l’heure d’exportation. La copie vous donne un point de récupération si le mappage des champs produit un résultat inattendu.

Après l’importation
Comparez le nombre d’enregistrements importés avec le nombre source, puis inspectez au moins un enregistrement contenant chaque champ mappé. Les décomptes détectent les omissions ; l’enregistrement complet détecte les valeurs décalées.

Cette paire a un sujet — la vérification sécurisée de l’importation — et une véritable limite temporelle. Chaque notification nomme une action et explique quelle défaillance elle détecte. La seconde est plus longue car elle contient deux vérifications liées, mais les deux côtés portent une responsabilité comparable et restent compréhensibles lorsqu’ils sont empilés.

Mauvais : fausse symétrie qui minimise un risque

Conseil utile
Renommez l’exportation pour la retrouver plus facilement plus tard.

Important
L’importation avec « Remplacer tout » supprime définitivement les enregistrements existants et ne peut pas être annulée. Sauvegardez la base de données, confirmez la cible, obtenez une approbation et planifiez un temps d’arrêt avant de continuer.

Le premier avis est un conseil d’entretien facultatif ; le second décrit une perte de données irréversible et plusieurs prérequis. Les placer dans des colonnes égales suggère un poids égal et donne l’impression que le message critique est l’une des deux alternatives. Déplacez l’avis de perte de données dans un avertissement autonome avant le contrôle. Conservez la suggestion de nom de fichier comme prose d’accompagnement ordinaire.

Balisage schema et accessibilité

Une notification sur deux colonnes n’a pas de type Schema.org dédié. Son contenu reste dans l’Article, le TechArticle ou la WebPage qui l’encadre. N’émettez pas d’ItemList, de HowToStep, de Question ou d’Answer simplement parce qu’il existe deux enregistrements délimités. Si un avis contient un contenu qui se qualifie indépendamment pour des données structurées, les règles de schema du type d’article qui l’encadre décident du mappage ; cet élément n’en ajoute aucun par lui-même.

Utilisez une section étiquetée lorsque la paire appartient à l’explication principale, ou un aside étiqueté lorsque les deux avis sont complémentaires. Chaque enfant peut être un aside ou une section avec un véritable titre au niveau de document correct. N’utilisez pas les rôles ARIA alert ou alertdialog : ces rôles annoncent des changements dynamiques et sensibles au temps et sont inappropriés pour des conseils éditoriaux statiques.

Le nom accessible provient du titre commun visible via la structure de titre native ou aria-labelledby. Chaque étiquette d’avis doit être textuelle. La couleur, le style de bordure, la position et les icônes peuvent renforcer le ton mais ne peuvent pas le définir. Si une icône est décorative, cachez-la aux technologies d’assistance ; si elle communique des informations non présentes dans l’étiquette, réécrivez l’étiquette plutôt que de compter sur un texte alternatif pour réparer le design.

L’ordre du DOM contrôle le sens. Les lecteurs d’écran et les mises en page mobiles doivent rencontrer le premier avis, puis le second. N’inversez pas l’ordre visuel avec CSS. À 200 % de zoom de texte et sur des largeurs étroites, les avis doivent s’empiler sans coupure ni défilement horizontal de page. Les liens nécessitent des étiquettes descriptives, et plusieurs liens ne doivent pas être compressés en une rangée d’icônes non étiquetées.

Règles de rédaction

Rédigez la relation avant d’écrire les avis : « Le lecteur a besoin de deux messages parce que les conseils corrects changent selon ___ ». Si le blanc ne peut pas être rempli avec une condition, un état, un public, un moment ou un contraste comportemental concret, utilisez la prose.

• Utilisez exactement deux avis sous un titre commun.
• Limitez le titre à 3–12 mots et chaque étiquette à 2–6 mots.
• Visez 25–80 mots par corps ; 120 mots est un maximum absolu.
• Utilisez un ou deux courts paragraphes par avis et pas plus d’un court lien en ligne.
• Placez le fait ou la condition en premier, sa conséquence en second, et l’action en dernier lorsque tous sont présents.
• Utilisez une grammaire parallèle pour les étiquettes : « Avant le lancement / Après le lancement », pas « Avant le lancement / Ce que les administrateurs devraient faire plus tard ».
• Nommez les conditions directement. N’écrivez jamais « à gauche », « à droite », « l’autre option » ou « l’encadré ci-dessus ».
• Adaptez le ton aux preuves. Des faits neutres appariés ne devraient pas hériter d’un traitement vert et rouge.
• Faites en sorte que les affirmations changeantes portent une date, une version, un plan, une juridiction ou une source selon le cas.

Un poids comparable signifie que les deux messages méritent le même moment dans le flux du lecteur. Cela n’exige pas un nombre de phrases ou de caractères identique. Ne gonflez pas une vérité courte pour égaler une plus longue. Si un corps dépasse l’autre de plus de deux fois environ, testez si l’avis le plus grand nécessite une section séparée ou si l’avis le plus petit est un faux pendant.

Ne placez jamais une procédure en plusieurs étapes, un tableau, un formulaire, une carte tarifaire, un témoignage, un appel à l’action promotionnel, une longue citation, un exemple de code, une vidéo ou un composant imbriqué à l’intérieur d’un avis. N’utilisez jamais la paire pour atténuer des conseils juridiques, médicaux, financiers, de confidentialité, de sécurité ou d’action destructrice. Ne suggérez pas que deux conditions sont exhaustives à moins que le propriétaire du contenu n’ait vérifié qu’aucun troisième état n’existe.

Types d’articles qui l’utilisent

Le tableau postTypes dans le frontmatter est la source de ce tableau. L’inclusion signifie que l’élément est disponible pour un véritable cas de deux avis, pas obligatoire sur chaque page de ce type.

Liste de contrôle QA

• Sujet commun : Un titre précis régit les deux avis sans élargir le champ d’application.
• Exactement deux avis : La source contient deux enregistrements complets et aucun troisième état implicite.
• Relation réelle : Les étiquettes nomment un contraste, une condition, un public, un statut ou une limite temporelle pertinente.
• Signification indépendante : Chaque avis reste clair lorsqu’il est extrait avec le titre commun.
• Pas de fausse symétrie : Les deux messages méritent une emphase comparable ; aucun n’est du remplissage ou un avertissement critique minimisé.
• Placement correct : La paire suit son contexte et précède l’action ou le détail qu’elle qualifie.
• Voisins sûrs : Elle n’est pas adjacente à une autre mise en page divisée, un tableau, un contrôle d’onglets ou un CTA deux colonnes.
• Étiquettes utiles : Les étiquettes utilisent une grammaire parallèle et ne dépendent jamais de la position gauche/droite ou de la couleur.
• Contrôle de longueur : Les corps restent dans un ou deux paragraphes et ne dépassent pas 120 mots chacun.
• Retenue du contenu : Aucune procédure, tableau, formulaire, média, promotion ou composant complexe imbriqué n’apparaît à l’intérieur.
• Ordre adaptatif : L’ordre sur mobile, clavier, lecteur d’écran et texte copié correspond à la séquence rédigée.
• Sémantique accessible : Un titre visible étiquette le parent ; les étiquettes enfants sont des titres ; le contenu statique n’utilise pas de rôles d’alerte.
• Intégrité du ton : Le style reflète le sens réel et ne transforme pas des faits neutres en jugements bon/mauvais.
• Parité de notation : Markdown, Hugo et WordPress préservent le même titre, les mêmes étiquettes, corps, attributs et ordre.
• Retenue du schema : L’élément ne crée aucune donnée structurée non prise en charge.

Rejetez l’élément si les vérifications du sujet commun, de la relation réelle ou de la fausse symétrie échouent. Ce sont des défauts éditoriaux qu’un moteur de rendu ne peut pas corriger. Réécrivez le contenu en prose, en sections séparées, en avertissement autonome ou en un autre élément adapté à l’objectif avant d’ajuster la présentation.

FAQ

La FAQ structurée dans le frontmatter couvre les décisions d’implémentation les plus susceptibles d’être mal comprises : les avis n’ont pas besoin d’être des opposés ou de longueurs identiques, l’ordre mobile suit l’ordre source, les risques graves restent des avertissements autonomes, et l’élément ne crée pas son propre balisage schema.