Come progettare un tavolo: guida puntuale per renderlo giusto
L’uso di tabelle e griglie è comune durante la progettazione di prodotti digitali e dashboard. Le tabelle di dati aiutano a organizzare la maggior parte delle informazioni.
Presentano i dati in modo più leggibile e comprensibile. Aiutano anche a enfatizzare i dati importanti e a migliorare la visualizzazione dei dati.
Le tabelle vengono spesso utilizzate come componenti dell’interfaccia utente, ma molti continuano a commettere errori durante la progettazione di tabelle di dati. Alcuni design di tavoli sono pieni di rumore visivo o sono troppo complessi, con conseguente esperienza utente scadente.
Ottenere la giusta progettazione dell’interfaccia utente della tabella crea visualizzazioni e confronti dei dati migliori. Progettare i tavoli nel modo giusto li rende attraenti e migliora la leggibilità.
Questa guida mostra come ottimizzare la progettazione della tabella di dati e migliorare la funzionalità della tabella.
Progettazione di tabelle di dati nel modo giusto
Quando si pianifica il design di un tavolo, ci sono due cose su cui lavorare: lo stile del tavolo e la funzionalità del tavolo.
Stile da tavola
Allineamento dei dati della tabella
Per differenziare il testo dai dati numerici, allinea il testo a sinistra ei numeri a destra. Tale allineamento rende più facile confrontare due dati diversi.
Le intestazioni delle tabelle devono inoltre essere allineate con i dati delle colonne per un design strutturato della tabella.
Alcune celle di tabella possono avere più righe di testo, ad esempio descrizioni. L’ allineamento verticale per tale contenuto dovrebbe essere in alto.
In caso contrario, i dati della colonna non verranno allineati tra loro.
Aggiunta di una sezione in primo piano
Tabella dei prezzi che puoi creare con wpDataTables
Una sezione in primo piano è una colonna, una riga o una cella di una tabella che l’autore desidera enfatizzare. Di solito viene applicato alle tabelle dei prezzi o quando si confrontano i piani di abbonamento.
Utilizzare una sezione in primo piano per evidenziare le informazioni importanti nella tabella. Questo potrebbe essere il miglior piano di valore o un elemento popolare in un elenco, ad esempio.
Per creare una sezione in primo piano, cambia la formattazione delle celle. Ad esempio, modifica il colore di riempimento della cella o la dimensione del carattere del testo per farlo risaltare.
Applicare i colori
Una tabella di dati non dovrebbe avere troppi colori. Usali solo per intestazioni di tabelle, tendenze negative e positive e sezioni in primo piano.
L’aggiunta di troppi colori crea disturbo visivo. Ciò rende difficile distinguere gli elementi che devono essere evidenziati.
Usa sfumature di grigio più scure per il colore del carattere e sfumature di grigio più chiare per il colore del bordo invece del normale colore nero. L’uso di sfumature di nero più tenui lo rende meno intenso, riducendo l’affaticamento degli occhi.
Applicare colori variabili quando si differenziano le categorie o quando si sottolineano i valori massimi e minimi. Per enfatizzare alcune sezioni della tabella, usa colori di riempimento più luminosi o più audaci per farle risaltare.
Colori di riga alternati
Tabella con celle di unione che puoi creare con wpDataTables
L’alternanza dei colori delle righe migliora la leggibilità. Imposta segnali visivi, aiutando le persone a seguire un elenco di informazioni e collegare i dati.
Ciò è particolarmente utile quando si crea un database di grandi dimensioni. Funziona bene anche per piccole tabelle di dati.
Crea un effetto "strisce zebrate" alternando il colore di riempimento bianco con un colore più scuro come il grigio chiaro. Se usi altri colori, usa un colore di riempimento chiaro e alternalo con una tonalità leggermente più scura.
Utilizzo di caratteri a spaziatura fissa
Per un design della tabella più strutturato, usa uno stile di carattere a spaziatura fissa per i dati numerici.
Il carattere tabulare oa spaziatura fissa ha una larghezza e una spaziatura fisse per ogni carattere. Ciò migliora la tipografia e la leggibilità.
Esempi di caratteri a spaziatura fissa includono Courier, Courier New, Lucida Console e Monaco.
Per migliorare ulteriormente la simmetria, assicurati di formattare le cifre della stessa lunghezza, come ad esempio le date. Invece di scrivere 15/3/2019, formatta la data come 15/03/2019.
Visualizzazione dei dati della tabella
Trasforma i dati delle colonne in grafici a barre orizzontali. Questo aiuta a visualizzare i dati e generare una panoramica.
I grafici a barre orizzontali consentono agli utenti di confrontare i set di dati e interpretarli con facilità. Ogni barra si trova in una colonna accanto ai dati che rappresenta, allineata verticalmente e divisa in righe.
L’inserimento di un grafico a barre spesso espande troppo la colonna. Pertanto, considera di mostrare le barre solo per visualizzare valori importanti.
Un altro metodo per visualizzare i dati della tabella consiste nell’utilizzare le mappe di calore.
Le mappe di calore regolano la sfumatura di colore dello sfondo della cella o il colore di riempimento in base al valore numerico sulla cella, creando una sfumatura di un colore. Più alto è il valore numerico, più scuro diventa il colore di riempimento.
Funzionalità da tavolo
Rendilo reattivo
Una tabella dati efficace funziona bene su diversi dispositivi. Deve visualizzare i dati in modo leggibile quando viene aperto su smartphone, tablet e laptop.
La visualizzazione delle tabelle su schermi più piccoli richiede molte modifiche al design delle tabelle. Un design da tavolo basato su desktop di grandi dimensioni potrebbe non funzionare su dispositivi più piccoli.
Prova la tabella sui dispositivi mobili. Assicurati che gli utenti possano scansionare le informazioni senza dover scorrere all’infinito.
Fai attenzione alle colonne rimpicciolite e ai testi nascosti in quanto si traducono in un’esperienza utente scadente.
Ricorda, su schermi più piccoli, le colonne strette sono migliori. Esistono diversi modi per rendere le colonne più sottili.
Ciò include l’ utilizzo di icone, abbreviazioni, formato numerico più breve e dati numerici arrotondati. Quindi 2,5 m anziché 2.500.000 e 0,3 anziché 0,3241.
Abilita il riordino delle colonne
Le tabelle di dati di grandi dimensioni a volte sono difficili da leggere a causa delle loro dimensioni e della quantità di informazioni che contengono. Consentire agli utenti di riordinare le colonne consente loro di concentrarsi sulle colonne che devono leggere.
Significa anche che possono farlo senza scorrere avanti e indietro. Ciò aiuta gli utenti a ridurre al minimo il disordine, a digerire piccole informazioni e a disporre le colonne in base alle proprie esigenze.
Considera di avere un’altezza di riga fissa
Tabella che puoi creare con wpDataTables
Se la tabella dati contiene molte colonne, ancorare le prime colonne. Ciò manterrà il contesto mentre gli utenti scorrono il resto della tabella.
Avere colonne personalizzabili è altamente raccomandato. Ma le righe della tabella devono avere un’altezza fissa per mantenere la simmetria ed evitare di confondere i lettori.
Indipendentemente dai dati, l’altezza della riga fissa migliora il design e gli elementi visivi dell’interfaccia utente della tabella.
Utilizzo dell’impaginazione per tabelle di dati lunghe
Tabella impaginata che puoi creare con wpDataTables
Esiste una regola non scritta secondo cui le tabelle di dati non dovrebbero essere più lunghe di uno schermo desktop. Tuttavia, ciò non è possibile se una tabella di dati è lunga.
Impedisci a lunghe tabelle di dati di occupare una grande porzione di una pagina Web e massimizza lo spazio bianco. Fallo abilitando la funzione di impaginazione.
Questo serve anche a guidare i lettori attraverso la tabella e ad aiutarli a navigare.
Quando si utilizza l’impaginazione, includere il numero di pagina per mostrare quante pagine ci sono e su quale pagina si trovano i lettori. Inoltre, per fornire agli utenti un maggiore controllo, consenti loro di personalizzare il numero di righe da visualizzare per pagina.
Include la funzione di ordinamento delle tabelle
Consentire agli utenti di avere un maggiore controllo sulla tabella di dati migliora la progettazione dell’interfaccia utente della tabella. Se la tabella contiene molte informazioni, un modo per aiutare i lettori a individuare i dati di cui hanno bisogno consiste nell’aggiungere una funzione di ordinamento.
L’ordinamento consente agli utenti di organizzare i dati in base a specifici ordini logici.
Può essere in ordine alfabetico, data e ora modificate, crescente, decrescente e altro. Più opzioni, meglio è.
Un altro modo per ordinare i dati consiste nell’includere un campo di ricerca. Ciò consente ai lettori di cercare dati specifici come il nome di un’azienda, la posizione, i prodotti e altro ancora.
Filtraggio dei dati
Tabella con filtri che puoi creare con wpDataTables
Il filtraggio dei dati è un altro modo per aumentare la funzionalità di una tabella di dati. Gli utenti possono assimilare grandi quantità di dati, comprendere le tendenze e creare confronti.
Possono anche individuare determinate informazioni e analizzare dati complessi. Ciò è particolarmente vero per le tabelle di dati numerici.
Assicurati che gli utenti possano personalizzare parametri o set di filtri per determinate colonne. Inoltre, includi un’opzione di filtro avanzata per salvare il set di filtri creato per un uso futuro.
Mantieni il contesto, usa intestazioni fisse e colonne bloccate
La lettura di una tabella di dati di grandi dimensioni richiede molto scorrimento verticale e orizzontale. Per mantenere il contesto , ancora le intestazioni delle colonne così come la prima colonna o le prime colonne.
Microsoft Excel e Fogli Google si riferiscono alle colonne ancorate come "congelate".
Per semplificare la navigazione tra le tabelle, aggiungi una selezione di righe completa. Ciò consente agli utenti di contrassegnare le righe importanti mentre scorrono orizzontalmente.
Questo può essere complicato se la tabella ha righe espandibili e potrebbe comportare un effetto diverso.
Considerazioni finali su come progettare un tavolo nel modo giusto
Sapere cosa considerare quando si crea una progettazione dell’interfaccia utente di una tabella porta a tabelle efficaci. Questi consentono agli utenti di confrontare i dati e ordinare le informazioni e aumentano anche la leggibilità.
Imparare a progettare un tavolo consente ai designer di ridurre il rumore visivo e fare buon uso dello spazio bianco. I suggerimenti di progettazione forniti qui possono ottimizzare la progettazione della tabella e i dati utente.
Seguire questi suggerimenti migliorerà lo stile e la funzionalità complessivi della tabella. Inoltre, aiutano a migliorare l’esperienza dell’utente e l’immagine del marchio.
Se ti è piaciuto leggere questo articolo su come progettare una tabella, dovresti dare un’occhiata a questo su come creare una tabella di dati.
Abbiamo anche scritto di alcuni argomenti correlati come esempi di tabelle di dati, esempi di tabelle dei prezzi, alternative a DataTables, libreria di tabelle JavaScript , plug-in di tabelle di WordPress, come creare una tabella in WordPress senza plug- in, come inserire una tabella in WordPress, prezzi di WordPress plugin per tabelle e come creare tabelle statistiche in WordPress.