Textgestaltung – Design & Struktur für mehr Lesbarkeit & Wirkung
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
Ebenso wie deine Leser, Besucher, Kunden etc. achtet auch die Suchmaschine auf die Lesbarkeit von Online-Texten. Ist ein Text gut lesbar, finden sich User und Google Bot leichter zurecht auf deiner Website. Mehr erfahren » SEO-Texte schreiben lassen sowie SEO-Texten: Suchmaschinenoptimiertes Schreiben
Google ist zwar schlau – verdammt schlau – aber immer noch eine Maschine. Wir müssen ihr also die richtigen Signale geben, damit sie den Inhalt einer Website überhaupt sinnvoll einordnen kann. Diese Signale kommen vor allem der Wahrnehmung und dem Verständnis von Menschen zugute.
Grundprinzip bei Internettexten:
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.
UX-Faktor Lesbarkeit
Leider ein echtes Problem bei Online-Texten
Warum verschwinden so viele Besucher wieder schneller von einer Website, als sie gekommen sind? In den meisten Fällen aufgrund einer schlechten User Experience. Und die beginnt schon bei den einfachsten Gestaltungselementen und Text-Einheiten. 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, 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 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.
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
Wie dir aufgefallen ist, will auch die Farbe der Elemente sorgfältig gewählt sein. Farben haben eine starke emotionale Wirkung. Zum Beispiel bietet es sich für die Website eines Reise-Anbieters an, Strandbeige und Ozeanblau zu verwenden. Eine Bank wird hingegen zu einem seriösen Dunkelblau oder Grau greifen.
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 …
Satzlänge
Allgemein gelten im Journalismus 15–20 Wörter pro Satz als das Maß aller Dinge für gut verständliche Inhalte. 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
Vor allem bei der Gestaltung von Online-Texten sind kurze Sätze (in Abwechslung mit mittellangen), knappe Absätze und Zwischenüberschriften absolute Pflicht. Auf diese Weise erhält der Text eine Struktur, an der sich das Auge wie an einem Faden hinab hangeln kann.
Dazu zählen auch Formatierungen wie Fettungen, Kursiv-Schreibweise, 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 sind keine Hervorhebung. Ganz im Gegenteil, sie hemmen sogar den Lesefluss. Ergebnis: das Gelesene lässt sich schwerer aufnehmen und verstehen.
Schrift
2-3 verschiedene Schriftarten zu benutzen, kommt ebenfalls der Übersichtlichkeit zugute. Mehr sollten es aber auch nicht sein: Zu viele Schriftstile wirken wuselig und chaotisch.
Wichtig dabei: wenn 2 unterschiedliche Schriften, dann nutze welche aus 2 verschiedenen Familien. Sie dürfen sich nicht zu ähnlich sehen, damit ein schöner, harmonischer Kontrast entsteht. Etwa eine serifenlose Schrift wie Andale Mono mit der Serifen-Schrift Times New Roman.
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)
Der Orientierungswert für eine gute Zeilenlänge liegt zwischen 60 und 80 Zeichen pro Zeile (bei Schriftgröße 8–12). 65 Zeichen sind ca. 10 Wörter. Der Zeilenabstand darf wiederum etwas größer sein als die Schrift (120 %).
Bitte beachte: Das sind alles Orientierungswerte und nicht die Kabbala des Online-Textens.
Absatzlänge
Ein Absatz sollte niemals mehr als 7 Zeilen umfassen, sonst wird er zur Textwüste. Und durch die quält sich niemand freiwillig. Besser sind sogar 3-5 Zeilen.
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)
