Die 5 häufigsten Usability Fehler im Webdesign – so können Sie sie vermeiden

Gastbeitrag geschrieben von Kolja Rusteberg von der Leipziger Digitalagentur 10xstudio.co.

Website Usability hat in den letzten Jahren immer mehr an Bedeutung im Web-Design gewonnen. Und das zu Recht. Denn die Usability einer Seite ist maßgeblich für den Erfolg oder Misserfolg dieser verantwortlich.

Die Usability beschreibt die Benutzerfreundlichkeit einer Website. Können neue Nutzer Ihre Webseite intuitiv und effektiv bedienen oder müssen sie sich erst durch viele Unterseiten kämpfen, um die Informationen zu bekommen, nach denen sie suchen?

In diesem Artikel zeigen wir Ihnen die häufigsten Usability Fehler, die uns tagtäglich begegnen. Diese sollten Sie unbedingt vermeiden, denn Fehler bei der Benutzerfreundlichkeit können sich direkt auf Ihre Conversions auswirken.

1. Interaktive Elemente sind nicht offensichtlich klickbar

Die meisten Fehler können Sie bereits vermeiden, wenn Sie sich an gängige Web-Design Konventionen halten. Häufig werden jedoch gerade diese Konventionen von Designern als unkreativ angesehen. Daraus resultieren meist zwar optisch gut aussehende Webseiten, allerdings sorgen diese nicht selten für Verwirrung und Frust bei den Nutzern.

Einer der schwerwiegendsten Fehler im Web-Design ist es, wenn interaktive Elemente oder Links als solche nicht zu erkennen sind.

Oft wird vergessen, dass Hover-Effekte, welche eine mögliche Interaktion anzeigen sollen, auf Mobilgeräten nicht funktionieren. Bei mittlerweile etwa 75% Mobile Traffic in Europa (2019) ein großes Problem.

Außerdem sollten Sie darauf achten, Links in Texten als solche erkennbar zu machen. Durch eine Unterstreichung des entsprechenden Textabschnitts oder besser noch einer klaren und wiedererkennbaren Linkfarbe, machen Sie Ihren Besuchern das Leben wesentlich leichter.

Eine wichtige Grundregel für gute Usability lautet:

Ein Benutzer sollte niemals auch nur eine Millisekunde darüber nachdenken müssen, ob etwas anklickbar ist – oder nicht.

2. Zu lange, nicht scanbare Textblöcke

Besonders auf Webseiten neigen Nutzer dazu, die Inhalte nicht vollständig zu lesen, sondern nur zu überfliegen. Oft suchen sie nur nach einer ganz speziellen Antwort und wollen nicht jede Zeile lesen müssen, um diese zu erhalten. Darum ist es wichtig, die Textblöcke auf einer Webseite so zu formatieren, dass sie einfach zu scannen sind.

Bei welcher der beiden Versionen würden Leser schneller zu dem Paragrafen finden, der für Sie interessant ist?

Hier ein paar Tipps, mit denen Sie Ihre Texte lesefreundlicher gestalten:

• Schaffen Sie visuelle Hierarchien durch Textgrößen und -farben sowie Abständen
• Heben Sie wichtige Informationen hervor, indem Sie diese fett schreiben
• Nutzen Sie Stichpunkt-Listen wenn es sich anbietet
• Fügen Sie Absätze ein und beschränken Sie sich auf eine Aussage pro Absatz
• Nutzen Sie unterstützende Bilder und Grafiken

Quelle: https://speckyboy.com/ethics-ui-design-avoiding-dark-patterns/

3. Keine Suchfunktion

Da viele Nutzer auf der Suche nach bestimmten Informationen auf eine Webseite kommen, ist es wichtig ihnen die Möglichkeit zu geben, direkt dorthin zu gelangen.

Das bedeutet natürlich nicht, dass jede Webseite eine Suchleiste benötigt. Kleinere Webseiten und einseitige Projektseiten würden den Nutzern mit einer Suchleiste keinen Vorteil bieten.

Falls Sie jedoch einen Blog oder eine Webseite mit vielen Inhalten betreiben, ist die Suchfunktion meist die erste Anlaufstelle für Ihre Nutzer.

Wenn Sie noch keine Suchfunktion auf ihrer Seite integriert haben und WordPress verwenden, können Sie diese Funktionalität ohne großen Aufwand implementieren. Aber auch alle anderen gängigen CMS Systeme bieten in der Regel eine eingebaute Suchfunktion, die Sie lediglich aktivieren müssen.

4. Die Seite ist nicht mobile optimiert, sondern lediglich responsive

In den meisten Fällen werden Webseiten leider immer noch vorrangig für Desktop-Nutzer erstellt und anschließend für Mobilgeräte angepasst. Mittlerweile gelangen allerdings mehr Nutzer über das Smartphone auf eine Webseite. Aus diesem Grund sollten Webseiten auch in erster Linie für Mobile-Nutzer ausgerichtet und im responsive Webdesign umgesetzt werden.

Immer wieder kommt es zu nicht lesbaren Texten auf Grafiken, da diese zu klein auf den Bildschirmen der Handys angezeigt werden. Solche kleinen Probleme, denen Nutzer auf mobilen Endgeräten immer wieder begegnen, sind ärgerlich und trüben den Gesamteindruck.

Um das zu beheben muss eine Webseite zum Glück nicht komplett neu entworfen werden. Die einzelnen Seiten, insbesondere die mit dem meisten Traffic, sollten jedoch nochmal aus der Sicht eines Smartphone Nutzers neu überprüft und gegebenenfalls angepasst werden.

5. Zu lange Ladezeiten

Eine langsam ladende Webseite sorgt nicht nur für ein schlechtes Nutzererlebnis, sondern wirkt sich auch extrem auf die Sichtbarkeit in Suchmaschinen und die Conversion-Rate aus. Das ist besonders für Betreiber eines Onlineshop, die von ihren Conversions abhängig sind, fatal.

Laut einer Studie von Google erwarten Nutzer, dass eine Seite innerhalb von 3 Sekunden lädt. Sobald diese Grenze überschritten ist, verlassen im Schnitt bereits 53 Prozent der User die Seite wieder.

Grund genug, die eigene Webseite mit einem Tool zur Messung der Ladegeschwindigkeit wie beispielsweise GTMetrix oder Google Page Speed zu überprüfen und gegebenenfalls zu optimieren. Gerade Nutzern von WordPress stehen hierfür eine Reihe an praktischen und einfach zu handhabenden Tools zur Verfügung.

Abschließende Worte

Die oben genannten Fehler beeinträchtigen das Nutzererlebnis und machen den Unterschied zwischen einer durchschnittlichen und einer hochklassigen Webseite aus. Darum sollten Sie sich, Ihren Nutzern und Ihrer Conversion Rate zu liebe, in erster Linie auf ein positives Nutzererlebnis statt auf ein ausgefallenes Design konzentrieren. Versuchen Sie nicht, das Rad bei Dingen neu zu erfinden, die bereits als Konventionen akzeptiert werden.

Das in diesem Beitrag verwendete Beitragsbild ist der Fotodatenbank von Pexels.com entnommen. Damit fällt das genutzte Bild unter die Creative Commons Zero (CC0) Lizenz und kann somit frei genutzt werden. Die Quellen der anderen in diesem Beitrag verwendeten Bilder sind entsprechend als Bildunterschift am jeweiligen Bild aufgeführt oder sind eigens von mir erstellte Screenshots.