In diesem Beitrag zeigen wir dir, was hinsichtlich der Konzeption und Gestaltung von Websites, in Bezug auf Layout und Design beachtet werden sollte.
Allgemeine Hinweise
Grundsätzlich gilt, dass ein benutzerfreundlicher Webauftritt, egal welcher Art, übersichtlich und kompakt sein soll. Der wichtigste Content sollte möglichst unmittelbar verfügbar und direkt erkennbar sein. Das Design der Website soll Seriosität vermitteln, gleichzeitig jedoch einladend, offen und freundlich wirken, um die User möglichst lange auf der Website zu behalten. Eine hohe Aufenthaltsdauer zeigt, dass der Content ansprechend ist.
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 individuellen Zielgruppe orientieren. Für wissenschaftliche Angebote, oder beispielsweise für den Webauftritt einer Arztpraxis, eignet sich eher ein dezenter Auftritt mit schlichten Farben. Ein zurückhaltender Einsatz von Farben wirkt in der Regel seriöser und zugleich eleganter. Auf der anderen Seite eignen sich beispielsweise für einen Lifestyle-Blog eher knallige, auffällige Farben. Dadurch lassen sich Kreativität, Freude und jugendliche Freshness treffend darstellen.
Farben können weiter auch dazu dienen, einzelne Inhalte hervorzuheben. Es lohnt sich also, diejenigen Inhalte, auf welche die User gelenkt werden sollen, farblich zu differenzieren. Natürlich soll dies konform zum übrigen Design geschehen.
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. Ein schlichter, einfarbiger Hintergrund hingegen wirkt sich positiv auf die Übersichtlichkeit aus. Weniger ist mehr!
Schriftgrösse & 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 empfehlenswert. Die Schriftgrösse sollte allerdings immer relativ angegeben werden, damit Nutzende die Browsereinstellungen verwenden können, um die Grösse selbst anpassen zu können. Sinnvoll kann es ausserdem sein, eine Funktion anzubieten, mittels derer User 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).
Spezielle Auszeichnungen bzw. Schriftattribute sollten gezielt, aber sparsam verwendet werden. Auch hier ist weniger oftmals mehr. 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.
Im Hinblick auf die Usability sind ausserdem die Zeilenlänge und der Zeilenabstand 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 den Usern 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-Mail-Adressen) 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 empfiehlt es sich, immer auch eine Linkfunktion einzubauen.
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, insbesondere bei einer bereits mangellhaften Internetverbindung. Eine längere Ladezeit senkt zudem den SEO-Score, d.h. die Website wird für Suchmaschinen unattraktiv und die Chance, bei einer Suche weit oben zu erscheinen, sinkt.
Wir empfehlen generell, mit Animationen sparsam und gezielt umzugehen. Zu viele Animationen können den User überfordern und die Website unübersichtlich machen. Für die Umsetzung ist es sinnvoll, sich auf plattformunabhängige Technologien wie JavaScript bzw. jQuery zu konzentrieren.