Beste Benutzeroberfläche für eine HTML-Tabelle.
Ich muss häufig tabellarische Daten anzeigen und möchte die ganze Magie. . . Spalten, Paginierung usw. sortieren Ich bevorzuge Spalten, bei denen Sie auf den Namen der Spalte klicken und die Sortierung für den Benutzer erfolgt (normalerweise mit Javascript, obwohl es schwieriger ist, wenn Sie auch Paginierung haben, weil Sie nur die Daten sortieren den Bildschirm oder sortieren Sie ihn nach dieser Spalte und setzen Sie sie dann wieder auf die erste Seite?) Aber wie zeige ich an, dass er sortiert wurde? Was ist ein guter UI-Hinweis dafür? Wie sollen die Spaltennamen aussehen? Ich mag es auch, jedes andere Ergebnis mit Grau zu färben, aber dann sehe ich jemanden mit einem Bildschirm, dessen Helligkeit zu hoch ist und der nicht grau genug ist, um die Zeilen unterscheiden zu können, aber wenn ich die Menge an Grau erhöhe, gibt es keine genug Kontrast, um den schwarzen Text bequem zu lesen.
Was sind einige Beispiele für Tabellen, die richtig gemacht wurden?
Traditionell wird "Sortieren nach" durch Aufwärts-/Abwärtspfeile angezeigt, die das Sortieren aufsteigend oder absteigend darstellen. Die Spaltennamen sollten einen höheren Kontrast aufweisen als die Werte, z. B. fetterer Text oder ein schattierter Hintergrund.
Persönlich werde ich beim Färben abwechselnder Zeilen normalerweise eher heller als dunkler, da der Effekt umso stärker wird, je länger Ihre Benutzer mit der Tabelle interagieren.
Hier einige gute Beispiele für Optionen für das Tabellenlayout: http://patterntap.com/tap/collection/tables
- Sortieren Sie die Daten in der gesamten Tabelle, nicht nur die Daten auf dem Bildschirm. Ja, sie müssen ab Seite eins der neuen Sortierreihenfolge beginnen, aber das ist in Ordnung. Würden Sie erwarten, dass Sie einen Sinn ergeben, wenn Sie nach ID sortieren und dann auf Seite 10 nach Nachnamen sortieren?
- Zeigen Sie an, dass es sortiert wurde, indem Sie den Hintergrund der Tabellenkopfzelle in der Spalte markieren, die sortiert wird. Sie können noch weiter gehen und die gesamte Spalte markieren. Verwenden Sie Pfeile, um es noch deutlicher (und zugänglicher) zu machen - Pfeile, die für unsortiert nach rechts zeigen, und einen Pfeil, der zum Beispiel nach sortiert nach unten zeigt.
- Spaltennamen sollten lediglich als Spaltennamen unterscheidbar sein. Ich neige dazu, sie etwas größer und mutiger zu machen als der Inhalt der Tabellenzellen.
- Färben Sie jedes zweite Ergebnis nur dann mit Grau, wenn Sie dies tun müssen, um die Scanbarkeit einzelner Zeilen zu verbessern. Wenn Sie dafür entworfen haben, ist der Kompromiss, die allgemeine Lesbarkeit leicht zu verringern, in Ordnung, da der Benutzer scannt und nicht liest. Und letztendlich ist es unmöglich, für jede Bildschirmhelligkeit zu entwerfen. Wählen Sie also einfach ein fröhliches Medium und bleiben Sie dabei.
Ich habe derzeit keine unmittelbaren Beispiele für Sie, aber hier ist ein Beispiel für eine Tabelle, die ich für meine Web-App entworfen habe und die meinen obigen Ratschlägen/Vorlieben entspricht:
Schauen Sie sich aus rein visueller Sicht http://www.datatables.net/ (Plugin für jQuery) an. In der Beispieltabelle auf der Startseite sind die von Ihnen erwähnten Funktionen bereits implementiert.
Technisch gesehen hängt es davon ab, was Ihre Back-End-Technologie verwendet. Wenn Sie auf einem .NET-Server ausgeführt werden, können die in ASP 3.5 und 4 enthaltenen Steuerelemente) sehr einfach verwendet werden, wie Sie es beschreiben, ohne die Abhängigkeit von jQuery und Plug-In.
Schauen Sie sich ExtJS-Gitter an. http://dev.sencha.com/deploy/dev/examples/#sample-
Beste Benutzerinteraktion aller JS-Frameworks, die ich gesehen habe. Wir verlassen uns bei unserer Anwendung bei Marketo in hohem Maße darauf.
Wenn Sie ein Datagrid mit "all the magic" benötigen, versuchen Sie es mit dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
Es ist eines der leistungsstärksten JavaScript-Raster, die ich je gesehen habe.
Wenn Sie in beide Richtungen sortieren möchten, gibt es den klassischen Pfeil nach oben/unten wie in Windows Explorer/Gnome Nautilus. Diese haben normalerweise eine dunklere Farbe als die Zelle.
