Guida completa al Content Design System

Il Content Design System o Content System è l’insieme delle linee guida e dei princìpi che guidano il contenuto di un prodotto.

A differenza delle guide di stile di brand o per il copywriting, il Content Design System si concentra sul servizio o prodotto digitale e su come vengono usati i contenuti nel corso dell’esperienza.

Che il contenuto sia un elemento del design non è un segreto: se glielo chiedi, te lo dice anche ChatGPT. Se poi vuoi approfondire questo aspetto e toglierti ogni dubbio, abbiamo già pronta la nostra Guida completa al Content design.

Probabilmente sai anche che il design di un prodotto digitale ha delle regole formali, che servono a standardizzare il processo per progettare gli elementi e a produrre più rapidamente nuovi sviluppi. Queste regole vengono di solito inserite nel Design System, in cui anche il contenuto ha un suo spazio.

In questa guida abbiamo sintetizzato tutto quello che ti serve per iniziare a dare struttura ai tuoi contenuti e a identificare dei criteri per usarli al meglio nel tuo prodotto digitale, oggi e in futuro.

Cosa trovi in questa Guida:

• Cos’è e come si usa il Design System
  • Cos’è e come si usa l’Atomic Design
  • Cosa contiene un Design System
  • Quando hai bisogno di un Design System
• Cos’è e come si usa il Content Design System
  • Le sezioni della Guida di stile
  • Come creare la Guida di stile
  • Le sezioni del Content Design System
  • Come creare il Content Design System

Cos’è e come si usa il Design System

Partiamo dalle basi. Il Design System è un sistema di principi e di norme che mantengono coerenza e continuità all’interno di un prodotto digitale. 

“Un Design System è quel tessuto connettivo che tiene insieme tutta la tua piattaforma”. 
(Drew Bridewell, Head of Product e Design a GrowthDay)

Per dirla in modo semplice, è una raccolta di regole organizzate che aiuta chi progetta e sviluppa prodotti digitali (per esempio, un sito web, un’app, un software) a lasciare una traccia di quello che ha creato e a replicarlo in futuro.

Se, per esempio, hai creato un’app e vuoi aggiungere nuove sezioni, avere un libretto di istruzioni che ti dice come usare i colori, le dimensioni, le spaziature di un elemento ti aiuterà a replicare tutto più rapidamente.

Hai presente un modulo di iscrizione a un servizio? Se vuoi inserirlo nella tua app, le regole inserite nel Design System ti informano su:

• quanti caratteri puoi usare per l’etichetta che precede ogni campo di input
• qual è la dimensione del campo di input (e quanti caratteri può contenere)
• quanto spazio c’è tra l’etichetta e il campo di input
• di che colore sono l’etichetta e il placeholder all’interno del campo di input.

Sono informazioni fondamentali, che rendono uniforme l’aspetto delle pagine dell’app e ti mettono in salvo dal rischio di creare un bel “mappazzone” di oggetti diversi fra loro da pagina a pagina.

Il Design System, insomma, nasce per snellire e armonizzare i processi di progettazione: quando il tuo sito o la tua app diventano grandi e complessi, hanno bisogno di modi semplici per gestire ogni singolo elemento, testo incluso.

Cos’è e come si usa l’Atomic Design

L’Atomic Design è la metodologia di progettazione modulare ideata da Brad Frost. È ispirata al mondo della chimica e si basa su un modello che considera le interfacce come un insieme coerente e gerarchico di elementi. 

Perché è necessario introdurre l’Atomic Design? E in che punto e perché si intersecano questa metodologia e il Design System come strumento? 

C’è uno “spettro” che si aggira per gli uffici di chi progetta i Design System, la nota dolente che emerge sempre negli incontri con clienti o nelle riunioni interne: è il fattore tempo unito alla complessità (perché sì: non produciamo contenuti indipendenti dal resto e che rimangono immutati). 

Come dare coerenza, nel tempo, alle regole che abbiamo definito? Come aggiornarle in maniera agile, conciliando agende piene di attività e consegne serrate? Come condividerle in modo intuitivo tra persone e team che cambiano?

Un catalogo di regole o di esempi da solo non basta, ci vuole un criterio che tenga tutto insieme. 

Qui si inserisce l’Atomic Design.

Nel visual e nei contenuti, come in tutte (o quasi) le attività umane, un metodo che funziona quasi sempre è atomizzare, cioè scomporre le parti fino ad arrivare all’elemento minimo.

Più un elemento è atomico, più è semplice definire delle linee guida e aggiornarle regolarmente e, soprattutto, ognuno di questi elementi può essere riutilizzato o combinato con altri per formare nuove componenti.

Per questo, accanto al tema del Design System fa spesso capolino l’Atomic Design. Questa metodologia è composta da 5 livelli organizzati in modo gerarchico:

• Atomo. È l’elemento progettuale minimo. Ogni atomo, dice Brad Frost, ha le sue proprietà: pulsanti, campi di input o etichette di un modulo, ecc. sono elementi di base, come mattoncini Lego. Non puoi scomporli ulteriormente senza romperli.

Il pulsante “Avanti” della webapp Monday è, per esempio, un atomo.

• Molecola. È l’insieme di due o più atomi, legati insieme da una “relazione chimica”. Nella molecola si vede meglio la funzione dei singoli atomi: pensa per esempio a una parte del modulo nell’esempio di Monday, con un’etichetta, un campo di input, un pulsante di call to action.

• Organismo. È l’insieme di più molecole. È un gruppo un po’ più articolato: per esempio un modulo completo, tratto sempre da Monday, composto da titolo, breve descrizione, etichette, campi di input, placeholder, pulsante di call to action e altre stringhe di testo.

• Template. È una struttura, lo scheletro di una pagina. Contiene tutte le componenti (molecole e organismi) unite in una forma organizzata di layout: non è il contenuto finale, ma rappresenta la tipologia di elementi. (Foto: Josh su Flickr)

• Pagina. È l’ultimo passaggio, il contenitore più grande per i diversi elementi di contenuto. Per dirla con Brad Frost, sono “esempi specifici di template che mostrano l’aspetto della UI con il vero contenuto dentro”. 
  Ed eccolo ancora qua, Monday.

Questo sistema componibile (IKEA, scansate) ti permette di replicare gli elementi: gli oggetti dell’interfaccia sono standardizzati, e descritti in dettaglio nella struttura (cioè per come sono fatti) e nelle funzioni (cioè per come si comportano).

L’Atomic Design è ovviamente una manna dal cielo se ti occupi di UI, ma puoi usarlo, come hai visto, anche per creare le regole dei contenuti.

Cosa contiene un Design System

Ci sono modelli diversi di Design System, ma contengono di solito tre tipologie di elementi che ora possiamo leggere alla luce dell’Atomic Design:

• le foundations: sono i principi di design che guidano il progetto e, senza le quali, il Design System resta semplicemente una raccolta di elementi. Per esempio, sono gli elementi di branding (palette, font, logo, icone, ecc.), il Tono di Voce, il lessico e il vocabolario, le linee guida del front-end ma anche regole di accessibilità e di inclusive design;
• la libreria di componenti: sono gli atomi, elementi della UI riusabili, da soli o aggregati. Una libreria di componenti è quindi una raccolta di elementi della UI all’interno dei principi e delle norme del Design System, per esempio un’etichetta, un campo di input o un pulsante di call to action del modulo di iscrizione a una newsletter;
• la libreria di pattern: sono le molecole e gli organismi, gruppi di componenti (atomi) aggregati, per esempio il modulo di iscrizione a una newsletter composto da una etichetta, un campo di input e un pulsante di call to action.

Anche il contenuto rientra in questo modello: segue il principio dell’Atomic Design e le regole di componenti e di pattern, ma lo descriveremo meglio dopo.

Quando hai bisogno di un Design System

Il Design System ti serve se l’attività di sviluppo è iterativa e ha bisogno di essere replicata rapidamente. Per esempio, puoi usarla quando:

• gestisci un sito, un’app o una piattaforma che cresce e devi sviluppare la UI in modo rapido e coerente, evitando l’effetto pulsante piccolo, pulsante quadrato, pulsante tondo, pulsante grande
• hai bisogno di replicare rapidamente degli elementi di design: per esempio aggiungere pulsanti a una pagina. Se hai già misure, codici colori e altre regole per inserirlo, il lavoro è (quasi) fatto
• devi concentrarti su problemi più grandi, soluzioni complesse che tolgono il sonno e riducono il tempo, come ottimizzare un workflow o creare uno user journey articolato
• ti serve un unico “manuale di stile” per comunicare con gli altri team. Ci è capitato di lavorare con aziende che hanno team cross funzionali (per esempio, Aruba). Se crei qualcosa per il team del marketing deve rispettare le regole fissate dal team di prodotto, altrimenti l’interfaccia diventa puro caos e tremendamente sciatta
• vuoi definire regole che superano la durata dei membri del team. Traduzione: se una persona va via, non bisogna ricominciare tutto da capo. Ti pare poco?

Cos’è e come si usa un Content Design System

Il Content Design System o Content System è lo spazio in cui inserire il sistema di regole e di elementi riusabili che tengono insieme il contenuto per ottenere delle linee guida condivise.

I copy che trovi su un sito web o un’app si chiamano microcopy della UI. Sono il risultato operativo del processo di UX writing e commentano gli elementi visivi dell’interfaccia. 

Per rendere il lavoro più snello e uniforme, è bene creare delle regole di progettazione e scrittura di questi microcopy, che affiancheranno le regole di progettazione degli altri elementi della UI. Queste indicazioni compongono il Content System. 

Se ti occupi di design o di contenuti, probabilmente conosci un altro strumento simile: la Guida di stile. È un manualetto pratico, possibilmente snello, che contiene le indicazioni che riguardano i contenuti.

È composta di solito da una sezione dedicata al Tono di Voce e indicazioni su come usarlo, con esempi di applicazione. Può includere anche un vocabolario del brand, istruzioni sulla sintassi e su tutto quello che può aiutare le persone a scrivere seguendo lo stile del brand.

Nel design, il Content Design System comprende la Guida di Stile e, in più, contiene anche le regole di progettazione del contenuto e di creazione dei microcopy che appaiono sugli elementi della UI (componenti e content pattern).

Quando hai bisogno del Content Design System

Torna su al paragrafo “Quando hai bisogno di un Design System” e applica gli stessi concetti al contenuto. Funziona nello stesso modo: ti serve perché risparmi tempo, replichi gli elementi in modo coerente con quello che esiste già, crei delle regole che aiuteranno il team attuale e quello che ci sarà fra qualche tempo (quando c’è un ricambio di persone) e le diverse aree funzionali del team (chi sviluppa, chi fa UX e UI design, chi scrive, ecc.).

In pratica, crei un linguaggio condiviso che aiuta chi progetta tutti gli elementi (visivi, di codice, di contenuto) a trovare una strada già segnata e il filo rosso che unisce i diversi pezzi.

Di solito, il Content Design System include:

• le Guide di stile: linee guida e principi dei contenuti testuali. Contengono indicazioni su Tono di Voce e scelte di linguaggio; regole sui formati, sintassi e vocabolario; così come scelte inerenti ai contenuti accessibili e ai linguaggi inclusivi; 
• le Component libraries e i content pattern: indicazioni su come progettare e scrivere i microcopy degli elementi dell’interfaccia.

Se stai iniziando a farti delle domande e hai dubbi sull’efficacia dei tuoi flussi di lavoro e del tuo metodo, puoi sempre chiederci supporto. Inizia a leggere qualcosa di più sui nostri Servizi.

Le sezioni della Guida di stile

Nella Guida di stile inseriamo indicazioni su:

• Tono di Voce
• linee guida generali (regole di sintassi ma anche convenzioni su accessibilità e linguaggi inclusivi)
• sintassi e vocabolario
• formati (maiuscole e minuscole, punteggiatura, pronomi, ecc.)
• misure (numeri, date, orari, pesi, lunghezze, ecc.).

Per esperienza, il limite della Guida di stile è la sua ampiezza: più specifico è più utile, ma anche limitante. In vent’anni di lavoro, con Officina Microtesti abbiamo progettato un centinaio di Guide di stile e possiamo dire con onestà che molte di loro sono rimaste sepolte dentro qualche cassetto.

Una Guida di stile voluminosa e molto dettagliata ha il vantaggio di dare indicazioni precise, ma lo svantaggio di essere rigida e scomoda. È grande, enciclopedica, a furia di cercare non troverai niente e ti scoraggerai.

Negli anni e con l’esercizio, abbiamo imparato una lezione: the smaller, the better.

Più è snella, meglio è. Non servono pagine e pagine per raccontare il Tono di Voce. Servono delle definizioni precise ed esempi di applicazione.

Tono di Voce

Nello UX writing il Tono ha (quasi) la stessa importanza della Voce, e deve avere quindi pari dignità, come nella famosissima Guida di stile di Mailchimp. Quando parliamo di Tono di Voce non parliamo di quella che usiamo nel copywriting e nell’advertising.

Quella è la Brand Voice, serve a vendere e a far dire “wow” alle persone. Quando però lavori a un progetto digitale, far dire wow non sempre coincide con accessibilità o interazioni fluide e intuitive. Anzi, se le persone dicono wow il rischio è che poi non facciano (o non riescano a fare) quello che dovrebbero: cliccare, navigare, comprare, scaricare.

La Voce dello UX Content si chiama Voce di prodotto. È limitata: ha un vocabolario compatto di parole e usa soprattutto i toni. Se hai un solo un prodotto digitale, probabilmente la Voce di brand è anche quella di prodotto. Facile no?

Le Linee guida su voce e stile di Microsoft, per esempio, sono molto semplici ed efficaci: poche definizioni, diversi esempi.

Sono indicazioni per la scrittura dei copy di prodotto che si allineano alle scelte di brand. Nello stile di scrittura si vede già come parla Microsoft: chiaro e informale.

Accanto alla Voce, c’è il Tono.
C’è un’enorme differenza tra Voce e Tono. Il Tono è emozione, è intento, è specifico. Se reputiamo un testo “gentile” in un certo punto del percorso, è perché il Tono ce lo comunica. Vediamo cosa scrive Mailchimp a proposito del Tono.

[Traduzione: Il tono di Mailchimp è solitamente informale, ma è sempre più importante essere chiari che intrattenere. Quando scrivi, considera lo stato d’animo del lettore. Sono sollevati di aver concluso una campagna? Sono confusi e cercano il nostro aiuto su Twitter? Una volta che hai un’idea del loro stato emotivo, puoi adattare il tuo tono di conseguenza. Mailchimp ha il senso dell’umorismo, quindi hai la libertà di essere divertente quando è appropriato e quando ti viene naturale. Ma non esagerare con lo scherzo: l’umorismo forzato può essere peggiore che non averne. Se non ne hai la certezza, mantieni la serietà.]

È un paragrafo di poche righe per chiarire come usare il Tono: non ci sono esempi pratici, siamo in una visione ancora tattica e non operativa.

Il Tono di Voce nel Design System di Wise occupa una sezione a parte.

“Intrepid, Universally authentic, Delightfully simple” (Intrepidi, universalmente autentici, deliziosamente semplici). 

Per ognuno di questi principi ci sono le rispettive definizioni, poi seguono alcuni paragrafi con esempi di stile. E davvero, in ogni parola, convivono fare intrepido, autenticità e semplicità. 

Gli esempi sono chiari, basta leggere la sezione “Right place, right tone” (Posto giusto, tono giusto).

Al paragrafo “Adding delight” (che potremmo tradurre liberamente con “Aggiungi un tocco di magia”) c’è un esempio emblematico:

Wise invita a scrivere così: “Grab your ID. We believe it’s you, but the FCA needs proof” (Tira fuori un documento d’identità. Noi ci fidiamo, ma la FCA vuole una prova).

Invece di scrivere testi come: “We need to verify your identity” (Abbiamo bisogno di verificare la tua identità). 

Nella regola successiva, per quanto la voce rimanga inalterata, il tono cambia completamente perché l’esempio riguarda contenuti di assistenza, che devono essere rassicuranti. In questo caso, Wise chiede: “Scrivi in modo chiaro e conciso senza freddezza”. 

La best practice indicata da Wise su un loro messaggio di assistenza è:

“Hi Andrew. Sorry your set up hasn’t gone smoothly. Deleting and reinstalling the app might fix the issue. If not, send us a DM, and we’ll try and fix it a different way”. (Ciao Andrew, ci dispiace che l’attivazione non sia andata come previsto. Prova a eliminare e reinstallare l’app: spesso risolve tutto. Se non funziona, scrivici in DM e troveremo un’altra soluzione insieme.)

E non messaggi come: “Hey there Andrew! Whoops, that’s not ideal! Try deleting and installing again”. (Ehi Andrew! Oops, non è proprio il massimo! Prova a cancellare l’app e installarla di nuovo.)

Dopo questi esempi, comprendiamo molto meglio perché Wise parli di Right place, right tone. 

Linee guida generali

Il secondo elemento da inserire nella Guida di stile sono le linee guida generali, che includono anche le regole sull’accessibilità del contenuto e sui linguaggi inclusivi. Siamo ancora in un terreno non operativo.

Apple per esempio usa questo spazio per dare istruzioni su scrittura e terminologia.

“Pensa in modo inclusivo. Fai ricerca. Considera il contesto. Evita termini violenti, oppressivi o abilisti. Evita slang ed espressioni colloquiali. Non usare il colore per assegnare un valore positivo o negativo”.

Sono brevi indicazioni generali con esempi pratici.

Altri brand aggiungono esempi specifici, come fa Salesforce sulle parole “per favore”, “ci dispiace” e i punti esclamativi.

Ecco il testo tradotto:

Usa Per favore con parsimonia.
● Solo quando chiedi all’utente di fare qualcosa di scomodo o quando c’è un errore del sistema. Per esempio: “Il processo di esportazione potrebbe richiedere tempo. Per favore, attendi che il processo sia completo”.

Evita Ci dispiace.
● Usa Ci dispiace solo nei messaggi di errore che creano seri problemi all’utente (per esempio, se perde i dati, l’utente non può continuare a usare Salesforce o deve contattare l’assistenza).
Evita: “Ci dispiace, devi inserire una stringa di ricerca di almeno due caratteri”.
Meglio: “Ci dispiace, devi uscire e accedere di nuovo”.
● Prima di usare Ci dispiace nel testo della UI, chiediti se non sia meglio modificare il design per evitare la situazione.

Usa i punti esclamativi con parsimonia.
● Usa i punti esclamativi per incoraggiare o generare entusiasmo.
Per esempio: “Ci siamo quasi!” (se devi mostrare i progressi durante un processo).
● Non usare punti esclamativi nei messaggi di errore, nei messaggi di conferma o nel testo di istruzioni.
Evita: “Le modifiche sono state salvate!”

All’interno di Sirio, il Design System di INPS c’è una sezione dedicata ad Accessibilità e Inclusione. Contiene molti esempi pratici su come abbattere, per esempio, le discriminazioni generazionali (il nostro “Scrivi e lascia vivere. Manuale pratico di scrittura inclusiva e accessibile” è citato più volte, che onore!).

La sezione dedicata alle Linee Guida di scrittura di Sirio è completa e ben realizzata: c’è anche una sezione sul linguaggio burocratico, fondamentale per la Pubblica Amministrazione.

Vocabolario

Puoi trovare il vocabolario anche come dizionario, o glossario, o terminologia; a volte è una sezione ricca e ragionata di definizioni e indicazioni di scrittura, altre volte è una semplice lista di parole (word list) con brevi descrizioni.

Se scendiamo più nel dettaglio, in genere il glossario comprende le definizioni, il dizionario viene inteso in senso più ampio, il vocabolario comprende le parole usate dal brand (o prodotto o servizio) e indica: come si scrivono, come si usano e che significato hanno nel contesto specifico. 

Per esempio, Wise contiene una sezione vocabolario con le parole che fanno parte della sua identità e dell’esperienza che promette, in cui viene spiegato anche come usarle.

Quando un prodotto ha molte funzioni o quando un brand ha molti prodotti il dizionario diventa ampio, come nella Guida di stile nel Design System di Apple: dai nomi degli elementi alle parole di uso comune, creare una regola riconoscibile aiuta a definire una Voce univoca.

Il vocabolario disambigua anche eventuali termini usabili in contesti differenti o scritti in formati diversi in base al contesto.

Per esempio, “Guide” appare con la maiuscola quando fa riferimento alla funzione presente nell’app Maps di Apple e dei suoi partner. Le “guide” create da utenti hanno invece solo minuscole.

Formati e misure

I formati sono uno degli elementi più sottovalutati della Guida di stile: trattini, virgolette, date e numeri sfuggono continuamente al controllo e, in uno stesso sito web (spesso in una stessa pagina), troviamo email, mail o e-mail.

In questa sezione troviamo anche indicazioni su acronimi, simboli, punti elenco: tutto quello che definisce il Tono di Voce oltre il vocabolario.

Per esempio, Spectrum il Design System di Adobe, chiarisce l’uso delle maiuscole.

In inglese è comune trovare nomi e funzioni di prodotto in maiuscolo. È un’abitudine, scorretta, che si è diffusa anche nella lingua italiana (per esempio, “Aggiungi la Tua Email” invece di “Aggiungi la tua email”).

Adobe mostra come l’uso di maiuscole eminuscole incida sulla sensazione di informalità. Adobe usa le maiuscole solo per la prima parola di una frase, i titoli e i nomi di brand.

Date, numeri e misure hanno bisogno di una definizione univoca: è meglio scrivere i mesi in lettere o numeri? Useremo il formato 25/09/2008 o 25 settembre 2008?

Atlassian Design ha una sezione apposita e molto dettagliata su come scrivere le date e indicare il tempo. 

Anche la valuta fa parte di questo tipo di sezioni: per esempio, meglio evitare che il simbolo dell’euro (€) si sposti ballerino prima e dopo le cifre all’interno della stessa esperienza (e magari apparire poi per esteso).

Visa Product Design System ha una sezione altrettanto ricca e dettagliata sui formati e dedica un paragrafo proprio alle valute internazionali. 

Come creare la Guida di stile

Per creare la Guida di stile in modo semplice, abbiamo definito una checklist che raccoglie i punti più importanti e sottovalutati. Usala nel tuo lavoro, ti aiuterà a non lasciare nessun elemento scoperto.

La checklist

Maiuscole e formattazione

• uso delle maiuscole
• uso del maiuscoletto
• uso del grassetto
• uso del corsivo.

Abbreviazioni e acronimi

• spiegazione dell’acronimo (in un glossario generale o tra parentesi dopo il primo uso)
• punto negli acronimi (srl o s.r.l.)
• abbreviazioni dal latino o equivalenti in italiano (ecc. o etc.).

Numeri e numerali

• formato della data (GG/MM/AAAA o GG mese AAAA)
• formato dell’ora (10:15 oppure 10.15)
• numeri o lettere (1 o uno)
• numerali e unità di misura (1 kg o un kg)
• uso della virgola nei numeri
• uso delle percentuali (10% o 10 per cento).

Punteggiatura

• tipo di virgolette (singole o doppie)
• uso della virgola nella frase 
• uso del punto e virgola nella frase e negli elenchi
• uso del punto esclamativo (Siamo felici di averti qui! o Siamo felici di averti qui).

La Guida di stile è un sistema di regole e linee guida applicabile a tutte le esperienze digitali: dal sito vetrina all’app.

Le piattaforme più strutturate, o che hanno bisogno di Design System organici per definire le librerie di componenti e i modelli replicabili, hanno però bisogno di approfondire il comportamento anche del contenuto e dei microcopy in base agli scenari d’uso.

Come abbiamo scritto nel paragrafo “Cos’è e come si usa un Content Design System” questo strumento aiuta a prendere decisioni, replicare dei template in caso di A/B test senza la necessità di reiterare il processo di design del contenuto. Fornisce dei modelli con regole definite, già condivise e pronte all’uso: per scrivere messaggi, campi di input, titoli, finestre modali. 

Scopriamo come progettarlo nel dettaglio.

Le sezioni del Content Design System

La Guida di stile dello UX Content è il Content Design System, un sistema integrato nel design visual e condiviso dal team di prodotto e di sviluppo. 

Come nella Guida di stile, il Content Design System presenta i suoi argomenti dal livello generale e tattico a quello operativo.

In genere, la strategia del brand o del prodotto è già presentata nel Tono di Voce.

Nel Content Design System inseriamo invece indicazioni su:

• princìpi del contenuto nel design del prodotto;
• struttura del contenuto: principi di content design generale e content pattern;
• regole di microcopy delle componenti della UI.

Un Content Design System offre degli elementi flessibili e riusabili in contesti diversi.

Princìpi

I princìpi sono linee guida generali della Voce di prodotto, che riassumono le caratteristiche della sua comunicazione.

Sono predicati generali, teorici e con piccoli esempi.

Nella sezione Foundations, Carbon il Design System di IMB enuncia 9 principi relativi ai contenuti:

When IBM content is at its best:

• It has a clear point of view.
• It’s simple and logical.
• It builds on solid research, data, and analysis.
• It’s intellectually ambitious, expressing a bigger idea.
• It’s persuasive, not poetic.
• It’s confident, but not boastful.
• It only ever uses figurative language for emphasis.
• It elevates facts and outcomes.
• It engages the thinker by speaking like the thinker.

[Traduzione:
Quando i contenuti di IBM esprimono al meglio il loro valore:

• Hanno un punto di vista chiaro.
• Sono semplici e logici.
• Si fondano su ricerca, dati e analisi solidi.
• Mostrano ambizione intellettuale ed esprimono un’idea più ampia.
• Sono persuasivi, non poetici.
• Comunicano sicurezza, senza risultare autocelebrativi.
• Usano il linguaggio figurato solo per dare enfasi.
• Mettono in primo piano fatti e risultati.
• Coinvolgono chi riflette parlando il suo stesso linguaggio.]

In Spectrum, anche Adobe elenca i suoi princìpi di design:

• razionale
• umano
• focalizzato.

L’obiettivo dei messaggi dei prodotti Adobe è permettere a tutte le persone di usare strumenti complessi in modo semplice. I suoi prodotti sono basati sulla ricerca e i test (razionale), hanno le persone e le loro caratteristiche al centro (umano), offrono quello che serve alle persone senza aggiungere troppi fronzoli (focalizzato).

I princìpi sono insieme una dichiarazione di intenti e una conoscenza condivisa dal gruppo. Non è una Mission, non è una Vision: parliamo di azioni pratiche, accompagnate da istruzioni e ripetibili nel tempo.

Struttura del contenuto e regole di microcopy UI

La struttura del contenuto è il cuore del Content Design System e la sua unicità. 

Di solito, i princìpi descrivono il Tono di Voce nella Guida di stile. Qui invece troviamo le regole formali su come progettare ogni tipo di contenuto e le regole della scrittura delle componenti della UI.

La struttura del contenuto include anche i content pattern, cioè i modelli di contenuto riusabili che definiscono la Voce di prodotto.

I content pattern possono essere organizzati per tipo di componente (per esempio, banner, pulsanti, card, checkbox, ecc.) come fa Material Design: ogni componente contiene le indicazioni per il visual, l’uso e il microcopy.

Intuit organizza i pattern per funzione (conferme, errori, tooltip, contenuti d’assistenza, belle notizie, cattive notizie). Ogni funzione è presentata da una breve descrizione e seguita dai casi d’uso e da esempi di scrittura.

Un bell’esempio è nella sezione Content del Design System di Telepass. La componente è descritta e accompagnata da un vademecum alla scrittura (“Cosa fare prima di scrivere”).

Subito dopo, c’è la Struttura del copy.

Per ciascun elemento, c’è un maggiore dettaglio sul numero di caratteri da usare e indicazioni sul content pattern (o modello).

Sempre su Material Design, per ogni elemento testuale viene indicato un content pattern con il dettaglio del contenuto e alcuni consigli di scrittura.

In questo caso, il titolo dovrebbe “contenere una dichiarazione breve e chiara o una domanda, ed evitare scuse, allarmi o ambiguità”.

Le regole di componenti o funzioni possono essere stringenti, come per le linee guida delle modali in Atlassian: le etichette degli elementi devono sempre coincidere con l’azione che si verifica quando l’elemento viene selezionato.

Per esempio: “Scegli l’utente” invece di “Utente”. 

L’etichetta del pulsante primario, invece, deve sempre coincidere con l’azione espressa dal titolo della modale. 

Per esempio: “Seleziona” se il titolo è “Seleziona un template”.

Anche Spectrum di Adobe prevede content pattern dettagliati. Nei messaggi di errore, il titolo deve includere quello che è accaduto, la descrizione della causa (2 righe) e come sistemare il problema (2 righe successive).

Carbon Design System per gli empty state (stati vuoti) è altrettanto specifico nel costruire i pattern. 

Parte dagli stati vuoti elementari (basic empty state) e definisce ogni singolo elemento del pattern:

• Titolo: una spiegazione breve e concisa. Quando possibile, formula il titolo come un’affermazione positiva.
  Per esempio, “Inizia aggiungendo asset di dati” ha un tono più positivo di “Non hai alcun asset di dati”. In alternativa, puoi scrivere: “Non hai ancora asset di dati”.
• Body: spiega con chiarezza quale sia il passo successivo per riempire lo spazio. Puoi anche indicare perché lo spazio è vuoto e perché è utile riempirlo. Ci sono tre modi per spiegare l’azione principale:
  • rimanda la persona verso il pulsante di azione principale posizionato sotto il testo
  • inserisci nel testo un link all’azione principale
  • rimanda direttamente verso l’elemento dell’interfaccia (UI). Questo approccio ha il vantaggio di spiegare dove si trovano gli elementi dell’interfaccia e come verranno utilizzati in seguito.

• Azione primaria: la call to action principale, richiamata nel corpo del testo.
• Azione secondaria: se esiste un’azione secondaria, per esempio il link ai documenti per approfondire, inseriscila sotto il testo.

L’esempio di Carbon mostra in modo chiaro anche quanto sia efficace progettare in contemporanea design dei componenti e contenuto.

Intelligenze artificiali (AI)

AI generative nel Content System? Sì. Il perché ce lo racconta in parole semplici Intuit, che ha inserito una sezione apposita nel suo Content Design System per scrivere con le AI e delle AI integrate nei suoi prodotti:

“As AI technology develops, it’ll become more important in our work and products. These guidelines will help anyone working on AI experiences create good content for our customers, no matter who or what writes the final version”.

[Traduzione: Con l’evolversi della tecnologia AI, essa diventerà sempre più centrale nel nostro lavoro e nei nostri prodotti. Queste linee guida aiuteranno chiunque lavori su esperienze basate sull’intelligenza artificiale a creare contenuti di qualità per la nostra clientela, a prescindere da chi o da cosa scriva la versione finale.]

Siamo dell’idea che ogni strumento debba essere studiato e adattato in modo etico, razionale e sostenibile per i nostri scopi, e le AI non fanno eccezione. Il dibattito intorno a questi strumenti è acceso e polarizzante. Intanto, pensiamo sia importante impiegare le nostre risorse e le nostre energie per usare le AI con responsabilità. Ci interessa molto di più capire come possiamo rendere queste macchine delle partner, evitando di smarrirci perché le umanizziamo o perché temiamo di perdere il controllo sul nostro ruolo e lavoro. 

A questo proposito, sempre Intuit costruisce nella sezione un vero Content System delle AI nel Content System:

• con le sue Foundations, in cui vengono introdotti i principi etici e di trasparenza, per garantire fiducia e attenzione all’utente 
• le linee guida di Voce e Tono, con un paragrafo interessante, cioè quello intitolato “How to get AI to sound like Intuit”

• i pattern da usare come modelli di conversazione, per gestire il flusso della conversazione e garantire all’utente più controllo
• il vocabolario da adottare, per capire come e quando menzionare in modo corretto le AI nei testi di prodotto.

Come creare il Content Design System

Il Content Design System è frutto di un lavoro congiunto. Se la Guida di stile nasce con la collaborazione di chi si occupa di branding e di marketing, e in piccola parte di chi lavora col prodotto, il Content Design System ha bisogno di una collaborazione stretta con più aree di attività:

• UX/UI design
• sviluppo
• content design
• product design e management.

Questa attività avviene di solito a valle del prototipo e richiede adattamenti continui, tempo e attenzione: abbiamo visto molte aziende rinunciare, nel tempo, a sviluppare il proprio Design System perché pressate da consegne e nuovi sviluppi.

Prima di Officina Microtesti abbiamo lavorato come personale di aziende digitali: abbiamo sviluppato Content Design System che sono stati usati per anni e altre volte lasciati a metà, all’inseguimento (più che alla ricerca) del tempo perduto.

Con Officina Microtesti abbiamo lavorato a diversi Content Design System con team interni o esterni alle aziende clienti, per realtà piccole e grandi ed enti pubblici e, di fatto, abbiamo evitato che molto lavoro venisse buttato nel cestino perché non rispondeva a nessuna delle esigenze per cui era stato sviluppato.

Che venga usato dal team all’interno dell’azienda o dai team di consulenza esterna, la regola resta la stessa: il Content Design System ha bisogno di più voci per funzionare.

Il nostro ruolo come persone esperte di governance e Content Operations è capire quale contenuto scrivere nel contesto in cui appare. Ma senza lo sguardo di chi conosce il prodotto, chi lo ha sviluppato e scritto codice, chi ha disegnato le componenti, sarà difficile che funzioni davvero. Non si estrapola un copy dal suo contesto d’uso.

Senza sottovalutare mai il ruolo della ricerca e dei test: se un microcopy va bene o no, ce lo dicono i dati, sempre. 

Come hai visto, il Content Design System è un lavoro di squadra, progressivo, sistematico e richiede aggiornamento costante per comprendere i flussi della conversazione di prodotto e le regole dello UX Content, e avere sempre un occhio alle innovazioni.

Quando progetti sistemi di contenuti, la complessità non è mai nello strumento in sé: il metodo e l’esperienza possono venirti in soccorso e, in quanto a Content Design System, con il nostro metodo CHIARO/m® abbiamo sperimentato diverse soluzioni per farlo. 

Se vuoi confrontarti con il nostro metodo, definire processi e flussi e formare le persone che lavorano con te, possiamo affiancare il tuo team. 

Se stai pensando di rivedere seriamente il tuo sistema di contenuti ma senti che c’è un blocco da qualche parte, iniziamo subito con un’analisi strutturata.

In entrambi i casi, puoi scegliere un servizio o comporre il tuo piano d’azione nel tempo, come ti è più utile: scopri quale soluzione CHIARO/m® può aiutarti. 

[Foto di copertina: Alex Shuper su Unsplash]

Guida aggiornata il 20 marzo 2026