Hai La Paura quando scopri che il tuo prossimo progetto deve progettare una tabella dati complessa e responsive? 😨
Non sei solo, ho visto alcuni grandi designer tremare nei loro stivali al pensiero di risolvere questo problema. Ma non c’è bisogno di temere! Recentemente ho affrontato questa sfida di design, e ora sono qui per condividere alcuni suggerimenti che mi hanno aiutato a trovare un design che i nostri utenti amano.
Ci sono un sacco di opzioni diverse per come progettare le tabelle, figuriamoci come renderle responsive. Colonne e righe possono riposizionarsi, ridimensionarsi, collassare, ridursi a icona o addirittura scomparire quando la finestra del browser si restringe.
Come per tutte le soluzioni di design, il design migliore dipende da come i tuoi lettori useranno i dati. Abbiamo condotto alcune ricerche sugli utenti all’inizio di questo progetto per fornire alcune indicazioni e abbiamo identificato che per il nostro progetto:
- Queste informazioni tabulari verrebbero utilizzate ugualmente su un mix di dispositivi desktop, tablet e mobili.
- Queste tabelle potrebbero contenere molte colonne di testo libero, oltre ai numeri.
- Alcuni pezzi importanti di informazioni dovrebbero rimanere sempre visibili.
Con queste intuizioni dei nostri utenti, ecco le cose principali che ho affrontato quando ho sviluppato un sistema di design per le tabelle di dati con testo pesante.
Prima di tutto, determinare che tipo di tabella è. È una tabella di confronto, dove il lettore confronta i dati su più colonne, o è una tabella di contenuto, dove le serie di dati sono indipendenti l’una dall’altra?
Mobile first
La prima versione che ho progettato era la versione a schermo stretto. L’ho guardata intenzionalmente prima della versione a schermo largo perché la visualizzazione delle tabelle su mobile è importante per i nostri utenti. Pertanto, avevo bisogno di trovare un modo per inserire informazioni complesse e non lineari in un formato verticale.
Sapevo che sarebbe stato molto più facile scalare il design quando c’è molto spazio orizzontale, piuttosto che progettare una bella tabella per desktop e lottare per farla rimanere leggibile su mobile. Significava anche che tenevo in mente le dimensioni del target touch fin dall’inizio e non facevo affidamento su azioni come l’hover per rivelare le informazioni.
Ho deciso di trattare il contenuto più come una lista nelle viste strette in modo che le informazioni importanti rimanessero altamente visibili e scansionabili.
Stile coerente
Le righe hanno bisogno di riposizionarsi quando cambia la dimensione dello schermo, quindi ho usato lo stile per aiutare a mantenere la connessione tra loro. Per esempio, se le intestazioni delle colonne sono in grassetto con uno sfondo grigio, usa lo stesso stile anche nella vista stretta. Questo aiuterà i lettori a rimappare la nuova distribuzione delle celle.
La tipografia è tua amica
È facile dimenticare i tuoi principi tipografici quando hai molti vincoli, ma prendere una decisione consapevole per ottimizzare la leggibilità sarà di grande aiuto ai tuoi lettori, specialmente in un progetto come il mio dove le tabelle hanno molto testo.
La tipografia esiste per onorare il contenuto. ~ Robert Bringhurst
Scansione
Facilitare la scansione rapida mantenendo il flusso di lettura semplice e chiaro. Ho scelto di avere il testo di ogni colonna appeso allo stesso bordo in modo che il lettore possa scansionare il testo in modo lineare.
Lunghezza delle linee
Cerca di non compromettere la lunghezza delle linee di testo schiacciando molte colonne in uno spazio stretto, altrimenti rallenta la velocità di lettura. Ho impostato una larghezza minima per le colonne di testo continuo.
Etichette
Pensa a dove posizionare le etichette in modo che non occupino una quantità eccessiva di spazio, ma forniscano comunque un contesto alle informazioni.
Ho messo le etichette sopra ogni bit di contenuto della cella nella mia lista, dove occupano meno spazio, piuttosto che a lato. E ha reso le informazioni più facili da scansionare. Ho stilizzato le etichette in modo diverso, in modo che sia facile distinguere la differenza tra un’etichetta fissa e un contenuto variabile.
Sono stato in grado di distinguere il contenuto variabile.