Informationstabellen sind langweilig. In gewissem Sinne sollen sie so sein. Eine gute Tabelle vermittelt viele Informationen auf eine übersichtliche und verständliche Weise. Da der Schwerpunkt wirklich auf den Informationen liegen sollte, kann das übermäßige Gestalten einer Tabelle die Wirksamkeit beeinträchtigen. In den richtigen Händen kann ein cleveres Design einen Tisch nicht nur attraktiver machen, sondern auch die Lesbarkeit erhöhen.
Heute werfen wir einen Blick auf verschiedene Möglichkeiten, wie Sie die Funktionalität und Ästhetik Ihrer Tische verbessern können. Eine der häufigsten Stellen, an denen wir online Tabellen finden, befindet sich auf der Preisseite einer Web-App. Die meisten unserer Beispiele werden dieses Formular annehmen. Denken Sie jedoch daran, dass diese Prinzipien auf alle Arten von Informationsgittern anwendbar sind (unabhängig davon, ob es sich tatsächlich um ein Raster handelt.) Tabelle).
Vertikal, Horizontal oder Matrix?
Wir beginnen wie immer mit dem Offensichtlichen. Der erste Schritt ist die Festlegung einer allgemeinen Struktur Ihrer Tabelle. Welche Struktur Sie wählen sollten, hängt von der Art und Komplexität der Informationen ab, die Sie präsentieren.
Die Wahl zwischen vertikalen Spalten und horizontalen Reihen kann stark von den persönlichen Vorlieben abhängen. Skizzieren Sie Ihre Inhalte in jedem Formular und entscheiden Sie, welche Methode Ihrer Meinung nach die Informationen am besten vermittelt. Wenn Ihre Nachricht auf mehreren Variablen basiert, ist eine Matrix der richtige Weg. Hier einige Beispiele:
Vertikale
Horizontal
Matrix
Starten Sie in Excel
Für das Protokoll ist dies das erste und hoffentlich das letzte Mal, dass Sie Microsoft Office für alles, was mit dem Design zusammenhängt, vorschlagen wird. Die Wahrheit ist, Tabellen lassen sich zweifellos leicht in Excel erstellen. das ist so ziemlich das, was es tut. Vergleichen Sie dies mit der Zeit, die Sie benötigen, um die Organisationsstruktur in HTML hart zu codieren, und Excel wird jedes Mal gewinnen.
Heute bin ich auf eine kleine Webanwendung namens Tableizer gestoßen, mit der Sie Ihre Tabellen aus Excel einfügen können, um sie magisch in HTML umzuwandeln. Sie müssen das Styling immer noch selbstständig erledigen, aber Sie sparen auf jeden Fall etwas Zeit am Frontend.
Tableizer
Verwenden Sie einen Tabellengenerator
Hasse Excel? Fühle mich nicht schlecht, ich auch. Wenn Sie immer noch etwas Zeit beim Erstellen des Grundgerüsts einer HTML-Tabelle sparen möchten, gibt es unzählige Online-Generatoren, die die Arbeit erledigen werden. Beachten Sie, dass ich "Grundgerüst" sagte. Denken Sie nicht, dass Sie fertig sind, nachdem Sie eine dieser Methoden verwendet haben, um sich aus einer kleinen Codierung herauszuschleichen. Sie haben noch einen langen Weg vor sich, wenn Sie nicht wollen, dass es saugt.
Hier ist eine kurze Liste der freien Tabellengeneratoren, um eine Google-Suche zu speichern:
- QuackIt
- Tabellen-Generator
- TextFixer
Ein kleines Styling geht weit
Nachdem Sie nun eine Basistabelle haben, müssen Sie zunächst CSS hinzufügen, um sie aus den 90ern zu entfernen. Natürlich können Sie verrückt werden und stundenlang mit verschiedenen Styling-Optionen experimentieren. Denken Sie jedoch daran, dass selbst ein wenig Farbe und Schriftstil die Lesbarkeit und Attraktivität des Tisches drastisch verbessern können.
Dies ist ein altes, aber immer noch relevantes Tutorial zum grundlegenden Tabellen-Styling mit CSS, das die Grundlagen behandelt.
Einen hervorgehobenen Abschnitt hinzufügen
Dies ist in Kalkulationstabellen extrem üblich, gilt jedoch für jede Tabelle. Denken Sie über die Informationen in der Tabelle nach und überlegen Sie, ob der Betrachter sich auf einen bestimmten Bereich konzentrieren soll. Egal, ob es sich um einen Plan mit dem besten Wert oder um ein beliebtes Element in einer Liste von Features handelt, ändern Sie die Farbe und / oder Größe, um sie vom Rest abzuheben.
Es gibt auf jeden Fall viele Möglichkeiten, den vorgestellten Bereich hervorzuheben. Hier einige Beispiele für Inspiration:
Farbunterscheidung
Größenunterscheidung
Farb- und Größenunterschiede
Machen Sie die Informationen sortierbar
Wenn Sie Tabellen mit vielen Informationen erstellen, die in mehreren Spalten angeordnet sind, empfiehlt es sich, eine Sortierfunktion hinzuzufügen, damit die Benutzer auswählen können, wie sie die Informationen strukturiert anzeigen möchten.
Mint.com integriert die Tabellensortierung in Ihre Transaktionsliste. So können Sie ganz einfach von einer datumsbasierten in eine kategoriebasierte Ansicht wechseln, sodass Sie Bereiche identifizieren können, in denen Sie viel Geld ausgeben.
Hier sind ein paar jQuery-Plugins, mit denen Sie diese Funktionalität schnell hinzufügen können:
- sorttable
- Tablesorter
Icons verwenden
Wie ich bereits gesagt habe, ist es das Ziel, Informationen in Tabellen zu organisieren, um sie auf einen Blick verständlich zu machen. Durch die Reduzierung des erforderlichen Wertes können gut entworfene Symbole die Geschwindigkeit, mit der ein Besucher die Informationen in Ihrer Tabelle erfassen kann, drastisch verbessern.
Vorsicht, das geht in beide Richtungen. Schlampige Symbole können dazu führen, dass Ihre Benutzer den Kopf kratzen, um herauszufinden, was Sie zu kommunizieren versuchen.
Zebrastreifen hinzufügen
Dies ist eine ziemlich grundlegende Idee, die bis insoweit besteht, als Informationstabellen existieren. Durch das Hinzufügen abwechselnder Zeilenfarben können Ihre Augen der Kommunikationslinie folgen und die schwebenden Informationen in der Mitte einer Tabelle mit der verankerten Kategorie an der Seite oder am Boden verbinden.
Diese einfache Technik kann die Lesbarkeit sowohl von großen als auch von kleinen Tabellen erhöhen. Es ist jedoch eine gute Faustregel, immer Streifen (oder andere visuelle Hilfsmittel) einzuschließen, wenn für den Tisch der Leser Informationen mit einem Durchmesser von mehr als einem Zoll oder mehr benötigt zwei voneinander entfernt.
Mit CSS ist das ganz einfach:
Minimal gehen
Hassen Sie den glänzenden Web 2.0-Look aus dem vorherigen Tipp? Kein Problem, es gibt ein noch stärkeres Argument für die Minimierung der Tabellengrafik. Dadurch kann sich der Benutzer ohne unnötige Ablenkungen auf den Inhalt konzentrieren. Verwenden Sie klare, subtile Rasterlinien (oder keine Linien), einfache Schriftarten und Farben, die einen schönen Kontrast zum Hintergrund bilden.
Suchfunktion hinzufügen
Manchmal reicht es nicht aus, eine Sortierfunktion hinzuzufügen.Wenn Sie Informationsseiten zum Sortieren haben, geht nichts über ein Suchfeld hinaus. Dies ist einfach genug, um mit jQuery zu streuen:
- So erstellen Sie eine Filter- / Suchtabelle
Überladen Sie den Tisch nicht mit Redundanzen
Wenn Ihre Tabelle Informationen nicht lesbarer macht, ist dies kontraproduktiv. App-Entwickler lieben es, riesige Funktionslisten zu präsentieren, und eine Tabelle ist auf jeden Fall ein natürlicher und sogar geeigneter Weg, um darüber nachzudenken. Manchmal packen Designer jedoch Tabellen mit einer Menge unnötiger, redundanter Informationen, die besser dargestellt werden könnten.
Schauen Sie sich das Beispiel oben von Invoice Machine an. Die vier angebotenen Pläne sind mit Ausnahme von drei Merkmalen nahezu identisch. Dadurch entstehen 15 unnötige Reihen, in denen die Augen vor und zurück springen, um die Häkchen mit der entsprechenden Funktion zu verbinden. Eine einfache Aufzählung oder ein Diagramm mit der Aufschrift? Alle unsere Pläne enthalten die folgenden Funktionen :? Benutzer könnten so schnell erkennen, dass sie unabhängig von ihrem gewählten Plan alle diese Funktionen erhalten.
Dann könnte der Tisch für Differenzierungsbereiche reserviert werden, wodurch sich die Anzahl der überschaubaren 3 oder 4 Reihen verringert. Lassen Sie mich nochmals betonen, dass Tabellen die Informationen lesbarer machen sollen. Wenn Ihr Tisch dieses Ziel nicht erreicht, ist dies kontraproduktiv.
Erstellen Sie erweiterbare Bereiche
Eine weitere großartige Funktion, die Sie Ihren Tabellen hinzufügen können, ist die Möglichkeit, bestimmte Zeilen zu erweitern. Auf diese Weise können Sie eine Menge Inhalt in einem relativ übersichtlichen Bereich platzieren. Mit einem jQuery-Plugin namens jExpand ist dies ziemlich einfach. Hier ist ein Tutorial von Jankoatwarpspeed, wie man es implementiert.
Wenn Sie eine erweiterbare Tabelle verwenden, müssen Sie lediglich sicherstellen, dass Ihre Überschriften eindeutig machen, wo bestimmte Informationen zu finden sind. Das letzte, was Sie wollen, sind verärgerte Benutzer, die jeden Abschnitt durchgehen, um herauszufinden, was sie wollen.
Beziehungen hervorheben
Dies ist eine Technik, die die Lesbarkeit einer komplexen Tabelle oder Matrix wirklich erhöht. Die Idee ist, die Zelle hervorzuheben, über die sich der Benutzer bewegt, und zwar sowohl in der Spalte als auch in der Zeile, zu der er gehört. Es ist nicht das einfachste, was man daraus ziehen kann, aber es ist durchaus möglich, mit etwas cleverem Code. Hier ist ein Beispiel, wie es geht.
Ich bin sicher, das ist mehr, als Sie über Tische im Webdesign wissen wollten. Verwenden Sie die Kommentare unten, um uns Ihre Meinung zu den oben genannten Techniken mitzuteilen und sicher zu gehen, dass Sie einzigartige Tische mit Ihnen teilen!