Notifica a Due Colonne — Regole ed Esempi

Una notifica a due colonne colloca due brevi avvisi etichettati sotto un unico soggetto condiviso. Gli avvisi possono contrastare azioni, spiegare due condizioni o distinguere stati correlati, ma ciascuno deve rimanere accurato e utile se letto autonomamente.

Questo elemento funziona perché “Pagina in bozza” e “Pagina pubblicata” sono condizioni reali, non titoli decorativi. Il titolo condiviso definisce la decisione, ogni avviso fornisce un’istruzione completa, e nessuno chiede al lettore di dedurre il significato dal colore o dalla posizione orizzontale.

Perché questo elemento è importante

I lettori spesso incontrano indicazioni mentre esaminano la pagina alla ricerca della condizione che li riguarda. Un lungo paragrafo che dice “le bozze possono contenere esempi etichettati, mentre le pagine pubblicate richiedono valori verificati” obbliga il lettore a tenere a mente una clausola mentre verifica l’altra. Due avvisi delimitati riducono questo sforzo. Le etichette espongono prima il ramo, così il lettore può identificare la condizione pertinente e poi leggere la sua istruzione.

Il beneficio psicologico è l’attenzione selettiva. Le persone non hanno sempre bisogno di entrambi i messaggi allo stesso modo; hanno bisogno della certezza di aver notato quello giusto. Un titolo condiviso stabilisce la domanda, mentre etichette distinte rendono visibili gli stati disponibili. La presentazione affiancata rende inoltre evidente un contrasto significativo senza esagerarlo come vincitore e perdente.

Questo beneficio scompare quando l’autore forza una falsa simmetria. Per falsa simmetria si intende quando la disposizione implica che due idee abbiano uguale portata, importanza o validità anche se il contenuto non lo supporta. Un promemoria di una frase accanto a una procedura di sicurezza in sei passaggi non è una coppia. Così come non lo è una restrizione legale obbligatoria accanto a un suggerimento facoltativo di produttività. Colonne di uguale larghezza possono far sembrare intercambiabili messaggi disuguali, che è esattamente il segnale sbagliato.

L’estraibilità automatica è la capacità del software di isolare i contenuti preservando le relazioni che li rendono accurati. Una notifica a due colonne tipizzata espone un soggetto genitore e due avvisi figlio etichettati. I sistemi di ricerca e gli agenti AI possono recuperare “Per una pagina pubblicata, usa valori verificati con una fonte e una data controllata” senza dover indovinare quale titolo governa quale frase. Etichette esplicite, ordine di origine e corpi autonomi resistono all’impilamento responsive e all’estrazione solo testuale.

Segui le regole di scrittura degli elementi prima di scegliere questo componente. Lo scopo ha precedenza sull’aspetto. Un rischio grave rimane un box di avviso , una correzione comportamento per comportamento rimane un blocco cose da fare e da non fare , e due fatti non diventano notifiche solo perché un design può metterli in colonne.

Quando usarlo

Usa questo elemento quando un soggetto condiviso ha esattamente due brevi avvisi e vederli entrambi contemporaneamente aiuta il lettore a classificare, confrontare o evitare confusione. Le relazioni appropriate includono:

• Due condizioni: connesso vs disconnesso, bozza vs pubblicato, prima della migrazione vs dopo la migrazione.
• Due destinatari: proprietario dell’account vs utente invitato, purché entrambi ricevano indicazioni sullo stesso evento.
• Comportamento raccomandato e sconsigliato: solo quando ogni lato è un breve avviso anziché un elenco di comportamenti abbinati.
• Stati disponibili e non disponibili: quando le etichette indicano le condizioni che producono ciascuno stato.
• Comportamento attuale e futuro: quando date o limiti di versione sono espliciti.

Tutti questi controlli devono essere superati:

1. Un titolo può introdurre accuratamente entrambi gli avvisi.
2. Esistono esattamente due condizioni o messaggi; la fonte non nasconde un terzo caso.
3. Ogni avviso ha un’etichetta specifica e una conseguenza o azione completa.
4. La coppia può essere compresa nell’ordine di origine su uno schermo stretto.
5. Nessun avviso richiede una procedura annidata, tabella, modulo o lunga qualificazione.

I casi quasi corretti rivelano un uso improprio. Usa la prosa ordinaria quando la seconda affermazione si limita a continuare la prima. Usa una tabella di confronto quando i lettori devono valutare diversi criteri. Usa un albero decisionale quando più di due condizioni si diramano o quando una risposta porta a un’altra domanda. Usa un avviso autonomo quando perdersi il messaggio potrebbe causare danni, perdita di dati, esposizione legale o un’azione irreversibile. Usa cose da fare e da non fare quando diversi comportamenti errati necessitano ciascuno di una correzione corrispondente.

Non inventare un contrappeso. Se l’istruzione onesta è “Esegui il backup del database prima della migrazione”, aggiungere “Dopo la migrazione: continua a lavorare” crea simmetria ma nessun valore. Allo stesso modo, non dividere un avviso in “Importante” e “Anche importante”. Le etichette devono nominare condizioni, stati, destinatari o posizioni reali.

Dove posizionarlo

Posiziona l’elemento immediatamente dopo il paragrafo che definisce la situazione condivisa. I lettori devono sapere quale decisione o stato qualificano gli avvisi prima di incontrare i rami. Quando la coppia precede un’azione, mettila prima del primo passaggio che modifica i dati o impegna il lettore a una scelta.

Le regole esatte di posizionamento sono:

• Metti una coppia di due condizioni dopo i prerequisiti e prima delle istruzioni specifiche per condizione.
• Metti un contrasto pre-azione prima del controllo, comando, download o passaggio che qualifica.
• Metti una coppia di stato-risultato dopo che il risultato è stato definito e prima dei dettagli di risoluzione dei problemi.
• Tieni l’evidenza o una fonte all’interno dell’avviso pertinente quando supporta solo quell’avviso; colloca l’evidenza condivisa immediatamente dopo l’intera coppia.
• In sezioni di documentazione ripetute, usa lo stesso ordine di origine in modo che gli stati ricorrenti non scambino posizione.

L’elemento non può essere affiancato a un altro componente a due colonne, tabella di confronto, controllo a schede, griglia di prezzi o invito all’azione diviso. Le griglie adiacenti rendono ambigui i confini e possono implicare una scelta a quattro vie. Non può separare un’affermazione dalla sua citazione, un passaggio dal suo avviso richiesto, o un controllo del modulo dalla sua etichetta. Non posizionarlo all’interno di un passaggio numerato: i rami annidati possono rendere poco chiare la sequenza e la responsabilità.

Non mettere mai un avviso grave in una colonna accanto a un consiglio di routine nell’altra. La geometria uguale riduce la dominanza dell’avviso e suggerisce che i lettori possano scegliere tra i due. Promuovi il rischio a un avviso autonomo prima dell’azione pertinente, poi usa questo elemento successivamente solo se due condizioni sicure necessitano ancora di chiarimento.

Anatomia

1. Titolo condiviso: nomina la situazione o decisione governata da entrambi gli avvisi.
2. Contenitore dell’avviso: raggruppa la coppia come unico elemento editoriale senza implicare che si tratti di un singolo avviso.
3. Etichetta dell’avviso: nomina una condizione, stato, destinatario o comportamento in 2–6 parole.
4. Corpo dell’avviso: indica il fatto pertinente, la conseguenza e l’azione successiva in quest’ordine quando tutti e tre sono necessari.
5. Icona opzionale: rafforza un’etichetta di testo visibile; non porta mai la distinzione da sola.
6. Nota fonte opzionale: supporta un’affermazione variabile, regolamentata o definita esternamente all’interno dell’avviso che qualifica.
7. Ordine di origine: determina l’ordine per screen reader, copia e mobile; lo styling visivo non deve invertirlo.

L’autore fornisce il titolo condiviso, due etichette, due corpi, il tono e le eventuali fonti. Il renderer fornisce la griglia responsive, la spaziatura, l’enfasi visiva, il contenitore semantico e il trattamento decorativo delle icone.

Esempi di design

Queste sono le varianti supportate complete. Le varianti cambiano etichette ed enfasi, non il modello dati a due avvisi.

Azioni contrastanti

Usa per un’azione raccomandata e una sconsigliata quando c’è un solo messaggio per lato. Indica l’azione e la sua ragione; non espandere questa variante in elenchi abbinati.

Stati condizionali

Usa quando l’istruzione corretta dipende da una condizione mutuamente esclusiva come “Account esistente” e “Nuovo account”. Nomina la condizione in ogni etichetta e metti per primo lo stato più comune o il prerequisito.

Chiarimenti accoppiati

Usa quando due fatti correlati prevengono diversi malintesi ma non sono opposti. Applica uno stile neutro a entrambi in modo che il design non inventi approvazione, gravità o preferenza.

Coppia di stato compatta

Usa per brevi conseguenze di stato dopo che gli stati sono già stati spiegati. Ogni corpo è una frase. Non rimuovere le etichette né ridurre i corpi a valori non spiegati.

Coppia impilata su mobile

Tutte le varianti si impilano a larghezze ridotte. Mantieni il primo avviso immediatamente prima del secondo e conserva il titolo condiviso. Non creare un’interazione a scorrimento o schede, perché nascondere un avviso vanifica lo scopo dell’elemento.

Parametri

“Fonte” identifica dove un adattatore ottiene ciascun valore. La mappatura del corpo memorizza deliberatamente due record di avviso completi anziché due colonne posizionate visivamente.

Il primo titolo del corpo genitore viene mappato su title. Ogni elemento annidato mappa il suo primo titolo su label e tutto ciò che segue su content; gli attributi dell’avviso contengono tone e icon. Il renderer deve rifiutare elementi di avviso singoli, tripli o vuoti, anziché riempire o eliminare silenziosamente una colonna.

Sintassi ed esempi di codice

Tutti i formati preservano lo stesso titolo, ordine degli avvisi, etichette, corpi, toni e fonti. “Colonna uno” e “colonna due” sono termini di presentazione, non nomi di campo.

Direttiva Markdown portabile

:::notification-two-column{variant=conditional}
## Scegli l'istruzione per il tuo stato di pubblicazione

::notice{tone=neutral icon="draft"}
### Pagina in bozza

Usa valori di esempio solo quando sono chiaramente etichettati come tali. Rimuovi o sostituisci ogni campione prima della pubblicazione.
::

::notice{tone=caution icon="publish"}
### Pagina pubblicata

Usa valori verificati con una fonte e una data controllata. Se la verifica è incompleta, trattieni l'affermazione.
::
:::

Questo elemento sovrascrive il nome generico dell’elemento annidato con notice perché i record hanno un comportamento di tono specifico per gli avvisi. Il primo titolo genitore fornisce il titolo condiviso; il primo titolo di ogni avviso fornisce la sua etichetta.

Shortcode Hugo

Nessuno shortcode di produzione attuale implementa questo contratto esatto di avvisi accoppiati. Fino a quando non esiste un adattatore, usa HTML semantico come l’esempio renderizzato. La notazione Hugo prevista è documentata come:

{{< notification-two-column variant="conditional" >}}
## Scegli l'istruzione per il tuo stato di pubblicazione

{{< notification tone="neutral" icon="draft" >}}
### Pagina in bozza
Usa solo valori di esempio etichettati e rimuovili prima della pubblicazione.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Pagina pubblicata
Usa valori verificati con una fonte e una data controllata.
{{< /notification >}}
{{< /notification-two-column >}}

La forma con commento di barra impedisce a questo esempio di specifica di invocare uno shortcode che non esiste. Un futuro adattatore deve validare esattamente due notifiche figlio e renderizzarle nell’ordine di origine.

Blocco WordPress

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Scegli l'istruzione per il tuo stato di pubblicazione</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Pagina in bozza</h3>
<p>Usa solo valori di esempio etichettati e rimuovili prima della pubblicazione.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Pagina pubblicata</h3>
<p>Usa valori verificati con una fonte e una data controllata.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Un editor WordPress dovrebbe presentare due slot di avviso fissi, consentire il riordinamento e impedire la pubblicazione quando l’etichetta o il corpo sono vuoti. Non deve permettere agli autori di aggiungere un terzo avviso solo perché la griglia supporta più colonne.

Esempi

Buono: due condizioni reali con azioni complete

Prima dell’importazione Scarica i record correnti e annota l’ora di esportazione. La copia ti fornisce un punto di recupero se il mapping dei campi produce un risultato inaspettato.

Dopo l’importazione Confronta il conteggio dei record importati con il conteggio di origine, poi ispeziona almeno un record contenente ogni campo mappato. I conteggi rilevano le omissioni; il record completo rileva valori spostati.

Questa coppia ha un soggetto — verifica sicura dell’importazione — e un autentico limite temporale. Ogni avviso nomina un’azione e spiega quale fallimento intercetta. Il secondo è più lungo perché contiene due controlli correlati, ma entrambi i lati hanno responsabilità comparabile e rimangono comprensibili quando impilati.

Cattivo: falsa simmetria che declassa un rischio

Suggerimento utile Rinomina l’esportazione per trovarla più facilmente in seguito.

Importante Importare con “Sostituisci tutto” elimina permanentemente i record esistenti e non può essere annullato. Esegui il backup del database, conferma la destinazione, ottieni l’approvazione e programma il tempo di inattività prima di continuare.

Il primo avviso è una manutenzione facoltativa; il secondo descrive una perdita di dati irreversibile e diversi prerequisiti. Metterli in colonne uguali implica un peso uguale e fa sembrare il messaggio critico una di due alternative. Sposta l’avviso di perdita dati in un box di avviso autonomo prima del controllo. Mantieni il suggerimento sul nome del file come prosa di supporto ordinaria.

Markup schema e accessibilità

Una notifica a due colonne non ha un tipo Schema.org dedicato. Il suo contenuto rimane all’interno dell’Article, TechArticle o WebPage che lo contiene. Non emettere ItemList, HowToStep, Question o Answer solo perché esistono due record delimitati. Se un avviso contiene contenuti che si qualificano autonomamente per dati strutturati, le regole schema del tipo di post che lo contiene decidono la mappatura; questo elemento non ne aggiunge di propri.

Usa un section etichettato quando la coppia appartiene alla spiegazione principale, o un aside etichettato quando entrambi gli avvisi sono complementari. Ogni figlio può essere un aside o section con un titolo reale al corretto livello del documento. Non usare ARIA alert o alertdialog: questi ruoli annunciano cambiamenti dinamici e sensibili al tempo e sono inappropriati per indicazioni editoriali statiche.

Il nome accessibile proviene dal titolo condiviso visibile attraverso la struttura nativa dei titoli o aria-labelledby. Ogni etichetta di avviso deve essere testo. Colore, stile del bordo, posizione e icone possono rafforzare il tono ma non possono definirlo. Se un’icona è decorativa, nascondila alla tecnologia assistiva; se comunica informazioni non presenti nell’etichetta, riscrivi l’etichetta invece di affidarti al testo alternativo per riparare il design.

L’ordine DOM controlla il significato. Gli screen reader e i layout mobile devono incontrare il primo avviso e poi il secondo. Non invertire l’ordine visivo con CSS. Con zoom testo al 200% e larghezze ridotte, gli avvisi devono impilarsi senza tagli o scorrimento orizzontale della pagina. I collegamenti necessitano di etichette descrittive e più collegamenti non devono essere compressi in una riga di icone senza etichetta.

Regole di scrittura

Scrivi la relazione prima di scrivere gli avvisi: “Il lettore ha bisogno di due messaggi perché la guida corretta cambia per ___.” Se lo spazio vuoto non può essere riempito con una condizione, stato, destinatario, tempo o contrasto comportamentale concreto, usa la prosa.

• Usa esattamente due avvisi sotto un titolo condiviso.
• Mantieni il titolo tra 3–12 parole e ogni etichetta tra 2–6 parole.
• Punta a 25–80 parole per corpo; 120 parole è il massimo assoluto.
• Usa uno o due brevi paragrafi per avviso e non più di un breve collegamento inline.
• Metti il fatto o la condizione per primo, la sua conseguenza per seconda e l’azione per ultima quando tutte sono presenti.
• Usa una grammatica parallela per le etichette: “Prima del lancio / Dopo il lancio”, non “Prima del lancio / Cosa dovrebbero fare gli amministratori in seguito.”
• Nomina le condizioni direttamente. Non scrivere mai “sinistra”, “destra”, “l’altra opzione” o “il riquadro sopra.”
• Abbina il tono all’evidenza. I fatti neutri accoppiati non dovrebbero ereditare un trattamento verde e rosso.
• Fai sì che le affermazioni variabili portino una data, versione, piano, giurisdizione o fonte, a seconda dei casi.

Peso comparabile significa che entrambi i messaggi meritano lo stesso momento nel flusso del lettore. Non richiede conteggi identici di frasi o caratteri. Non appesantire una verità breve per eguagliarne una più lunga. Se un corpo supera l’altro di più di circa due a uno, verifica se l’avviso più grande necessita di una sezione separata o se l’avviso più piccolo è un falso corrispettivo.

Non inserire mai una procedura multi-passaggio, tabella, modulo, scheda di prezzo, testimonianza, invito all’azione promozionale, lunga citazione, esempio di codice, video o componente annidato all’interno di un avviso. Non usare mai la coppia per attenuare indicazioni legali, mediche, finanziarie, sulla privacy, sulla sicurezza o su azioni distruttive. Non implicare che due condizioni siano esaustive a meno che il proprietario del contenuto non abbia verificato che non esista un terzo stato.

Tipi di post che lo utilizzano

L’array postTypes nel frontmatter è la fonte per questa tabella. L’inclusione significa che l’elemento è disponibile per un caso genuino di due avvisi, non obbligatorio su ogni pagina di quel tipo.

Checklist QA

• Soggetto condiviso: Un titolo accurato governa entrambi gli avvisi senza forzare l’ambito.
• Esattamente due avvisi: La fonte contiene due record completi e nessun terzo stato implicito.
• Relazione reale: Le etichette nominano un contrasto, condizione, destinatario, stato o limite temporale significativo.
• Significato indipendente: Ogni avviso rimane chiaro quando estratto con il titolo condiviso.
• Nessuna falsa simmetria: Entrambi i messaggi meritano enfasi comparabile; nessuno è riempitivo o un avviso critico declassato.
• Posizionamento corretto: La coppia segue il suo contesto e precede l’azione o il dettaglio che qualifica.
• Vicinati sicuri: Non è adiacente a un altro layout diviso, tabella, controllo a schede o CTA a due colonne.
• Etichette utili: Le etichette usano una grammatica parallela e non dipendono mai dalla posizione sinistra/destra o dal colore.
• Controllo della lunghezza: I corpi rimangono entro uno o due paragrafi e non più di 120 parole ciascuno.
• Moderazione dei contenuti: Nessuna procedura annidata, tabella, modulo, media, promozione o componente complesso appare all’interno.
• Ordine responsive: L’ordine su mobile, tastiera, screen reader e testo copiato corrisponde alla sequenza originale.
• Semantica accessibile: Un titolo visibile etichetta il genitore; le etichette figlio sono titoli; il contenuto statico non usa ruoli di avviso.
• Integrità del tono: Lo stile riflette il significato reale e non trasforma fatti neutri in giudizi buono/cattivo.
• Parità di notazione: Markdown, Hugo e WordPress preservano lo stesso titolo, etichette, corpi, attributi e ordine.
• Moderazione dello schema: L’elemento non crea dati strutturati non supportati.

Rifiuta l’elemento se i controlli su soggetto condiviso, relazione reale o falsa simmetria falliscono. Sono difetti editoriali che un renderer non può risolvere. Riscrivi il contenuto come prosa, sezioni separate, un avviso autonomo o un altro elemento adatto allo scopo prima di aggiustare la presentazione.

FAQ

Le FAQ strutturate nel frontmatter coprono le decisioni di implementazione più soggette a fraintendimenti: gli avvisi non devono essere opposti o di lunghezza identica, l’ordine mobile segue l’ordine di origine, i rischi gravi rimangono avvisi autonomi e l’elemento non crea markup schema proprio.