Wie gut Texte online lesbar sind, hängt wesentlich vom Text-Design bzw. Struktur & Gestaltung ab. Dazu gibt es einige Regeln, die über das bloße Layout und den Inhalt hinausgehen. Beim Text-Design stehen vor allem Lesbarkeit und Verständlichkeit im Fokus. Und genau diese 2 Aspekte kannst – nein, musst du – mithilfe von inhaltlichen und formalen Gestaltungsmitteln optimieren.
2 triftige Gründe, Texte lesbar zu gestalten
Die Text-Gestaltung gehört zu den SEO-Basics
Gut gestaltete Texte erleichtern Menschen das Lesen und die Orientierung. Aussagekräftige Überschriften, nachvollziehbare Abschnitte und passende Hervorhebungen helfen gerade am Bildschirm, wichtige Informationen zu finden.
Suchmaschinen benötigen außerdem eine technisch zugängliche Seite und verständlich ausgezeichnete Inhalte mit H-Tags etc.
Grundprinzip Internettext:
Mission Informationsvermittlung
Ja, auch die Texter-Ethik wollen wir hier nicht vernachlässigen. Nach Definition der Informationswissenschaft sind Texte da,
„um gelesen und verstanden zu werden“ (virtuelles Handbuch der Informationswissenschaft).
Sie sollen Wissen vermitteln, und zwar so, dass der Leser den Inhalt begreift. Leserlichkeit und Verständlichkeit hängen also zusammen. Egal, ob du Blogger, Autor, Website-Texter oder Content-Manager bist – Texte müssen immer mit Blick auf den Leser geschrieben und gestaltet werden.
Vgl. auch » Human Centric SEO: Warum Algorithmen Menschlichkeit suchen + Suchmaschinen-Empathie: Was deine Kunden wirklich fragen
UX-Faktor Lesbarkeit
Leider ein echtes Problem bei Online-Texten
Warum verlassen Besucher eine Website wieder? Schlechte Lesbarkeit kann ein Grund sein – neben unpassenden Inhalten, technischen Problemen oder einem Angebot, das nicht zu ihrer Suche passt. Das Textbild beeinflusst, wie leicht Menschen Informationen wahrnehmen und sich auf der Seite orientieren können.
Das visuelle und typografische Design des Textes wird immer als Erstes wahrgenommen. Im 2. Schritt kommt dann der Inhalt.
Das Textbild beeinflusst den Betrachter darin …
ob er den Text lesen möchte
ob er den Text entschlüsseln kann
wie er den Text versteht
So weit, so klar. Doch was bedeutet denn eigentlich, gut lesbar?
4 Gesetze der Gestaltungspsychologie
Die sogenannte Gestaltpsychologie beschäftigt sich damit, wie Menschen Reize und komplexe Szenarien wahrnehmen. 4 Gesetze helfen zu verstehen, warum bestimmte Designs gut oder schlecht ankommen bzw. gut oder schlecht lesbar sind.
Gesetz der Nähe
Liegen Dinge räumlich nahe beieinander, nehmen wir sie als zusammengehörig wahr. Dinge, die eine Distanz zueinander aufweisen, wirken auf Auge und Gehirn als unabhängige Einheiten. Das betrifft nicht nur den Text. Auch Buttons, Grafiken und Links sind wesentliche Elemente.
Gegen das Gesetz der Nähe solltest du nicht verstoßen. Denn es könnte fatale Auswirkungen auf die Verständlichkeit von Texten haben:
Aus den Beispielen wird vor allem deutlich: Leere wird von unseren Augen als Information verwertet. Daher lassen sich durch Leerstellen, Webseiten-Inhalte sinnvoll ordnen und besser lesbar machen.
Gesetz der Ähnlichkeit
Sind sich Dinge ähnlich, nehmen wir sie als zusammengehörige Gruppe wahr. Unterscheiden sich Objekte in wichtigen Merkmalen, empfinden wir sie als getrennt und voneinander.
Klingt logisch, oder? Wichtig: Die Ähnlichkeit kann auf Farbe, Textur, Helligkeit, Größe, Bewegungsrichtung, Geschwindigkeit etc. basieren.
Je mehr Ähnlichkeiten Dinge miteinander teilen, umso stärker ist unser Drang, sie zu kategorisieren. Das Gesetz der Ähnlichkeit findet sich recht häufig im Design von Webseiten. Ein anschauliches Beispiel für die gelungene Gestaltung ist zum Beispiel Amazon oder Thalia.de:
Die durchgehend grüne Button-Farbe symbolisiert »ich bedeute immer dasselbe«, ebenso wie die Farbe der Bewertungssterne unter dem SEO Titel. Gleiche Elemente haben gleiche Bedeutung und so findet sich der User intuitiv zurecht. Anders wirkt das Bild, wenn die Buttons unterschiedliche Farben hätten, alle jedoch zum Download führen. Die Struktur wirkt unruhig, ungeordnet und völlig sinnlos.
Wie du Texte, Entscheidungshilfen und Buttons auf einer Angebotsseite zusammenführst, erklärt der Beitrag zum Aufbau einer Landingpage.
Gesetz der Geschlossenheit
Elemente mit geschlossenen Umrissen oder einer Umrahmung fassen wir als zusammengehörige Gruppe auf. Werden Dinge durch Linien getrennt, wirken sie nicht so, als würden sie zueinanderpassen.
Mit diesem Gestaltungsprinzip lassen sich
Infos ordnen
Zusammenhänge verdeutlichen
und Orientierungsmarker setzen
Bereits die Andeutung einer Geschlossenheit genügt, unser Auge ergänzt die fehlenden Linien automatisch. Begrenzungen, Farben und Schattierungen müssen daher gut durchdacht sein, um nicht zu verwirren. Hier ein Beispiel von Focus:
Gesetz der Fortsetzung
Sind Dinge an einer durchgehenden Linie oder Kurve aufgereiht, bilden sie in unserer Wahrnehmung eine Gruppe. Sie gehören zusammen.
Natürlich muss es keine Kurve sein. Spalten, Zeilen, Fluchtlinien, Geraden bewirken das Gleiche.
Texte gestalten mit Hilfe von Farb-Assoziationen
Farben können Assoziationen wecken und den Charakter einer Website prägen. Welche Wirkung sie entfalten, hängt aber auch von Kontext, Kultur und Gestaltung ab. Strandbeige und Ozeanblau können zu einem Reiseanbieter passen; eine Bank muss deshalb nicht automatisch dunkelblau auftreten.
Die folgenden Begriffe zeigen mögliche Assoziationen, keine festen Bedeutungen. Für die Textgestaltung sind ausreichender Kontrast und ein konsistenter Farbeinsatz wichtiger als eine vermeintlich perfekte psychologische Farbwahl.
Liste der Farben und ihrer Effekte
Rot
Blut, Vitalität, Gefahr, Liebe, Leidenschaft
Orange
Freude, Spaß, Tatkraft, Ausdauer, MotivationGelb
Reife, Wärme, Sonne, Kraft, ErfolgGrün
Wachstum, Hoffnung, Entspannung, Ruhe
Blau
Harmonie, Zufriedenheit, Frieden, SouveränitätViolett
Selbstbezogenheit, Mystik, Magie, LuxusWeiß
Reinheit, Ordnung, LeichtigkeitSchwarz
Trauer, Wandel, Loslassen
Die Schriftfarbe ist für die Lesbarkeit wichtig
Die Farbe der Schrift sollte sich kontrastreich vom Hintergrund abheben, um gut lesbar zu sein. Daneben ist auch der Helligkeitskontrast entscheidend. Mittlerweile können auch CMS den Kontrast messen und geben Warnungen bei unzureichender Differenz.
Text-Format: Online-Inhalte gestalten
Gute Website-Texte brauchen passende Bilder und aussagekräftige Überschriften, um Spannung oder Neugier zu erzeugen. Beitragsbild und Headtitel gehören zu den Gründen, warum die einen Online-Texte gelesen werden und die anderen nicht. Das sind aber nicht die einzigen Faktoren, die in der Textgestaltung bzw. beim professionellen Texten zählen …Vgl. Text Chunking
Satzlänge
15–20 Wörter können beim Überarbeiten ein grober Orientierungswert sein. Ob ein Satz verständlich ist, hängt jedoch auch von seinem Aufbau, den verwendeten Begriffen und dem Vorwissen der Leser ab.
Natürlich machen immer gleich lange Sätze noch keinen guten Text. Das wirkt eher so, als litte der Autor an Buchstaben-Asthma. Halte deine Leser auf Trab. Ein lockeres Switchen zwischen kurzen und langen erhält die Spannung aufrecht.
Formatierungen
Kurze und mittellange Sätze, überschaubare Absätze und aussagekräftige Zwischenüberschriften erleichtern die Orientierung in Online-Texten. Auf diese Weise erhält der Text eine Struktur, an der sich das Auge wie an einem Faden hinabhangeln kann.
Dazu zählen auch Formatierungen wie Fettungen, Kursiv, Unterstriche oder Durchgestrichen. Nach dem Gesetz der Ähnlichkeit solltest du dich für 1–2 Arten der Hervorhebung entscheiden und diese konsequent beibehalten. Setzt du zu viele Varianten ein, verliert das Stilmittel seine Wirkung.
Apropos Text-Marker:
GROSSBUCHSTABEN können kurze Wörter oder Labels hervorheben. Ganze Sätze oder Absätze in Versalien erschweren dagegen häufig das Lesen. Setze sie deshalb sparsam ein.
Schrift
Schon eine gut lesbare Schriftfamilie kann für eine Website ausreichen. Eine zweite kann Überschriften und Fließtext unterscheiden. Mehr Schriftarten schaffen nicht automatisch mehr Übersicht.
Wichtig ist, dass die Schriften zusammenpassen und auch in kleinen Größen gut lesbar bleiben. Unterschiede lassen sich ebenso mit Schriftgröße, Gewicht und Abstand herstellen. Eine Kombination aus Serifenschrift und serifenloser Schrift ist eine Möglichkeit, keine Pflicht. Tipp: Mit dem Web Fonts Combinator kannst du herausfinden, welche Schriften zusammenpassen.
Zeilenabstand & Zeilenlänge
Es ist schlau, den Textlauf auf eine bestimmte Länge zu begrenzen. Läuft der Text über die gesamte Seitenbreite, ist er schlechter lesbar. Die Gründe:
Es fällt schwerer, den Anfang der nächsten Zeile zu finden.
Der Kopf muss beim Lesen mitbewegt werden – sehr unangenehm. (Und die meisten User suchen sich lieber eine andere Seite)
Für längere Fließtexte am Desktop können etwa 60–80 Zeichen pro Zeile ein Ausgangspunkt sein. Auf dem Smartphone sind die Zeilen meist kürzer. Prüfe deshalb Schriftgröße, Textbreite und Zeilenabstand gemeinsam auf unterschiedlichen Bildschirmgrößen. Ein Zeilenabstand von etwa 1,5 kann als Ausgangspunkt dienen. Entscheidend ist, ob sich die Zeilen gut verfolgen lassen und der Text auch beim Vergrößern lesbar bleibt.
Das alles sind Orientierungswerte, nicht die Kabbala des Online-Textens.
Bitte beachte: Das sind alles Orientierungswerte und nicht die Kabbala des Online-Textens.
Absatzlänge
Ein Absatz sollte einen zusammenhängenden Gedanken entwickeln. Wird er unübersichtlich, prüfe, ob du ihn sinnvoll teilen kannst. 3 bis 5 Zeilen können am Desktop angenehm sein – auf dem Smartphone wird derselbe Absatz schnell länger. Die Zeilenzahl allein ist deshalb kein verlässlicher Maßstab.
Natürliche Sprache
Die wichtigste Regel im Text-Design! Schreib in der Sprache deiner Leser. Das bedeutet: einfach, natürlich und klar. Dann verstehen die Leute auch, was du ihnen sagen willst. Und das Lesen am Bildschirm ist um einiges angenehmer.
Vgl. auch SEO-Texte schreiben (Tipps für Anfänger)
