Ogni product designer prima o dopo ha a che fare con il design di tabelle.
Tabelle utente, tabelle di prodotti nelle piattaforme di e-commerce, tabelle di conti o di attività assegnate e molte altre.
Di conseguenza, ci chiediamo quale stile aiuti a orientarsi più velocemente nella tabella e abbia un bell’aspetto, come progettare l’ordinamento per colonna, dove posizionare le azioni in blocco con le righe, ecc.
Gli stili delle righe
Le righe delle tabelle possono avere stili differenti:
- alternanza con fondo colorato (a zebra);
- separazione con linee;
- opzione ibrida delle due precedenti;
- opzione con bordi tra colonne.
Se la tabella non ha molte colonne e informazioni possiamo decidere di utilizzare solo i bordi tra le righe.
Io uso uno stile ibrido (zebra e linee) per la maggior parte delle tabelle. Trovo questo stile più adatto per la visualizzazione. Potete confrontare le diverse possibilità guardando le immagini che seguono.
Tuttavia, se le tabelle hanno molte colonne e informazioni possiamo decidere di separare le colonne con delle linee.
Stili delle colonne dei nomi
La colonna dei nomi dovrebbe avere uno stile diverso dalle altre righe; possono essere scritti in grassetto o essere meno visibili, ma comunque differenti.
Questo perché i nostri occhi analizzano la tabella come segue:
Se la tabella ha un’opzione di ordinamento per colonne, questa deve essere interattiva. La maggior parte delle operazioni di sistema e i siti web più conosciuti utilizzano questo metodo di organizzazione.
Consiglio: se il contenuto non appare immediatamente, è meglio aggiungere un’animazione durante l’attesa di caricamento.
Azioni della riga
A volte abbiamo bisogno di ‘eliminare’ o ‘modificare’ elementi nella tabella. Questo dipende dal numero di possibili azioni e dalla quantità di informazioni sulla riga.
Se sono presenti solo 2 azioni e abbiamo abbastanza spazio, possiamo indicare le azioni con del testo (es. Modifica o Elimina).
L’uso delle icone è più compatto ma consigliamo sempre di utilizzare icona + testo anche quando le icone utilizzate sono tra quelle più conosciute dagli utenti.
Se disponi di più di due azioni è meglio usare un bottone con un menù a tendina, in cui è possibile trovare tutte le azioni disponibili.
Bulk Action (Azioni in blocco)
Le azioni in blocco ti consentono di completare le seguenti azioni su un gran numero di problemi selezionati
Con l’espressione ‘Bulk action’ si intendo delle azioni che ti consentono di completare una stessa azione su un gran numero di elementi selezionate.
Ad esempio, se vogliamo eliminare o aggiornare un gruppo di utenti.
Ecco alcune domande che dobbiamo farci:
- Dove collocare i bottoni per le azioni in blocco?
- Devono essere subito visibili o meglio usare la modalità mostra/nascondi?
- La tabella dovrebbe spostarsi quando appaiono i bottoni?
Mi piace questa opzione perché non sposta la tabella, permette di risparmiare spazio, e aggiunge interattività alla tabella.
Search (Cerca)
Anche la ricerca può essere interattiva!
Consiglio da professionista: fai un test del tuo progetto con dati reali.
Chi si sta affacciando alla progettazione (i principianti) creano delle tabelle con dei testi standard, che certamente hanno un bell’aspetto ma spesso dimenticano che un utente può avere un nome come ‘Carolus Andriamatsinoro’ 🙂 e i titoli di alcuni prodotti potrebbero non starci in una sola linea.
Prima che gli sviluppatori inizino a lavorare sul tuo progetto grafico e prima che gli utenti finali vedano tabelle che non vanno bene è meglio prevedere questi aspetti.
Hai bisogno di una consulenza per un progetto web?
