Le tabelle di informazioni sono noiose. In un certo senso, sono destinati a essere in quel modo. Una buona tabella comunica molte informazioni in un modo conciso e facile da capire. Poiché l'enfasi dovrebbe essere davvero sulle informazioni, la sovra-progettazione di un tavolo può uccidere l'efficacia. Tuttavia, nelle mani giuste, il design intelligente non solo può rendere più attraente una tabella, ma può anche aumentare la leggibilità.
Oggi daremo un'occhiata a diversi modi in cui puoi migliorare la funzionalità e l'estetica dei tuoi tavoli. Uno dei luoghi più comuni in cui attualmente troviamo i tavoli online è nella pagina dei prezzi di un'app Web, quindi la maggior parte dei nostri esempi avrà questo formato, basti ricordare che questi principi possono essere applicati a qualsiasi tipo di griglia informativa (indipendentemente dal fatto che sia effettivamente un tavolo).
Verticale, orizzontale o matrice?
Come sempre, inizieremo con l'ovvio. Il primo passo è decidere una struttura generale del tuo tavolo. La struttura che devi scegliere dipende dal tipo e dalla complessità delle informazioni che stai presentando.
La scelta tra colonne verticali e righe orizzontali può dipendere in gran parte dalle preferenze personali. Disegna il tuo contenuto in ogni forma e decidi quale metodo pensi che trasmetta meglio le informazioni. Ovviamente, se il tuo messaggio è basato su più variabili, una matrice è la strada da percorrere. Qui ci sono un paio di esempi:
Verticale
Orizzontale
Matrice
Iniziare in Excel
Per la cronaca, questa è la prima e, si spera, l'ultima volta in cui mi sentirai suggerire di utilizzare Microsoft Office per qualsiasi cosa riguardi il design. La verità è che le tabelle sono indubbiamente facili da fare in Excel; questo è praticamente quello che fa. Confronta questo con il tempo necessario per codificare in modo rigido la struttura organizzativa in HTML ed Excel vincerà sempre.
Oggi mi sono imbattuto in una piccola piccola applicazione web chiamata Tableizer che ti permette di incollare le tue tabelle da Excel per trasformarle magicamente in HTML. Dovrai comunque gestire la maggior parte dello stile da solo, ma sicuramente farai risparmiare un po 'di tempo sul front-end.
Tableizer
Utilizzare un generatore di tabelle
Odio Excel? Non sentirti male, anche io. Se stai ancora cercando di risparmiare tempo per creare lo scheletro di base di una tabella HTML, ci sono un sacco di generatori online che porteranno a termine il lavoro. Nota che ho detto? Scheletro di base ,? non pensare che tu abbia finito dopo aver usato uno di questi per imbrogliarti da una piccola codifica. Hai ancora molta strada da fare se non vuoi che faccia schifo.
Ecco un rapido elenco di generatori di tabelle gratuiti per salvarti una ricerca su Google:
- QuackIt
- Generatore di tabelle
- TextFixer
Un po 'di stile va molto lontano
Ora che hai un tavolo base, il primo passo per portarlo fuori dagli anni '90 è aggiungere un po 'di CSS. Ovviamente, puoi impazzire e passare ore a sperimentare diverse opzioni di stile, ma ricorda che anche un po 'di colore e stile dei caratteri possono migliorare drasticamente sia la leggibilità che l'attrattiva del tavolo.
Questo è un tutorial vecchio, ma ancora pertinente, sullo stile di base della tabella con CSS che illustra le nozioni di base.
Aggiungi una sezione in primo piano
Questo è estremamente comune nelle tabelle dei prezzi, ma è applicabile a qualsiasi tabella. Pensa alle informazioni nella tabella e valuta se vuoi che lo spettatore si concentri su una porzione specifica. Che si tratti del piano con il miglior valore o di un elemento popolare in un elenco di funzionalità, prova a variare il colore e / o la dimensione per farlo risaltare dal resto.
Ci sono sicuramente molti modi, sia sottili che esagerati, per far risaltare la sezione in primo piano. Ecco alcuni per l'ispirazione:
Differenziazione del colore
Differenziazione delle dimensioni
Differenziazione di colori e dimensioni
Rendere le informazioni ordinabili
Se stai creando tabelle con molte informazioni organizzate in più colonne, è una buona idea prendere in considerazione l'aggiunta di una funzionalità di ordinamento in modo che gli utenti possano scegliere il modo in cui desiderano visualizzare le informazioni organizzate.
Mint.com integra l'ordinamento delle tabelle nel tuo elenco di transazioni, rendendo estremamente semplice il passaggio da una visualizzazione basata su data a una visualizzazione basata su categorie in modo da poter identificare le aree in cui si tende a spendere un sacco di soldi.
Qui ci sono un paio di plugin jQuery che ti danno un modo rapido per aggiungere questa funzionalità:
- SortTable
- tablesorter
Usa icone
Come ho detto sopra, il punto di organizzare le informazioni in tabelle è renderlo comprensibile a colpo d'occhio. Riducendo la lettura necessaria, le icone ben progettate possono migliorare drasticamente la velocità con cui un visitatore può comprendere le informazioni nella tua tabella.
Attenzione, questo va in entrambe le direzioni. Le icone sciatte possono lasciare gli utenti a grattarsi la testa cercando di capire cosa stai cercando di comunicare.
Aggiungi strisce di zebra
Questa è un'idea piuttosto semplice che risale a quando esistono tabelle di informazioni. L'aggiunta di colori di riga alternati aiuta gli occhi a seguire la linea di comunicazione e connettere le informazioni mobili al centro di una tabella con la categoria ancorata sul lato o sul fondo.
Questa semplice tecnica può aumentare la leggibilità di tavoli sia grandi che piccoli, ma è una buona regola per includere sempre strisce (o qualche altro ausilio visivo) se il tuo tavolo richiede al lettore di collegare pezzi di informazione che sono più di un pollice o due a parte.
È semplicissimo da fare con i CSS:
Go Minimal
Odio quel lucido web 2.0 dal precedente suggerimento? Nessun problema, c'è un argomento ancora più forte per minimizzare la grafica della tabella. Ciò consente all'utente di concentrarsi sul contenuto senza distrazioni inutili. Usa linee di griglia pulite, sottili (o nessuna linea), caratteri e colori semplici che contrastano piacevolmente con lo sfondo.
Aggiungi una funzione di ricerca
A volte aggiungere una funzionalità di ordinamento non è abbastanza.Quando hai pagine di informazioni da ordinare, niente batte un campo di ricerca. Questo è abbastanza semplice da fare con una spolverata di jQuery:
- Come creare un filtro / tabella di ricerca
Non sovraccaricare la tabella con ridondanze
Se la tua tabella non rende le informazioni più leggibili, allora è controproducente. Gli sviluppatori di app amano presentare enormi elenchi di funzionalità e un tavolo è sicuramente un modo naturale e persino appropriato per farlo. Tuttavia, a volte i progettisti confezionano tabelle con molte informazioni ridondanti non necessarie che potrebbero essere presentate in un modo molto migliore.
Guarda l'esempio sopra da Macchina della fattura. I quattro piani che offrono sono quasi identici con l'eccezione di tre caratteristiche. Ciò comporta 15 righe non necessarie che lasciano gli occhi che saltano avanti e indietro per collegare i segni di spunta con la funzione corrispondente. Un semplice elenco puntato o grafico che ha detto? Tutti i nostri piani includono le seguenti caratteristiche:? consentirebbe agli utenti di vedere rapidamente che indipendentemente dal piano che scelgono, ottengono tutte queste funzionalità.
Quindi la tabella potrebbe essere riservata alle aree di differenziazione, che lo ridurranno a 3 o 4 righe molto più gestibili. Ancora una volta, vorrei sottolineare che le tabelle dovrebbero rendere l'informazione più leggibile. Se il tuo tavolo non raggiunge questo obiettivo, è controproducente.
Crea aree espandibili
Un'altra grande funzionalità che puoi aggiungere alle tue tabelle è la possibilità di espandere determinate righe. Ciò consente di inserire molti contenuti in uno spazio relativamente privo di spazio. Tirare fuori questo è abbastanza semplice con un plugin jQuery chiamato jExpand. Ecco un tutorial di jankoatwarpspeed su come implementarlo.
Se stai usando un tavolo espandibile, assicurati che i tuoi titoli rendano completamente chiaro dove trovare determinate informazioni. L'ultima cosa che vuoi sono gli utenti infastiditi, setacciare ogni sezione per trovare quello che vogliono.
Evidenziare le relazioni
Questa è una tecnica che aumenta davvero la leggibilità di una tabella o matrice complessa. L'idea è quella di evidenziare qualunque cella l'utente stia passando con la colonna e la riga a cui appartiene. Non è la cosa più semplice da fare, ma è perfettamente possibile con un codice intelligente. Ecco un esempio di come farlo.
Beh, sono sicuro che è più di quanto tu abbia mai voluto sapere sui tavoli nel web design. Usa i commenti qui sotto per farci conoscere i tuoi pensieri sulle tecniche di cui sopra e assicurati di condividere qualsiasi tabella unica che trovi!