Best Practices für die Erstellung redaktioneller Inhalte im Web

Computer mit redaktionellen Inhalten

Erstellen Sie redaktionelle Inhalte? Machen Sie nicht mehr die üblichen Fehler, die ich bei meinen Kunden und in meinem Alltag als Leser immer noch allzu oft sehe.

Hier finden Sie eine praktische Anleitung zum Erstellen barrierefreier Inhalte, die für alle Medien geeignet sind. 

Denn heute, damit Ihre Inhalte werden gelesen, verstanden und geschätzt, redaktionelle Qualität allein reicht nicht mehr aus. Es ist auch notwendig, kümmern uns um die inhaltliche Gestaltung : sein Format, seine Struktur, seine Lesbarkeit und seine Fähigkeit, sich an die tatsächlichen Verwendungszwecke Ihrer Leser anzupassen.

Die Bedeutung der Multi-Screen-Adaption verstehen

Schon heute gibt es zu viele Inhalte, die primär für Desktop-Bildschirme konzipiert sind, schlecht strukturiert, schwer lesbar und paradoxerweise nicht immer optimiert sind, selbst für große Bildschirme. Und dennoch werden bis 2025 mehr als 70 % der Webverkehr global kommt von der Mobile.

Auf Smartphones werden diese Artikel endlos, kompakt, schlecht formatiert und daher schnell weggeworfen.

Ziel ist es, Inhalte so zu schreiben und zu strukturieren, dass sie für Touch-Navigation und schnelles Scrollen geeignet sind, aber auch auf einem großen Bildschirm gut aussehen. Um diese Probleme zu lösen, ist ein Mobile-First-Ansatz unerlässlich.

Die Bedeutung einer guten Priorisierung mit klaren Titeln

Eine gute Hierarchie hilft dabei, schnell scannen und die Struktur verstehen des Artikels.

Für Mobilgeräte bevorzugen kurze und prägnante TitelEine gute H2- oder H3-Überschrift sollte es dem Leser ermöglichen, den Artikel zu verstehen, ohne den Haupttext lesen zu müssen. Wenn wir nur H1, H2 und H3 aus Ihrem Inhalt extrahieren, erhalten wir eine klare Zusammenfassung des Ganzen.

Typische Hierarchie:

  • H1: Eindeutiger Titel der Seite
  • H2: Hauptabschnitte (alle 300 bis 500 Wörter)
  • H3: Unterabschnitte falls erforderlich

Es ist wichtig, die Titel optisch durch ihre Größe zu unterscheiden und dabei eine einheitlicher Maßstab. Hierfür können Sie eine modulare Leiter wird häufig beim Entwerfen eines Designsystems (z. B. 1.250, 1.333 usw.) verwendet, um einen reibungslosen Übergang zwischen den Ebenen zu gewährleisten.

Text- und Absatzverwaltung

Für ein flüssiges und angenehmes Lesen beginnen Sie mit einem zentrierten Raster mit einer Hauptspalte. Wählen Sie eine klare Typografie mit einem guter Kontrast um eine visuelle Ermüdung zu vermeiden und Blocksatz niemals im Text, es entstehen unregelmäßige Abstände, die das Lesen erschweren. 

Verwenden Sie Fettdruck für Schlüsselwörter und Kursivdruck für Nuancen. Der Abstand sollte zwischen 1.5 und 1.7 liegen, um den Text geräumiger und leichter lesbar zu machen, insbesondere auf dem Bildschirm.

Auf Mobilgeräten: Best Practices für lesbare Inhalte

Für Mobilgeräte ist eine strengere Strukturierung der Informationen erforderlich; gute Inhalte müssen flüssig, übersichtlich und schnell navigierbar sein.

  • Text sollte niemals an den Rändern des Bildschirms kleben bleiben. Denken Sie daran, Seitenränder von mindestens 16 Pixeln hinzuzufügen
  • Mindestschriftgröße zwischen 14 und 16 px, um lesbar zu sein
  • Vermeiden Sie zu dichte Textblöcke, da diese beim Scrollen ein schnelles Lesen erschweren.
  • 3 bis 6 Sichtlinien

Auf dem Schreibtisch: Struktur, Belüftung, Begrenzung der Breite

Auch auf einem großen Bildschirm sollte Ihr Inhalt nicht die gesamte Breite einnehmen!

  • Ideale Lesebreite zwischen 600 und maximal 750 px
  • Textgröße von 16 bis 18 px
  • Empfohlene Zeilenlänge: 60 bis 75 Zeichen pro Zeile
  • 2 bis maximal 4 Zeilen pro Absatz

Das Wesentliche hervorheben, ohne zu überladen

Sie können Inhalte mit diskreten visuellen Elementen strukturieren, wie Listen mit Aufzählungszeichen im Text, um wichtige Punkte hervorzuheben, gerahmt zusätzliche Informationen oder Warnungen zu melden und Callout-Felder um Definitionen, wichtige Daten oder Zusammenfassungen hervorzuheben. 

Diese Elemente helfen, das Lesetempo zu steigern, die Aufmerksamkeit auf das Wesentliche zu lenken und das Gesamtverständnis des Inhalts zu verbessern. Zu viele visuelle Elemente können jedoch, wie oben erwähnt, die Hierarchie untergraben.

Beispiel für einen NN/g-Artikel https://www.nngroup.com/articles/ai-integration-condens/ auf Mobilgeräten und Desktops: klare Struktur, lesbare Typografie und luftiges Layout für angenehmes Lesen.

Links und Handlungsaufforderungen (CTA)

Links in redaktionellen Inhalten

Interne und externe Links bereichern einen Artikel, verbessern die Navigation, stärken die Glaubwürdigkeit und tragen zur SEO bei. Ihre Integration muss jedoch sorgfältig überlegt sein.

Benutzer müssen schnell erkennen können, was interaktiv ist, ein Link muss klar erkennbar sein, um ihn für alle zugänglich zu machen, auch für sehbehinderte oder farbenblinde Menschen, Ein Link muss eindeutig identifizierbar sein, üblicherweise setzen wir oft ein andere Farbe mit Unterstreichung.

Es wird auch nicht empfohlen, einen Titel (H1, H2, H3) in einen Link umzuwandeln, es sei denn, es handelt sich um einen internen Link zu einem Anker. Darüber hinaus muss der Wortlaut des Links beschreibend sein: Vermeiden Sie vage „Hier klicken“-Aussagen und bevorzugen Sie präzise Anker wie „Siehe unseren vollständigen Leitfaden zur redaktionellen UX“.

CTA

Um effektiv zu sein, muss ein CTA Folgendes verwenden: klares, prägnantes und ansprechendes Aktionsverb zum Beispiel: Herunterladen, Ein Angebot anfordern ou Vollständigen Artikel anzeigenDie versprochene Aktion sollte immer mit dem darauf folgenden Inhalt oder der darauf folgenden Seite übereinstimmen, um „Klickfallen“ zu vermeiden, die für Benutzer oft frustrierend sind.

Hüten Sie sich vor CTAs, die als einfache Hyperlinks getarnt sind, da diese Gefahr laufen, unbemerkt zu bleiben. Um ihre Wirksamkeit zu maximieren, müssen CTAs sowohl visuell als auch semantisch sofort erkennbar sein.

Platzieren Sie Ihre CTAs strategisch, oft nach einem Informationsblock oder am Ende des Artikels. Scheuen Sie sich nicht, sie in längeren Texten in der Einleitung, im Mittelteil und im Schluss zu wiederholen, solange sie natürlich und unaufdringlich wirken.

Visuelle Elemente

Bilder

Bilder spielen eine Schlüsselrolle beim Leseerlebnis, sie ermöglichen es uns, machen das Lesen angenehm, verstärken Sie Nachrichten und fügen Sie visuelle Informationen hinzu.

Platzieren Sie Bilder strategisch, nach einem erklärenden Absatz, vor einem wichtigen Punkt, um die Aufmerksamkeit zu erregen. Zwischen den Absätzen ermöglichen sie einen Umbruch, eine Art visueller oder narrativer Bruch. Sehr effektiv für die Aufmerksamkeit des Lesers wieder zu wecken, Veranschaulichen Sie ein starkes Konzept oder tauchen Sie in eine Atmosphäre ein.

Vermeiden Sie uninteressante, „dekorative“ Bilder oder zu generische Stockbilder. Bilder sollten die Idee oder Emotion des Textes klar veranschaulichen. Aber Vorsicht: Zu viele Bilder verlangsamen das Laden und lenken vom Lesen ab. 

Und vergessen Sie hinsichtlich der Zugänglichkeit nicht, Bilder eindeutig zu benennen, damit sie klar und beschreibend sind, und denken Sie an den beschreibenden ALT-Tag für Bildschirmleseprogramme.

Beispiel für einen NN/g-Artikel https://www.nngroup.com/articles/ux-copy-sizes/ Das Bild verstärkt das Verständnis und respektiert gleichzeitig das Lesetempo. Es ist eine für alle Medien konzipierte Visualisierung.

Infografiken, Illustrationen & Grafiken

Diese visuellen Elemente spielen eine entscheidende Rolle: Sie helfen dabei, wichtige Informationen effektiv zusammenzufassen, komplexe Konzepte zu vereinfachen, das Einprägen zu verbessern und das Teilen von Inhalten zu fördern.

Um sie wirklich nützlich zu machen, achten Sie darauf, dass sie klar und lesbar gestaltet sind, mit ein ausreichend großer Text, insbesondere beim mobilen Surfen. Denken Sie daran, dass das Bild auf Smartphones verkleinert angezeigt wird. Vermeiden Sie es, den Benutzer zum Vergrößern zu zwingen, und stellen Sie sicher, dass die Informationen wie auf einem Desktop-Bildschirm auf den ersten Blick sichtbar sind.

Die Aussage einer Illustration oder Infografik sollte sich jedoch nicht allein auf das Visuelle stützen. Ergänzen Sie sie mit einem beschreibenden Text, damit die Informationen auch für Personen zugänglich sind, die das Bild nicht sehen können, insbesondere für Benutzer eines Screenreaders. Enthält das Bild wichtige Daten, beschreiben Sie diese klar und vollständig.

Videos

Sie bieten eine interessante Alternative zur herkömmlichen Lektüre und können Informationen ergänzen. Fügen Sie eine Zusammenfassung oder wichtige Punkte hinzu Darüber hinaus hilft dies Benutzern, die lieber lesen oder sich das Video nicht ansehen können.

Hosten Sie Videos auf Plattformen wie YouTube oder Vimeo um die Ladezeit Ihrer Seite nicht zu verlängern. Denken Sie daran, Untertitel einzuschalten oder zu aktivieren um die Zugänglichkeit zu verbessern und das Ansehen ohne Ton zu ermöglichen.

Abschließend

Guter redaktioneller Inhalt ist nicht mehr nur ein guter Text. Es ist ein Leseerfahrung In seinem eigenen Recht, wo die Form dem Inhalt dient, wo Ergonomie ebenso viel zur Wirkung beiträgt wie redaktionelle Qualität. Es geht um Fluidität, Hierarchie und Ausgewogenheit. Kurz gesagt: Es geht darum, klar, aber auch einfühlsam zu schreiben.

Sie sollten die Desktop-Erfahrung nicht vernachlässigen, aber Inhalte sollten mobil gestaltet sein, um sich an alle Formate anzupassen. Denken Sie daran, Ihr Layout auf echten Mobilgeräten zu testen, nicht nur im Vorschau-Tool.

 

 

 

Anaëlle Staelen, UX/UI-Designer und Produktdesigner bei UX-Republic