Usability-Probleme auf Websites und wie man sie vermeidet: Textlastige Seiten

Hintergrund

Informationen werden häufig in Form von langen Fließtexten vermittelt. Das hat zur Folge, dass Inhalte nicht vollständig gelesen werden und wichtige Informationen verloren gehen. Zudem leidet die Blickführung und Nutzende bekommen keine klaren Anhaltspunkte zur Orientierung.

Usability-Heuristik

Das verletzt die Heuristik „Ästhetisches und minimalistisches Design“. Die Heuristik besagt, dass nur wesentliche und notwendige Informationen geliefert werden sollten, die Nutzenden bei der Erreichung ihrer primären Ziele helfen.

Lösung

Um textlastige Seiten übersichtlicher zu gestalten, sollten Inhalte auf das Wesentliche reduziert, klar strukturiert und visuell unterstützt werden. Ziel ist es, Nutzenden eine schnelle Orientierung zu ermöglichen und wichtige Informationen auf einen Blick erfassbar zu machen.

Reduzieren und strukturieren

Zunächst lohnt es sich, die vorhandenen Texte kritisch zu prüfen: Welche Informationen sind für die Nutzenden tatsächlich relevant? Was kann gekürzt oder weggelassen werden? Anschließend können die verbleibenden Inhalte thematisch strukturiert werden. Zusammengehörige Informationen sollten dabei auch visuell als Einheit erkennbar sein, beispielsweise durch Abstände, Unterüberschriften oder unterschiedliche Hintergrundbereiche. Hierbei helfen auch die Gestaltgesetze, wie das Gesetz der Nähe, Geschlossenheit oder gemeinsamen Regionen.

Alternative Darstellung

Auch alternative Darstellungsformen können dazu beitragen, die Informationsdichte zu reduzieren. Je nach Inhalt bieten sich beispielsweise Tabellen, Aufzählungen, Kacheln, Icons, Grafiken oder klar voneinander abgegrenzte Inhaltsblöcke an. Dabei sollte jedoch nicht allein die visuelle Abwechslung im Vordergrund stehen, sondern die Frage, welche Darstellungsform das Verständnis der jeweiligen Information am besten unterstützt.

Visuelle Hierarchie

Darüber hinaus sollte die Blickführung bewusst gestaltet werden: Welche Informationen sind besonders wichtig und sollen zuerst wahrgenommen werden? Relevante Inhalte können beispielsweise durch eine auffällige Positionierung oder fett hervorgehobene Begriffe stärker in den Fokus gerückt werden (siehe auch Gesetz der Prägnanz). So entsteht eine visuelle Hierarchie, die Nutzenden dabei hilft, Inhalte schnell zu erfassen und sich auf der Seite zu orientieren.

Beispiel

Die Website des Deutschen Roten Kreuzes zu Blutspendediensten enthält viele Informationen, die auf unterschiedliche Weise dargestellt sind und z.B. durch Grafiken und Icons unterstützt werden (siehe Screenshot).

Fazit: Unsere Empfehlungen

• So viel Text wie nötig, so wenig wie möglich
• Inhalte thematisch strukturieren und z.B. durch Zwischenüberschriften voneinander abgrenzen
• Alternative Darstellungsformen einsetzen, z.B. Icons oder Kacheln
• Blickführung steuern, z.B. durch Fettmarkierung