Gesetz der Kontinuität für Webdesign

Versehentliche Einrückungen

Das Auge liebt beim Lesen von Texten eine gerade Linie nach unten. Jetzt fragt man sich natürlich, woher kommen versehentlichen Einrücken und welcher Vollpfosten macht so etwas gezielt in einen Text? Keiner macht das gezielt in einen Text! Es passiert einfach – und dass öfters wie man denkt. Und das mit großer Vorliebe bei Aufzählungen.

Und wenn man genau ist, es eine Ausrückung, die sehr oft passiert. Hier ein typisches Beispiel, das bei Aufzählungen passiert. Die Aufzählungspunkte sind nach links verrückt und der Text bildet eine unschöne Ausbuchtung (wie eine Pestbeule).

Im folgende Beispiel wurde der Text extra undeutlich gemacht, dass der Inhalt nicht vom Effekt ablenkt:

Jetzt fällt es auf, dass die fluchtende Linie von oben nach unten durchkreuzt wird.

Weniger auffallend aber auch nicht wirklich schön ist, wenn die Aufzählungen zu weit nach rechts eingerückt sind:

Am besten ist das „leise“ Design, wenn die Aufzählungspunkt direkt auf der fluchtenden Linie sitzen:

Natürlich kann ein Gegenargument sein, dass man die Aufzählung besonders deutlich hervorheben möchte und dieses deshalb eingerückt ist. Das ist ja Ok, wenn man das nicht versehentlich macht ;)

Warum gerade bei Aufzählungen?

Warum sind gerade Aufzählungen so anfällig für diese Designsünde? Das wiederum liegt an der Technik von CSS. Hier wird normalerweise ein Reset der Vorgaben gemacht, damit nicht merkwürdige Einstellungen des Browsers ins Design spucken. Da wird dann auch der Abstand, die Aufzählungszeichen halten sollten, gekillt und somit kommt es zu einer negativen Einrückung (wie beim Beispiel 1).

Hier muss also extra auf Aufzählungen im CSS die Einrückung definiert werden.

* {
    margin: 0;
}

ul, ol {
    margin-left: 1em;
}

Der zweite Fall ist, dass die Aufzählungspunkte nicht auf der Fluchtlinie des Textes sitzen. Hier wird gerne im CSS versehentlich die Abstände nicht korrekt angegeben bzw. mit absoluten anstelle von relativen Einheiten gearbeitet.

Sprich irgendwelche Versuche mit Pixel, die dann spätestens schiefgehen, wenn die Schriftgröße geändert wird.

Daher bitte mit relativen Einheiten wie em arbeiten – zur Erinnerung. 1 EM entspricht flapsig gesagt 1 Buchstabenbreite. Daher fluchtet die Aufzählung auch sauber, wenn man den Randabstand mit 1em angibt.

Welches Gesetz aus der Gestaltpsychologie steckt denn da dahinter?

Gesetz der Kontinuität für Webdesign

Was besagt in der Gestaltpsychologie dieses Gesetz der Kontinuität? Nichts Anderes, als dass Elemente, die entlang bekannter Formen angeordnet sind, als eher zusammenhängend wahrgenommen werden. Dabei können bekannte Formen eine Linie (in unserem Fall am Text die vordere Linie) oder auch ein Kreis sein (man denke nur einmal an ein Uhrenblatt).

Beachten wir also das Gesetz der Kontinuität (auch bei der Einrückung von Aufzählungen), dann wirkt unser Text zusammenhängend und harmonisch. Brechen wir das Gesetz der Kontinuität, erzeugen wir Aufmerksamkeit beim Leser unter Umständen an einer Stelle, die gar keine Aufmerksamkeit verdient hat bzw. nicht mehr Aufmerksamkeit wie der Text davor und danach.

Einfach einmal ausprobieren, wie die Wirkung bei einem eigenen Text ist!