How to Contentpflege: 6 Schritte für eine ansprechende Seite im TYPO3
Warum Contentpflege auch immer Design und UX braucht
Der erste Eindruck zählt! Eine Website repräsentiert eine Marke und ist das Abbild ihrer digitalen Identität. Umso wichtiger ist es, eine gut strukturierte und geschmackvolle Website zu bauen. Wenn die Inhalte fertig sind, geht es darum, aus Dokumenten und Bildern eine gute URL zu bauen. Mit diesen Tipps für die Contentpflege ist das kein Problem!
Hallo, ich bin Johanna, ich arbeite seit einiger Zeit in der Contentpflege und in der Redaktion bei artundweise. In diesem Artikel habe ich ein paar wichtige Erkenntnisse und Praxistipps für die Contentpflege zusammengetragen.
Für Querleser – so geht gute Contentpflege:
- Content ist mehr als Buchstaben: Mit Bildern brechen Sie Texte auf
- Design durch Mut zur Lücke: Mit Weißraum schaffen Sie Struktur
- Zu breit geht zu weit: Denken Sie an Seitenabstände – sie sind absolut notwendig
- Zum Querlesen und Eintauchen: Verwenden Sie viele Überschriften und inspirierende Zitate
- Abwechslung mit Augenmaß: So platzieren Sie Abstände perfekt
- Typografie als Eye-Catcher und strukturierendes Element
1. Content ist mehr als Buchstaben: Mit Bildern brechen Sie Texte auf
Um einen Lesefluss zu erzeugen und Nutzer auf der Seite zu halten, sind Bilder immens wichtig. Sehr lange, monoton dargestellte Texte frustrieren. Als Konsequenz wird der Text häufig einfach ungelesen geschlossen. Dann können auch keine weiteren Artikel (oder Produkte und Dienstleistungen) das Interesse der Nutzer wecken.
In der Analyse sehen wir dann eine hohe Absprungrate und eine niedrige Verweildauer. Bilder können hier helfen. Sie brechen den Text auf und machen eine Seite bunter und interessanter. Sie verdeutlichen, was die Quintessenz des dazugehörigen Textes ist, und sorgen für Abwechslung – oder sie führen die Blickrichtung des Users auf bestimmte Bereiche. Zudem erzeugen Bilder einen Eindruck von Ihrem Unternehmen und spiegeln die Identität Ihrer Marke wider. Deshalb sind sie auch für die Contentpflege besonders wichtig.
Tipp für die Praxis:
Bei kurzen Textblöcken brauchen Sie kein Bild. Längere Texte jedoch wirken so freundlicher und motivieren die Adressaten, weiterzulesen.
2. Design durch Mut zur Lücke: Mit Weißraum schaffen Sie Struktur
Weißraum beschreibt den „leeren“ Platz (zumeist weißen Raum) zwischen zwei Textelementen, Bildern, Grafiken oder anderen Website-Elementen. Für die User-Experience ist der Weißraum wichtig. Denn so schaffen Sie für User eine Möglichkeit, zwischen dem Lesen zweier Texte aufzuatmen.
Wenig oder gar kein Weißraum lässt eine Seite gedrungen wirken. Die einzelnen Blöcke verlieren ihre Wirkung und sind lediglich ein kleiner Teil eines großen, zusammengepferchten Blocks. Durch die richtige Platzierung des Weißraums setzen Sie einen besonderen Fokus. Um die Seite dennoch strukturiert zu halten, ist es wichtig, den Weißraum nicht willkürlich, sondern in immer gleichen Abständen zu platzieren.
Tipp für die Praxis
Nehmen Sie diesen Text als Beispiel: Das kommende Zitat-Element hat weniger Abstand zu diesem Absatz als zum Absatz danach. Sie als Leser ordnen das Zitat so unterbewusst diesem Absatz zu und täten dies auch, wenn der nächste Absatz keine neue Überschrift hätte.
3. Zu breit geht zu weit: Denken Sie an Seitenabstände – sie sind absolut notwendig
Hausarbeiten im Universitätsstil à la 30 Seiten in Arial und mit Blocksatz laden nicht unbedingt zum Lesen ein. Um eine Seite zu bauen und für den Leser interessant zu gestalten, ist es wichtig, dass Texte sich in ihrer Breite immer wieder unterscheiden. Dies können Sie mit Grid-Elementen umsetzen. Ein klassisches Grid teilt die Seite in bis zu 12 Spalten auf, jede Spalte ist also ein Zwölftel der Seitenbreite. Ein Text kann in einem 2-8-2 Grid-Element erscheinen (welches die komplette Breite einer Seite in Blöcke teilt, die im Größenverhältnis 2-8-2 zueinanderstehen). Der nächste Textblock erscheint in einem 3-9er Grid-Element, direkt neben einem Bild. So wird der Lesefluss aktiv gelenkt und durch Spannung auf der Website gehalten.
Tipp für die Praxis
Es gilt allerdings eine Grundregel bei Seitenabständen: Texte erscheinen niemals in der kompletten Breite der Website. Sonst werden die Zeilen zu lang und laden nicht zum Lesen ein.
4. Zum Querlesen und Eintauchen: Verwenden Sie viele Überschriften und inspirierende Zitate
Überschriften und gut gewählte Zitate sind Eye-Catcher, die Sie bewusst im Text platzieren. Dabei sollten Sie die Zitate in einem eigenen Stil einbinden, idealerweise mit einem kleinen Bild des Autors bzw. der Autorin. Dies unterbricht den Lesefluss und lockert den Inhalt auf. Deutlich erkennbare Zitate von echten Personen erhöhen die Vertrauenswürdigkeit des Textes und sollten daher schnell erkennbar sein.
5. Abwechslung mit Augenmaß: So platzieren Sie Absätze perfekt
Wie schon in Schritt 3 beschrieben, dürfen und sollen Sie Texte unterschiedlich platzieren. Mal neben einem Bild platziert, in einem Grid-Element integriert oder farblich hervorgehoben: Abwechslung in der Platzierung lockert den Text auf und erleichtert das Lesen. Trotzdem ist ein durchgängiges, klares Konzept wichtig. Ein paar Grundregeln gibt es trotz all der Freiheiten. Von links nach rechts und wieder zurück in die Mitte zu springen ist einfach verwirrend. Am Ende sind die Lesenden nicht mehr motiviert, weitere Artikel zu lesen.
Tipp für die Praxis:
Ihre Texte sollten nicht zu sehr springen, sondern eine gewisse Konstanz haben. Platzieren Sie den Text überwiegend in der Mitte und ab und zu neben einem Bild.
Z-Pattern und F-Pattern bestimmen das Leseverhalten im Internet
Das F-Muster und das Z-Muster sind gängige Methoden, mit denen Benutzer Informationen auf Websites lesen. Die beiden Buchstaben sind dabei die „Augenbewegung“ des Users auf einer Seite, die sichtbar wären, wenn man es mit Eye-Tracking erfassen würde.
Das F-Muster
Das F-Muster tritt auf, wenn Benutzer oben links auf der Website starten und ab dem oberen Teil der Seite linksbündig nach Überschriften suchen (das ist der linke Strich des großen F). User schauen dann an bestimmten Stellen der Seite von links nach rechts, um zum Beispiel eine Überschrift zu lesen (die horizontalen Striche des F). So ergibt sich ein grobes F-Lesemuster, wobei das F mehrere horizontale Striche haben kann. Das F-Muster ist ein typisches Lesemuster für klassische Fließtexte mit Absätzen und Zwischenüberschriften (wie dieser hier).
Hier sehen Sie, wie das F-Muster aussehen kann, anhand eines Magazin-Artikels über Marketing
Das Z-Muster
Das Z-Muster tritt auf, wenn Benutzer ihre Augen in einer Z-Form bewegen:
- Sie beginnen an der oberen linken Ecke der Seite. Hier ist oft das Logo.
- Sie bewegen sich dann nach rechts, dort sollte ein orientierendes Element sein, die Hauptnavigation, die Hauptleistungen oder ein Login/eine Registrierung.
- Sie schauen, ohne viel zu scrollen, nach links unten. Hier sollten weitere Informationen sein, die Headline oder ein Ansprechpartner.
- Sie schauen zuletzt nach rechts, das Z ist komplett. Dort sollte ein CTA oder ein anderes wichtiges Element sein.
Während das F-Muster charakteristisch für klassische Magazinartikel ist, ist das Z-Muster typisch für Landingpages oder pragmatisch orientierte Seiten, wie etwa Referenzen.
Websites können Sie dank dieser Muster so gestalten, dass sie für Benutzer besser lesbar sind. So sollten beispielsweise Überschriften und wichtige Informationen oben auf der Seite platziert werden, wo sie am ehesten wahrgenommen werden. Außerdem sollten die Inhalte in einem leicht verdaulichen Format organisiert werden, z. B. in Form von Listen oder Aufzählungspunkten, damit die Benutzer sie leichter überfliegen und relevante Informationen finden können.
6. Typografie als Eye-Catcher und strukturierendes Element
Typografie ist toll, gar keine Frage. Eine Seite, auf der uns gleich 10 verschiedene Schriftgrößen und 3 verschiedene Farben begegnen, sieht trotzdem chaotisch aus. Welcher Text gehört zu welchem Bild? Wo ist hier der jeweilige Sinnabschnitt? Ein Sprichwort sagt: „Zu viele Köche verderben den Brei.“ Das gilt auch beim Bauen und Gestalten einer schönen Website. Weniger ist definitiv mehr!
Tipp für die Praxis:
Nutzen Sie Typografie, um Struktur zu schaffen: Zwischenüberschriften dürfen eine andere Typografie haben als der Fließtext. Aber alle H2-Überschriften sollten gleich aussehen.
