Die übelsten Fehler im Design: aufgedeckt

Schlechte Navigation

Spezielle Designs bei der Navigation trifft man häufig an.  Geht es um das Menü, sind kreative Experimente jedoch fehl am Platz. Denn dieses dient primär dazu, sich schnell zurechtzufinden. Der Benutzer ist auf einer Webseite an schnell verfügbaren Informationen interessiert. Das Menü ist ein Werkzeug zum effizienten Erreichen dieses Ziels. Wenn Sie nun mit einer «kreativen» Navigationsumsetzung den Besucher erst dazu bringen, sich mit der Menüstruktur anstatt mit den Inhalten auseinander zu setzen, dann ist das verlorene Zeit: denn ein Benutzer entscheidet durchschnittlich innerhalb von vier Sekunden, ob er auf einer Webseite bleibt oder nicht.

Was ist denn eine gute Navigation? Bei den Benutzern kommt die Navigation im Kopfbereich am besten an. Dies kann zum Beispiel ein horizontales Menüs sein, das beim Drüberfahren aufklappt. Auch okay sind Menüs im linken Seitenbereich, wobei diese tiefere Klickraten aufweisen als erstere und in der mobilen Ansicht oftmals nicht richtig dargestellt werden.

Im mobilen Bereich hat sich das Sandwich-Menü (drei waagrechte Linien in der oberen rechten Ecke) durchgesetzt. Originelle Ideen, wie zum Beispiel Sandwichmenüs auf Desktop-Ansichten anzubringen, sind hingegen verfehlt.

Der falsche Einsatz von Schriften

Ein gutes Design wird schnell durch schlecht lesbare Texte ruiniert. Leider finden sich immer wieder Webseiten mit zum Beispiel grauer Schrift auf weissem Hintergrund. Während Designer hier eine dezente und unaufdringliches Darstellung umsetzen wollten, sind solche Texte für Benutzer schwer zu lesen. Die Web Content Accessibility Guidelines (WCAG) erlassen hierzu sogar genaue Standards zu Kontrastverhältnissen im WCAG Standard 2.0. Wem die Lektüre zu kompliziert ist, der kann seine Text-Kontraste ganz einfach mit dem Contrast Checker überprüfen. Das Tool untersucht den Kontrast des Textes und weist aus, ob die Schrift gut sichtbar ist.

Auch der verwendete Zeichensatz macht in Texten viel aus. Für eine gute Lesbarkeit am Bildschirm empfehlen sich Schriften ohne Serifen. Also Zeichensätze ohne die feinen waagrechten Linien, welche die Buchstabenstriche abschliessen. Schriften mit Serifen wie z.B. Times helfen in gedruckter Form die Buchstaben zu unterscheiden und Texte schnell zu lesen. Im Web ist die Auflösung der Inhalte aber unzureichend, um Serifen sauber darzustellen. Die Ränder der Buchstaben erscheinen ausgefranst und stören somit den Lesefluss.

Hat man die gute Schriftart gefunden, gilt es diese sinnvoll einzusetzen. Wichtige Passagen dürfen ruhig fett sein. Aber gestalten Sie nicht zu viele Passagen so, sonst wirkt es unruhig. Für die Hervorhebung sollten Sie keine Unterstreichung verwenden: die Web-Benutzer interpretieren das immer als einen Link. Auch kursiv ist tabu, auf Bildschirmen ist dies schwer lesbar. Bei der Schriftgrösse sollten Sie bedenken, dass eine Buchstabenhöhe von mindestens 14 Pixel heute Standard ist. So empfinden die Benutzer das Lesen am Bildschirm als angenehm.

Zu breite Inhalte

Ein No-Go beim Design sind Webseiten mit übergrossen Inhalten, die sich vom rechten Bildschirmrand bis zum linken ausdehnen. Bei zu breiten Texten hat der Benutzer nämlich Mühe mit dem Zeilenumbruch. Bis der Blick vom rechten Rand zum Zeilenanfang gesprungen ist, vergeht viel Zeit und es ist für den Benutzer anstrengend, die nächste Zeile wieder zu finden.

Visuelle Designelemente wie bildschirmfüllende Slider oder Galerien können jedoch durchaus die ganze Breite einnehmen. Die informativen Textelemente sollten sich hingegen immer auf einer überschaubaren Fläche befinden.

Was ist eine gute Darstellung? Ideal sind schmale Text-Inhalte, bei welchen der Benutzer die Zeilenlänge mit einem Blick erfassen kann. Somit kann er die Inhalte einer Webseite scannen, muss diese also nicht komplett durchlesen. Dies wiederum tönt paradox, möchte man dem Benutzer doch möglichst viele Informationen mitgeben. Man sollte aber davon wegkommen, seine Besucher mit Inhalten vollstopfen zu wollen und ihnen stattdessen die wichtigsten Informationen gut sichtbar präsentieren. Bei Gesamtdesigns haben sich für den Inhaltsbereich 1180 Pixel Breite durchgesetzt. Das ist in etwa so breit wie diese Blog-Seite. Dabei erstreckt sich die Länge einer Textzeile idealerweise auf maximal 2/3 der Seitenbreite.

‍