it-swarm.it

Migliore interfaccia utente per una tabella HTML.

Ho spesso bisogno di mostrare dati tabulari e voglio tutta la magia. . . ordinamento di colonne, impaginazione, ecc. Preferisco usare colonne in cui si fa clic sul nome della colonna e l'ordinamento viene eseguito per l'utente (di solito utilizzando javascript anche se è più difficile se si dispone anche di impaginazione perché si ordinano solo i dati su lo schermo o lo ricorri per quella colonna e poi li rimetti nella prima pagina?) ma come indico che è stato ordinato? Qual è un buon suggerimento per l'interfaccia utente? Come dovrebbero apparire i nomi delle colonne? Inoltre, mi piace colorare ogni altro risultato con il grigio, ma poi vedo qualcuno con uno schermo con la luminosità troppo alta e non è abbastanza grigio per loro in grado di distinguere le righe ma se aumento la quantità di grigio non c'è abbastanza contrasto per leggere comodamente il testo nero.

Quali sono alcuni esempi di tabelle fatte bene?

6
tooshel

Tradizionalmente, "Ordina per" è indicato dalle frecce su/giù che rappresentano l'ordinamento crescente o decrescente. I nomi delle colonne dovrebbero avere un livello di contrasto più elevato rispetto ai valori, come testo più audace o sfondo ombreggiato.

Personalmente, quando coloro le file alternate, di solito vado più chiaro piuttosto che più scuro, perché l'effetto diventa più pronunciato quanto più i tuoi utenti interagiscono con la tabella.

Ecco alcuni ottimi esempi di opzioni di layout della tabella: http://patterntap.com/tap/collection/tables

14
David Perini
  • Ordina i dati nell'intera tabella, non solo i dati sullo schermo. Sì, dovranno iniziare dalla pagina uno del nuovo ordinamento, ma va bene - ti aspetteresti di riuscire a dare un senso alle cose se ordinassi per ID, e poi a pagina 10 decidi di ordinarle per cognome?
  • Indica che è stato ordinato evidenziando lo sfondo della cella dell'intestazione della tabella nella colonna che viene ordinata. Potresti andare ancora oltre ed evidenziare l'intera colonna. Usa le frecce per renderlo ancora più ovvio (e più accessibile) - le frecce che puntano a destra per non ordinate e una freccia che punta verso il basso per ordinate, ad esempio.
  • I nomi delle colonne dovrebbero essere semplicemente distinguibili come nomi di colonna. Tendo a renderli leggermente più grandi e più audaci rispetto al contenuto della cella della tabella.
  • Colora ogni altro risultato con il grigio solo se è necessario per aumentare la scansionabilità delle singole file. Se è per questo che stai progettando, il compromesso di ridurre leggermente la leggibilità complessiva va bene perché l'utente sta eseguendo la scansione, non la lettura. E alla fine, è impossibile progettare per ogni luminosità dello schermo, quindi assicurati di scegliere un mezzo felice e attenersi a quello.

Non ho esempi immediati per te in questo momento, ma ecco un esempio di una tabella che ho progettato per la mia app Web che segue i miei consigli/preferenze di cui sopra:

image of a table

5
Rahul

Da una prospettiva puramente visiva, controlla http://www.datatables.net/ (plugin per jQuery). La tabella di esempio nella home page contiene già le funzionalità menzionate.

Dal punto di vista tecnico, dipende dall'utilizzo della tecnologia back-end. Se si esegue su un server .Net, i controlli inclusi in ASP 3.5 e 4 sono molto facili da usare come descritto senza la dipendenza jQuery e plug-in.

4
Rob Allen

Dai un'occhiata alle griglie ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-

La migliore interazione dell'utente di qualsiasi framework JS che abbia mai visto. Ci affidiamo ampiamente alla nostra applicazione presso Marketo.

4
Glen Lipka

Se hai bisogno di un datagrid con "tutta la magia", prova dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

È una delle griglie JavaScript più potenti che abbia mai visto.

2
Steve E.

Bene, se vuoi ordinare in entrambi i modi, c'è la classica freccia su/giù come in Windows Explorer/gnome nautilus, di solito hanno un colore più scuro rispetto alla cella.

alt text

1
dierre