Die Macht der Basis – Konsistenz als Mittel für gutes Design und bessere Usability

Das Wort „Konsistenz“ aus dem Lateinischen bedeutet übersetzt: Bestand, Zusammenhalt, Geschlossenheit, In-sich-Ruhen und auch: strenger gedanklicher Zusammenhang.

Geschlossenheit bilden fällt oft auch bei Websites schwer. Dort tummeln sich viele Elemente, die unterschiedliche Gesichter haben und die Seite „bunt“ machen. Es gibt auch Funktionen und Links die gleich aussehen, sich aber anders verhalten, oder umgekehrt: Funktionen, die äußerlich ungleich sind, sich aber ähnlich verhalten.

Dies führt nicht nur dazu, dass eine inkonsistent gestaltete Website als hässlich empfunden wird, die fehlende funktionale Einheit auch mit anderen (bereits bekannten) Systemen schränkt die Usability ein. Denn erlernte Funktionen sind schon im Gedächtnis gespeichert, für ein neues Element/Verhalten müssen neue Verbindungen geschaffen werden.

Woher kommen Fehler in der Konsistenz?

Die meisten Websites haben auf ihrer Startseite weit mehr als 50 Elemente (funktionale und nicht-funktionale z.B. Text). Dabei gibt es Menübuttons, Textlinks und andere Buttons bzw. Funktionen, wie z.B. Schieberegler, die häufig ähnlich funktionieren aber anders aussehen. So entsteht schnell ein inkonsistentes Design. Dazu kommt, dass es immer noch wenige Normen fürs Web gibt und gewachsene Standards oft nicht eingehalten werden, so kommt es auch noch zu funktionaler Inkonsistenz.

Wie lassen sich diese Fehler vermeiden?

Es gibt verschiedene Möglichkeiten, inkonsistente Gestaltung zu vermeiden. Es sollte darauf geachtet werden, dass ähnliche Elemente ähnlich gestaltet sind. Und Funktionen mit unterschiedlichen Funktionen auch anders aussehen.

Auch unabsichtliche Ähnlichkeiten sollten vermieden werden. Dabei spielt Kontrast eine wichtige Rolle. Nicht nur in der Farbigkeit müssen sich Elemente deutlich voneinander unterscheiden, sondern auch bei Schriftarten und Schriftgrößen sollten merkliche Unterschiede sichtbar sein, um deutlich zu machen was zusammengehört und was sich vom anderen abheben soll. Schriftelemente sollten deshalb mindestens zwei PT (Punkt) Unterschied zum kleineren oder größeren Schriftzug aufweisen.

Beim Mischen vom Schriftarten gilt auch im Web, keine ähnlichen Typen zu mischen, z.B. zwei serifenlose Schriftfonts zu verwenden, wie Arial und Tahoma.
Visuelle Konsistenz lässt sich gut mit einem Styleguide und einem Raster verfolgen. So sind die Informationen für Folgeprojekte abgespeichert und ständig verfügbar.

Visuelle Konsistenz: alle Links sehen gleich aus (www.karrierebibel.de)

Funktionale Konsistenz erfordert viel Wissen über das Produkt. Es müssen möglicherweise mehrere Möglichkeiten durchgespielt werden um das richtige Verhalten für eine Elementgruppe zu finden.

Im Beispiel sind mehrere Buttons sichtbar, die die gleiche Funktion aufweisen und deshalb ähnlich aussehen. Beim Klick öffnet sich eine neue Seite mit anderen Inhalten. \r\nDabei wird niemals ein neuer Tab geöffnet oder auf eine externe Seite verlinkt.

Funktionale Konsistenz wird durch das Aufstellen von eigenen Begrenzungen erreicht. Diese sollten schon vor der konkreten Definition der Funktionen aufgestellt werden bzw. nachdem bei der Definition festgestellt wird, dass eine solche Regel notwendig ist.

Aber: zu viele Regeln schränken die Kreativität ein und verursachen einen Einheitsbrei. Deshalb sollte auch mit Regeln sparsam umgegangen werden.

Funktionale Konsistenz: Jeder Navigationspunkt blendet andere Inhalte ein. Hier ist auch eine visuelle Konsistenz in der Gestaltung der Navigationspunkte zu sehen und der ausreichend starke Kontrast in der Farbnavigation. (www.karrierebibel.de)

Für die externe Konsistenz, also Ähnlichkeit mit anderen Systemen, ist es notwendig diese zu kennen und ähnliche Elemente zu identifizieren. Dabei kann ein Benchmarking oder eine offene Recherche im Web helfen. Auch Metaphern entstehen so. Z.B. der Tab, der nur funktioniert, wenn er die Möglichkeiten der analogen Registerkarte nicht überschreitet, bzw. nur im bekannten Maß überschreitet. Werden Reiter mehrdimensional verwendet, versteht niemand die Funktion oder sie werden unübersichtlich.

Im Beispiel ist eine Navigation zu sehen die immer gleich funktioniert: Über den Link blenden sich die Inhalte ein.

Externe funktionale Konsistenz: Tabs funktionieren wie Registerkarten. Der Nutzer versteht schnell wie er damit umgehen muss. (www.karrierebibel.de)

Konsistenz ist eine der wichtigsten Gestaltungsregeln um eine Einheit zu schaffen. Die Konsistenz sollte nicht wg. anderer Punkte vernachlässigt werden. Mit ihr lassen sich schon viele Fehler vermeiden und im Voraus ausschließen.

Und zuletzt fällt es auch dem Nutzer auf, wenn eine Website durchdacht ist und eine Einheit bildet, denn dann macht es auch mehr Spaß diese zu bedienen.