Usability-Probleme auf Websites und wie man sie vermeidet: Fehlende Konsistenz

Hintergrund

Immer wieder werden auf Websites Elemente mit der gleichen Funktion unterschiedlich gestaltet – beispielsweise Buttons, Infoboxen oder Überschriften derselben Hierarchieebene.

Auch Begrifflichkeiten sind teilweise inkonsistent, d.h. dieselbe Sache, Funktion oder Seite wird innerhalb der Website unterschiedlich bezeichnet.

Dadurch müssen Nutzende Sprach- und Interaktionsmuster immer wieder neu erlernen. Elemente oder Begriffe, die eigentlich bereits bekannt sind, werden möglicherweise nicht als solche wiedererkannt. Das kann dazu führen, dass Nutzende Inhalte oder Funktionen übersehen und sich schlechter auf der Website orientieren können.

Usability-Heuristiken

Damit werden folgende Heuristiken verletzt:

• „Konsistenz und Standards“: Begriffe, Elemente, Aktionen etc. sollten innerhalb einer Website konsistent sein. Ebenso sollten Prinzipien, die sich grundsätzlich auf Websites bewährt haben, auch auf der eigenen Website beachtet werden. So können Nutzende bereits gelernte Muster anwenden und ihre Gedächtnislast wird reduziert.
• „Wiedererkennen statt Erinnern“: Elemente, Aktionen und Handlungsoptionen sollten erkennbar gestaltet sein. Nutzende sollten sich keine Informationen oder Funktionsweisen der Bedienelemente merken müssen, sondern diese Informationen sollten direkt ablesbar sein.

Lösung

Website-Elemente vereinheitlichen

Zunächst sollten wiederkehrende Elemente identifiziert werden. Dazu gehören beispielsweise Buttons, Links, Infoboxen, Eingabefelder oder Navigationselemente. Für diese Elemente sollten einheitliche Design- und Interaktionsregeln festgelegt werden. So sollte beispielsweise ein Button, der eine bestimmte Aktion auslöst, auf der gesamten Website gleich aussehen und funktionieren.

Nach dem Gestaltgesetz der Ähnlichkeit werden diese einheitlich aussehenden Elemente dann auch als zusammengehörig wahrgenommen.

In manchen Fällen kann es auch sinnvoll sein, verschiedene Varianten von Elementen zu definieren, die sich visuell leicht unterscheiden – beispielsweise primäre und sekundäre Buttons. Wichtig ist dabei, dass der Variation ein klares Konzept zugrunde liegt und dass das Verständnis und die Bedienung damit unterstützt werden.

Stile für Überschriften und Texte definieren

Überschriften sollten klaren Hierarchieebenen zugeordnet werden. Dieselbe Ebene sollte auf der gesamten Website gleich dargestellt werden. Zur Unterscheidung der Ebenen kann z.B. die Schriftgröße oder -stärke variiert werden.

Auch für Texte sollte je Kontext ein einheitlicher Stil definiert werden, z.B. für reguläre Texte, Banner oder Kacheln.

Begriffe vereinheitlichen

Dieselbe Sache, Funktion oder Seite sollte immer gleich bezeichnet werden. Hierunter fallen z.B. auch Leistungen des Unternehmens, Fachbegriffe aus der jeweiligen Branche oder Aktionen wie „Download“.

Regeln festhalten

Es empfiehlt sich, definierte Regeln beispielsweise in Form eines Designsystems festzuhalten, um sie auch weiterhin konsequent anwenden zu können.

Konsistenz gilt nicht zwingend für Seitenlayouts

Konsistenz bedeutet nicht, dass alle Seiten identisch aufgebaut sein müssen. Ist dies der Fall, kann es für Nutzende sogar schwieriger werden zu erkennen, wenn sich die Seite verändert. Entscheidend ist vielmehr, dass Elemente mit gleicher Funktion auch gleich aussehen und bedient werden können.

Beispiel

Die Website der Stadt Wiesbaden zeigt, wie wiederkehrende Gestaltungselemente inmitten unterschiedlicher Inhalte und Seitentypen Orientierung schaffen können (siehe Screenshots).

Fazit: Unsere Empfehlungen

• Elemente mit gleicher Funktion einheitlich gestalten und bedienen
• Überschriften klaren Hierarchieebenen zuordnen und einheitlich darstellen
• Textstile je Kontext vereinheitlichen
• Dieselbe Sache, Funktion oder Seite immer gleich bezeichnen
• Definierte Regeln festhalten, um sie auch zukünftig anwenden zu können