How to Contentpflege: 6 Schritte für eine ansprechende Seite im TYPO3

Warum Contentpflege auch immer Design und UX braucht

Grafik eines Computers

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!

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.

 

„Weißraum ist nicht einfach nur ein leerer Raum. Der stringente Einsatz von Weißraum verdeutlicht die Verbindung von Website-Elementen zueinander.“
 

Dennis Wellbrock 
Leitung Team Design

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.

Beispiel eines Grid Elements
Beispiel für ein 12er-Grundraster (Grid)

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.

Eine Grafik von zwei Menschen, die in unterschiedlich farbigen Kreisen stehen

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

Hier können Sie ein Beispiel für das Z-Muster sehen. Das „Endlich” markiert den Anfang des „Z” und das hervorgehobene Zitat das Ende.

Das Z-Muster

Das Z-Muster tritt auf, wenn Benutzer ihre Augen in einer Z-Form bewegen:

  1. Sie beginnen an der oberen linken Ecke der Seite. Hier ist oft das Logo.
  2. Sie bewegen sich dann nach rechts, dort sollte ein orientierendes Element sein, die Hauptnavigation, die Hauptleistungen oder ein Login/eine Registrierung.
  3. Sie schauen, ohne viel zu scrollen, nach links unten. Hier sollten weitere Informationen sein, die Headline oder ein Ansprechpartner.
  4. 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.

 

Diese Tipps helfen, eine gut aussehende und ordentlich strukturierte Seite bauen zu können. Trotzdem ist jede Seite ein Einzelfall und auch ein Gespür für die richtig platzierten Elemente ist von Vorteil. Mehr über Contentpflege, Design und Websites lesen Sie hier:

TYPO3-Websites

Als TYPO3-Agentur bieten wir Ihnen ein leistungsstarkes und flexibles System für Ihre Contentpflege. Durch langjährige Entwicklungsarbeit profitieren Sie von einem Standard, der robust und leistungsstark ist.

Web-Entwicklung

Web-Technologie ist dann gut, wenn man sie nicht wahrnimmt, weil sie einfach funktioniert. Wir entwickeln auf Basis des Content-Management-Systems TYPO3 und realisieren individuelle Entwicklung mit ZEND und Symfony.

Webdesign

Visuelle Gestaltung ist seit der Gründung 1991 Zentrum unserer Arbeit. Wir gestalten Websites und interaktive Oberflächen. Egal für welche Screengröße wir arbeiten - die Nutzer stehen immer an erster Stelle.