Impostate le tabelle come testo da leggere#section1

Le tabelle sono disponibili in molte forme. Alcune contengono semplici numeri, altre sono complesse, con un mix di dati numerici e informazioni testuali. Alcune richiedono una lettura riga per riga, altre si possono scorrere verticalmente. Il potenziale uso per le tabelle è tanto vario quanto la parola scritta. Possono essere rendiconti finanziari, orari degli autobus, dizionari multilingua, sommari, conversioni numeriche, opzioni di prezzo, comparazioni di caratteristiche, specifiche tecniche e così via.

Nonostante l’enorme varietà in dimensioni, complessità, contenuti e scopo delle tabelle, ognuna condivide due semplici principi di progettazione: devono essere leggibili e supportare il senso dei dati contenuti all’interno. Non dovrebbero essere rese più belle per soddisfare un senso estetico per la sola osservazione. Detto questo, una tabella ben progettata può ancora essere un bell’oggetto ma con la forma che segue la funzione. Le tabelle non sono immagini di dati: sono cataloghi di dati da esaminare, analizzare, farvi riferimento e consultarli. Una tabella ben progettata consentirà di leggere e comprendere le informazioni e rivelerà i modelli e le correlazioni inerenti ai dati. Come Jan Tschichold, il virtuoso del design tipografico, ha detto in Tipografia asimmetrica¹:

Laddove possibile, pianificate in anticipo la leggibilità di ogni tabella. Il vostro processo di progettazione dovrebbe essere un’indagine per rendere i dati non impegnativi da leggere, semplici da seguire e facili da estrarre.

Proprio come non si progetterebbe il corpo del testo con lo scopo di inserire più parole possibili sullo schermo, così non si dovrebbe trattare la progettazione di una tabella come un esercizio per far stare quanti più dati possibili in uno spazio. Potreste essere tentati di ridurre le dimensioni del testo della vostra tabella e, se i dati sono interamente numerici, potreste riuscire a farla franca. Il vostro lettore dovrebbe essere ancora in grado di leggere e interpretare comodamente la tabella dalla sua posizione normale, senza bisogno di sporgersi in avanti.

Non allungate le tabelle#section2

Molti designer applicheranno istintivamente una larghezza alle loro tabelle, proprio come farebbero con le immagini, estendendole per riempire la colonna o la pagina di testo. E questo è l’appeal dell’impostare le tabelle a tutta larghezza: potete farle sembrare un po’ come delle immagini quando le si osserva da lontano. Tuttavia, mentre una tabella distribuita su tutto lo schermo potrebbe sembrare preferibile da una certa distanza, a un’analisi più attenta sarà più difficile leggerla, poiché i dati saranno inutilmente separati. Per aggiungere al danno la beffa, le tabelle impostate a tutta larghezza sono spesso piene di colori di sfondo e bordi per dare alla tabella l’apparenza di un’immagine, quando ciò che realmente richiede il lettore è l’aspetto del testo. Per il bene dei vostri lettori, evitate queste tentazioni.

Potreste considerare di rendere tutte le colonne di larghezza uniforme. Anche questo non fa nulla per la leggibilità dei contenuti. Alcune celle della tabella saranno troppo larghe, lasciando i dati persi e scollegati dai loro vicini. Le altre celle di una tabella saranno troppo strette, posizionando i dati in maniera disagevole. Le colonne della tabella devono essere ridimensionate in base ai dati che contengono. Le colonne di piccoli numeri dovrebbero essere strette e le colonne di paragrafi dovrebbero essere relativamente ampie. Questo sembra un grande sforzo, e per un print designer lo sarebbe, dato che dovrebbe dimensionare manualmente ogni colonna nel software di layout. Fortunatamente, i browser Web sono molto abili quando si tratta di preparare le tabelle e fanno tutto quel duro lavoro al posto vostro. I browser hanno disposto le tabelle automaticamente in base a complessi algoritmi da molto tempo prima che arrivasse CSS: lasciategli fare il loro mestiere.

Tenete al minimo gli accessori e il riempimento della tabella#section3

Edward Tufte, esperto di statistica e information designer, ha introdotto il concetto di data-ink nel suo classico del 1983, The Visual Display of Quantitative Information. Definisce il data-ink come “il nucleo non cancellabile del grafico”, mentre il non-data-ink è l’inchiostro utilizzato nel grafico, non per rappresentare direttamente i dati ma per scale, etichette, riempimenti e bordi. Tufte prosegue definendo il rapporto data-ink come la proporzione di inchiostro utilizzata per presentare i dati effettivi rispetto alla quantità totale di inchiostro utilizzata nell’intero grafico. L’obiettivo è quello di progettare un grafico con il più alto rapporto data-ink possibile (tendente a 1.0) senza eliminare ciò che è necessario per una comunicazione efficace.

Dove Tufte parla di grafica, include grafici, diagrammi e tabelle, e dove usa “inchiostro” possiamo pensare ai pixel. In termini di tabelle, sta dicendo che nel design dovremmo rimuovere quasi tutto quello che non è né dati né spazio bianco. Riducendo al minimo gli accessori, si massimizzano le informazioni. Questo è un primo principio ideale da tenere presente quando si considera il progetto tipografico di una tabella.

Come punto di partenza, evitate qualsiasi bordo o cornice attorno alla tabella. Si tratta di un abbellimento vittoriano che è del tutto inutile in quanto l’allineamento del testo modellerà sufficientemente bene la tabella.

Cercate di ottenere una tabella leggibile usando solo allineamento, spaziatura e raggruppamento. Evitate strisce zebrate, tinte e riempimenti e qualsiasi altro sfondo. Questi possono essere superficialmente belli ma di solito sono una distrazione. Servono a distorcere il significato dei dati evidenziando una riga sì e una no a scapito delle righe adiacenti. Usate i colori solo come un delicato mezzo per guidare gli occhi del vostro lettore, e solo se non potete organizzare i dati per tale scopo. Se scegliete di usare il colore, fatelo solo nella direzione principale della lettura: verso il basso se sono liste, da una parte all’altra altrimenti.

Quando si tratta di linee e bordi tra righe e colonne, a cui tipograficamente si fa riferimento come a rules, si applica lo stesso principio: usateli con giudizio e preferibilmente evitateli. Jan Tschichold riassume meravigliosamente questo concetto in Asymmetric Typography:

Evitate di usare i bordi delle righe o delle colonne a meno che l’allineamento dei dati, la spaziatura e il raggruppamento non siano sufficienti a guidare l’occhio del lettore. Se avete bisogno di usare le righe a questo scopo, usatele solo in una direzione e utilizzate un colore più leggero per ridurre l’impatto delle linee: state facendo una distinzione, non costruendo una barricata.

Allineate a sinistra il testo, a destra i numeri e i titoli con i dati#section4

Nello spirito di trattare le tabelle come artefatti da leggere, non centrate il testo all’interno delle tabelle. Allineate il testo della tabella come fareste in qualsiasi altro posto, ossia a sinistra. Dal momento che il testo nelle tabelle finisce in colonne strette, non giustificate nemmeno il testo, lasciandolo sfilacciato, o finirete con dei fiumi che scorrono lungo le tabelle, causando potenzialmente confusione e di sicuro danneggiandone la leggibilità. Potete unire con un trattino, comunque, in particolar modo se le colonne della tabella altrimenti avessero uno sfilacciamento pronunciato.

Allineate a destra i numeri per aiutare il lettore a fare dei confronti di grandezza più semplici quando scorre lungo le colonne. Per favorire la scansione in questa maniera dovrete avere una precisione consistente nei vostri dati numerici: ossia, usate lo stesso numero di cifre decimali dopo la virgola.

Per consistenza e facilità di comprensione, abbinate l’allineamento dei titoli all’allineamento dei dati. Allineate a destra i titoli dei dati numerici e allineate a sinistra i titoli delle colonne con il testo. Per esempio:

Allineate al punto decimale#section5

Potreste trovarvi nelle condizioni di non aver controllo sulla precisione numerica, o magari i dati con cui state lavorando sono arrotondati allo stesso numero significativo piuttosto che aderire alla stessa precisione. In questo caso, semplicemente allineare a destra una colonna di numeri non aiuterà il lettore a esaminare la colonna: i numeri piccoli, ad alta precisione a un primo sguardo appariranno come grandi numeri. Al contrario, allineate i numeri al punto decimale. Questo permetterà al lettore di confrontare più rapidamente gli ordini di grandezza tra una varietà più ampia di dati:

+-------------+
| Call charge |
+-------------+
|     $1.30   |
|     $2.50   |
|    $10.80   |
|   $111.01   |
|    $85      |
|    N/A      |
|      $.05   |
|      $.06   |
+-------------+

Allineare al punto decimale era teoricamente possibile usando l’attributo char di HTML 4 su un tag <td>, ma in realtà non è mai stato supportato. Il modo moderno per allineare i numeri a un punto decimale (o a qualsiasi altro carattere, in realtà) è attraverso un nuovo valore della proprietà text-align, sebbene al momento in cui scrivo questo langue nel CSS Text Module Level 4² e il supporto è disomogeneo nel migliore dei casi.

La sintassi del nuovo valore è semplice. Includete l’allineamento del carattere (solitamente un punto o una virgola) tra virgolette, seguito da uno spazio e dalla keyword di allineamento desiderato, che ha come default right se la omettete. Per esempio, quello che segue centra i dati e li allinea a un punto decimale come nel nostro precedente esempio:

td { text-align: "." center; }

Specificando diversi caratteri per l’allineamento potete creare il layout di tabelle più complesse in maniera utile: in questo esempio, allineiamo le cifre a ‘×’ e ‘:’.

Usate numeri lining tabellari nelle tabelle di numeri#section6

Molte tabelle, come i bilanci o gli orari, sono costituite per la maggior parte da numeri. In linea generale, il loro scopo è di fornire al lettore dei dati numerici, presentandoli o su colonne o su righe e a volte in una matrice di due. Il vostro lettore potrebbe usare la tabella scorrendo lungo le colonne, oppure cercando un data point o facendo dei confronti tra i numeri. Il vostro lettore potrebbe anche dare un senso ai dati semplicemente dando un’occhiata alla colonna o alla riga. È molto più semplice confrontare i numeri se gli uno, le decine e le centinaia sono tutte allineate verticalmente, ossia, tutte le cifre dovrebbero occupare esattamente la stessa larghezza.

Cifre della stessa larghezza possono per loro natura essere trovate nei font monospace e non c’è niente di sbagliato nello scegliere un carattere monospace adatto a presentare una tabella di dati (si veda ‘Combining typefaces’). Tuttavia, molti font con spazi proporzionali (quelli in cui 1 è più stretto di 8 e W è più largo di I) hanno anche delle serie aggiuntive di cifre che sono monospace. Questi sono chiamati numeri tabellari. Oltre ad essere di uguale larghezza, i numeri tabellari saranno delicatamente progettati in modo diverso dai numeri proporzionali standard. Ad esempio, un 1 normalmente avrà una barra per la base e uno 0 (zero) potrà essere progettato leggermente più stretto per adattarsi meglio alla larghezza del numero scelto. I numeri tabulari sono solitamente disponibili nelle varianti vecchio stile e rivestimento. Utilizzate i numeri lining tabulari per fornire al vostro lettore il modo più efficace per esaminare verticalmente e orizzontalmente le tabelle di dati.

Confronto tra vari stili numerici.

Per specificare i numeri lining tabellari, impostate la proprietà font-variant-numeric al valore di lining-nums e tabular-nums:

table {
    font-variant-numeric: lining-nums tabular-nums;
}

Le proprietà equivalenti per i browser legacy che richiedono font-feature-settings, usate il feature tag di OpenType lnum e tnum.

Numeri proporzionali#section7

Se è necessario specificare i numeri proporzionali, impostate la proprietà font-variant-numeric al valore proportional-nums. Per i browser legacy che richiedono font-feature-settings, usate il feature tag di OpenType pnum.

Mettete al lavoro lo spazio bianco per raggruppare e separare#section8

Dopo aver eliminato righe e riempimenti (bordi e sfondi) dalla tabella, dovrete applicare uno spazio bianco alla tabella in modo che il lettore possa darle un senso. È a questo punto che dovreste cancellare dalla vostra mente tutte le visioni di fogli di calcolo e altre griglie così uniformi, e pensare invece in termini di tipografia e semplici principi di raggruppamento gestalt.

Dovrete principalmente separare i dati in modo che ciascun elemento possa essere individualmente identificato e letto come separato dagli altri. Per avere più controllo sulla spaziatura, prima riducete la spaziatura tra i bordi:

table {
    border-collapse: collapse;
}

Nelle tradizionali tabelle HTML, le celle adiacenti hanno ognuna i bordi distinti, separati gli uni dagli altri, con la separazione ancora presente anche se i bordi non lo sono. Nel border model collapsed, le celle adiacenti della tabella condividono i bordi. Dal momento che stiamo rimuovendo (quasi) tutti i bordi delle celle e quelli che preserveremo saranno singole linee chiave, il border model collapsed è il più appropriato.

Ora, applicate il padding alle celle della tabella per separare i dati. Scoprirete che aggiungere una piccola quantità di padding al top della cella è un modo utile per fornire una separazione visivamente equilibrata tra le righe sopra e sotto. Per assicurare che tutto si allinei bene, applicate lo stesso padding delle celle dati alle celle di heading. Dal momento che le lunghezze delle righe sono spesso molto corte nelle tabelle, potete ridurre la line height direttamente verso il basso. Nell’esempio seguente, abbiamo rimosso tutta l’interlinea aggiuntiva, ma potreste servirvene di più in base alla scelta del font e alla quantità di testo nelle celle della tabella.

td, th {
    padding: 0.125em 0.5em 0.25em 0.5em;
    line-height: 1;
}

I principi di raggruppamento gestalt più utili nelle tabelle sono quelli di prossimità e somiglianza. Spostate i dati correlati più vicini per essere distinti dagli altri dati: in altre parole, distanziate i gruppi di righe o colonne. Un sottoprodotto del raggruppamento di righe è che i dati diventano molto più facili da analizzare e consultare rispetto a una tabella consistente in una successione di righe indifferenziate. Assicuratevi che i dati di un contenuto o di un significato simili abbiano un aspetto simile a prima vista, cosa che potete fare attraverso l’allineamento, il colore e lo stile dei caratteri.

Opzioni della tabella#section9

Ci occuperemo delle specifiche tipografiche delle didascalie della tabella in ‘Choosing typefaces for functional text’ ma vale la pena notare ora come usare il markup per le didascalie delle tabelle. Se state scegliendo di mettere la vostra tabella all’interno di un elemento <figure>, che è una cosa perfettamente ragionevole da fare, allora usate un elemento <p> prima o dopo la tabella. Se la vostra tabella non è all’interno di un elemento <figure>, o se avete più item nella figure, usate l’elemento opportunamente chiamato <caption>, fornito da HTML specificamente per le tabelle. Scrivete sempre il tag <caption> immediatamente dopo l’apertura del tag <table> e prima di qualsiasi dato della tabella, così:

<table>
    <caption>
    Imperial to metric conversion factors
    <p><i>Values are given to three significant figures</i></p>
    </caption>
    <thead> … </thead>
    <tbody> … </tbody>
</table>

Potete posizionare la didascalia o sopra o sotto la tabella, usando la proprietà caption-side e un valore corrispondente a scelta tra top o bottom.

caption { caption-side: bottom; }

La seguente tabella mostra una didascalia e dimostra i principi Gestalt di raggruppamento separando i dati in righe correlate:

Notate che, in questo esempio, i numeri non si allineano al punto decimale. Questo perché lo scopo della tabella è che il lettore possa facilmente identificare ed estrarre un fattore moltiplicativo. In questo caso non esiste un caso d’uso ovvio per confrontare le grandezze relative dei fattori, che è dove l’allineamento decimale tornerebbe utile.

Non eccedete con gli stili delle tabelle#section10

Lo scrittore-aviatore francese Antoine de Saint-Exupéry scrisse³ La perfezione non si ottiene quando non c’è più nulla da aggiungere, bensì quando non c’è più nulla da togliere. Citare de Saint-Exupéry può esser un cliché ormai, ma la sua frase è perfetta per il design delle tabelle. Non c’è bisogno di far apparire una tabella come un foglio di calcolo. Uno spreadsheet è un tool di per sé, una tabella serve a presentare dati e informazioni che possano essere letti. Il software dei fogli di calcolo offre una moltitudine di opzioni per gli stili delle tabelle, che aggiungono la formattazione del testo, i bordi, il riempimento dello sfondo e tutta un’altra serie di abbellimenti. Così si ottengono delle belle immagini ma non si fa nulla per la leggibilità della tabella, quindi non cercate di emulare quegli stili. Le tabelle possono essere belle ma non sono capolavori artistici. Invece di dipingerle e decorarle, progettate tabelle per i vostri lettori.

Una tipica tabella con gli stili di un foglio di calcolo, impostata a tutta larghezza, con bordi, riempimenti e allineamento al centro.

1. Rimuovete stretch e ridimensionate le colonne in base ai dati.

2. Rimuovete riempimenti, linee della griglia, bordi e grassetto.

3. Allineate a sinistra il testo, allineate a destra i numeri e allineate i titoli con i dati.

4. Mettete al lavoro lo spazio bianco per raggruppare e separare.

5. Usate i numeri lining tabella, precisione consistente e rimuovete le ripetizioni.

Adattate le tabelle ai piccoli schermi#section11

Le tabelle regolarmente richiedono un bel po’ di spazio orizzontale per visualizzare le informazioni che contengono. Anche se progettata e modificata con giudizio, una tabella tipica potrebbe dover essere più ampia dei 45-75 caratteri che normalmente usiamo per il testo. Per schermi di piccole dimensioni, come i telefoni, la progettazione di tabelle leggibili che funzionano in condizioni così ristrette ci pone una seria sfida. I migliori approcci trattano sempre ogni tabella caso per caso, ma ciò non è sempre possibile se abbiamo bisogno di assegnare degli stili generali a qualsiasi cosa provenga dal database di un CMS.

Un approccio immediato è di usare o un font condensato o una dimensione leggermente più piccola (ma non contemporaneamente più piccola e condensato). In entrambe i casi, la leggibilità deve rimanere di primaria importanza e dovreste esplorare anche altre opzioni.

Considerate di impostare i titoli in obliquo per risparmiare spazio#section12

Un modo per risparmiare spazio orizzontale, particolarmente quando avete piccoli pezzi di dati ma titoli lunghi, è di impostare i titoli a un angolo obliquo.

Usare i titoli in obliquo per risparmiare spazio.

Per ottenere questo effetto si può semplicemente usare una semplice traslazione CSS. Dovrete anche posizionare in maniera assoluta i titoli così che la larghezza originale delle colonne non venga conservata e possano stringersi invece attorno ai dati.

th {
    transform-origin: bottom left;
    position: absolute;
}
th.degC {
    transform: translate(2.58em,-2em) rotate(-60deg);
}
th.degF {
    transform: translate(5.14em,-2em) rotate(-60deg);
}

Lasciate che sia il browser a gestire le tabelle con lo scroll orizzontale#section13

La soluzione più semplice per aiutare le tabelle di ogni dimensione e complessità è di lasciare che sia il browser a disporre la tabella come meglio può e rendere la tabella fuori dallo schermo se necessario. Purché poi mettiate il vostro lettore in condizione di scorrere la tabella di lato indipendentemente dal resto del testo, la tabella può essere messa a fuoco in maniera relativamente semplice.

Usare una barra di scorrimento per visualizzare la tabella.

Per farlo, per prima cosa avvolgete la tabella in un elemento <figure>:

<figure class="fig-table">
<table> … </table>
</figure>

Poi applicate le seguenti semplici regole per nascondere la porzione off-screen della tabella e mettere il vostro lettore in condizione di scorrere la tabella senza influenzare il resto del testo:

.fig-table {
    max-width: 100%;
    overflow-x: scroll;
}

È importante non impostare una larghezza alla tabella: il browser può comprimere la tabella finché può prima di farla defluire fuori dallo schermo. Per preservare la leggibilità, fate un buon uso dei non-breaking spaces e di white-space:nowrap per limitare la quantità di data wrap nelle celle. È meglio avere una tabella leggibile che richiede lo scrolling piuttosto che una illeggibile che non lo richiede.

Delineate le tabelle semplici come liste#section14

Potete tranquillamente linearizzare le tabelle di dati semplici quando lo spazio è limitato. Le tabelle che meglio si adattano a questo trattamento sono gli elenchi di dati strutturati, come per esempio un elenco degli impiegati:

Quando non c’è spazio abbastanza perché la tabella venga mostrata con un certo agio, possiamo impostarle un layout completamente diverso. Questo è in generale meno compatto e occupa più spazio in verticale, ma riesce a far stare la tabella in una viewport molto più stretta:

I due rendering della nostra tabella con l’elenco degli impiegati usano esattamente lo stesso markup, compresi gli elementi HTML convenzionali che ci si aspetterebbe in una tabella. La sola aggiunta dell’attributo data-title su ogni cella ci permette di ripetere l’etichetta nella vista dell’elenco, nel caso ne avessimo necessità.

<th data-title="Name">Jones, Claire</th>
<td data-title="Email">claire.jones@domain.com</td>
<td data-title="Title">Managing Director</td>
<td data-title="Phone">01234&nbsp;567890</td>

Ci sono quattro semplici passi per trasformare una tabella in una lista, usando una media query e CSS (non serve JavaScript).

1. Identificare la larghezza della viewport a cui la tabella comincia a vedersi male.
2. Applicare display:block a tutti gli elementi relativi alla tabella, così che si allineino verticalmente invece che come tabella.
3. Nascondere la riga header e ogni cella vuota.
4. Mostrare le etichette per ogni data item (opzionale).

Dovrete applicare alcuni stili in più per estetica e leggibilità, ma la responsiveness descritta può essere ottenuta con queste poche righe di codice CSS:

@media (max-width: 25em) {
  table, caption, tbody, tr, th, td {
    display: block;
    text-align: left;
  }
  thead, th:empty, td:empty {
    display: none;
    visibility: hidden;
  }
  th[data-title]:before, td[data-title]:before {
    content: attr(data-title) ": ";
    display: inline-block;
    width: 3.5em;
  }
}

Questa tecnica è stata resa popolare per la prima volta da Aaron Gustafson⁴.

Rendete le tabelle responsive in base al loro scopo#section15

Ci sono molte tecniche diverse⁵ a nostra disposizione per rendere responsive le tabelle di dati. Alcune sono semplici metodi CSS-only (ne abbiamo già visti due), altre sono complesse, rese possibili da JavaScript. Quando considerate quale tecnica usare, chiedetevi in che modo il vostro lettore userà la tabella. In particolare, considerate se il vostro lettore probabilmente confronterà le righe o le colonne: questo tipo di tabelle richiede un’attenzione extra dovuta al modo in cui vengono usate.

Quando è importante essere in grado di confrontare le colonne, un metodo consiste nel nascondere i campi non essenziali e fornire un’opzione per riattivarle. Questa tecnica è stata resa popolare da Filament Group⁶ usando le tabelle finanziarie come esempio:

Una tabella ricca di dati visualizzata su un grande schermo.

La stessa tabella con colonne nascoste e opzioni da attivare.

Le tabelle sono un aspetto frequentemente trascurato della lettura, a volte con stili eccessivi, a volte progettato male. La responsiveness è un problema particolarmente spinoso in quanto le soluzioni migliori dipendono molto dall’utilità della tabella. Le tabelle possono essere piene di dati, ricche di contenuti e di significati. Date loro l’attenzione che meritano.

Volete saperne di più?#section16

Questo estratto da Web Typography vi aiuterà a partire. Ordinate la versione integrale.