12.04.2021 | Druckansicht
Deutsch

Layout & Design

In diesem Abschnitt wird hinsichtlich der Konzeption und Gestaltung von Bibliothekswebsites beschrieben, welche Aspekte in Bezug auf Layout und Design beachtet werden sollten. Wichtig sind in diesem Kontext bspw. Farbgebung und Kontraste sowie Schriftarten und -grössen.

Allgemeine Hinweise

Wesentlich für die Gestaltung bibliothekarischer Online-Angebote sind die Übersichtlichkeit und Kompaktheit des gewählten Ansatzes. Die wichtigsten Inhalte/Funktionalitäten sollten möglichst unmittelbar verfügbar und direkt erkennbar sein. Das Design der Website soll Seriosität vermitteln, gleichzeitig jedoch offen und freundlich wirken, um einen niederschwelligen Zugang sicherzustellen. Ein gutes Beispiel hierfür ist der Webauftritt der Deutschen Digitalen Bibliothek (DDB).  

Startseite der Webseite der DDB - www.ddb.de

Verwendung von Farben

In Bezug auf die Verwendung von Farben ist vor allem auf einen guten Kontrast zwischen Hintergrund- und Schriftfarben zu achten. Die Farbwahl sollte sich dabei an der Zielgruppe orientieren. Für wissenschaftliche Angebote eignen sich in diesem Kontext eher dezente Farben. Ein zurückhaltender Einsatz von Farben wirkt in der Regel seriöser und zugleich eleganter. Darauf aufbauend kann mittels auffälligeren Farbtönen die Aufmerksamkeit der Leser zu wichtigen Inhalten/Bereichen gelenkt werden.

Seitenhintergrund

Von Bildern und Mustern im Seitenhintergrund ist in der Regel eher abzuraten. Diese verursachen häufig ungleichmässige Kontraste. Zudem wird der Blick vom Text abgelenkt, was letztendlich die Lesbarkeit verschlechtert.

Schriftgrösse und Schriftart

Neben der Schriftfarbe bzw. dem Kontrast hat vor allem die Schriftgrösse einen entscheidenden Einfluss auf die Lesbarkeit der Inhalte. Für Fliesstexte ist als Minimalwert eine Schriftgrösse von 12 bis 14 Punkt zu empfehlen. Die Schriftgrösse sollte allerdings immer relativ angegeben werden, damit Nutzer die Browsereinstellungen verwenden können, um die Grösse an ihre eigenen Präferenzen anzupassen. Sinnvoll kann es ausserdem sein, eine Funktion anzubieten, mittels derer Anwender selbstständig eine Vergrösserung bzw. Verkleinerung der Texte vornehmen können. Diese sollte möglichst gut sichtbar positioniert werden (z.B. links oder rechts oben).

Beispiel einer Schriftgrössenanpassung - www.informationskompetenz.ch

Spezielle Auszeichnungen bzw. Schriftattribute sollten effizient aber sparsam verwendet werden. Wichtige Begriffe können z.B. durch Fettdruck oder farblich hervorgehoben werden. Bei der Verwendung von Farben ist jedoch auf eine klare Unterscheidbarkeit gegenüber Hyperlinks zu achten. Unterstreichungen eignen sich daher nicht für Hervorhebungen, weil diese im Web generell mit Links assoziiert werden.

Bezüglich der Wahl der Schriftarten sind solche zu bevorzugen, die bei einem möglichst grossen Anteil der Leser standardmässig vorhanden sind. Bei Serifenschriften sind dies Times New Roman bzw. Times sowie Georgia. Unter den serifenlosen Schriften sind Arial, Helvetica und Verdana am meisten verbreitet. Um einen Kontrast zwischen Fliesstexten und Überschriften zu erzeugen, bietet es sich an für den Fliesstext eine serifenlose Schrift zu verwenden und für Überschriften eine Serifenschrift (oder umgekehrt). Generell sollte man sich stets auf wenige Schriftarten beschränken. Eine Schriftart für Überschriften, eine für Fliesstext und eine für Menüs reichen aus.

Mit Hinblick auf die Usability sind ausserdem die Zeilenlänge und der Zeilanabstand von Bedeutung. Zudem erleichtern die Unterteilung der Texte in kurze Absätze und die Verwendung von Zwischenüberschriften das Lesen.

Icons

Obwohl Icons auf Websites sehr häufig verwendet werden, werden nur die wenigsten von Anwendern unmittelbar verstanden. Eine Ausnahme sind in diesem Kontext lediglich Icons, die gewohnheitsmässig mit festen Bedeutungen assoziiert werden. Beispiele sind Drucker-Icons (Print-Version), Lupe-Icons (Suche), Brief-Icons (E-Mailadressen) sowie Flaggen (Sprachwechsel).

Icons sollten daher möglichst immer mit einer Beschriftung (Label) versehen werden. Zudem werden Icons häufig als Schaltflächen verwendet. Daher kann ihr Gebrauch ohne Linkfunktion ggf. Probleme verursachen.

Multimedia-Elemente und Animationen

Mit Hilfe von Multimedia-Elementen und Animationen können Websites visuell aufgewertet und deren Ausdruckskraft erhöht werden. Sie können jedoch auch die Ladezeiten verlängern, gerade bei einer eingeschränkten Konnektivität (z.B. im mobilen Bereich).

Generell sollten Animationen nur sparsam verwendet werden und nur dort wo sie auch wirklich Sinn machen. Für die Umsetzung sollte man sich auf plattformunabhängige Technologien wie JavaScript bzw. jQuery konzentrieren.