TYPO3 Backend UX – Wenn Redakteure plötzlich produktiv werden

Wussten Sie, dass Redakteure im Durchschnitt 3-5 mal zwischen Backend und Frontend wechseln, um zu prüfen, ob ihr Content auch wirklich so aussieht wie gewünscht? Das kostet nicht nur Zeit, sondern führt auch zu Frustration und Fehlern.

"Können Sie mir nochmal zeigen, wie das aussehen wird?" – Diese Frage hörten wir in unserem Support-Team zu oft. Bei unseren letzten Projekten haben wir uns gefragt: Warum zeigen wir den Redakteuren nicht einfach direkt im Backend, wie ihr Content aussehen wird?

Die Lösung: Eine Backend-Vorschau, die in Echtzeit zeigt, wie die Inhalte auf der Website erscheinen. Keine zusätzlichen Klicks, keine Überraschungen nach dem Speichern. Was du siehst, ist was du bekommst.

Nur mit Backend-Vorschau:

• Schnellere Content-Erstellung - Garantiert!
• Weniger Fehler durch sofortiges visuelles Feedback
• Einblicke in das finale Layout bereits beim Bearbeiten
• Zeitersparnis durch Wegfall des Frontend-Wechsels
• Höhere Zufriedenheit bei Content-Teams

Bei einem TYPO3-Relaunch bringen wir UX-Optimierung direkt ins Backend. Wir wollen, dass Redakteure spielerisch und intuitiv arbeiten können – ohne technische Vorkenntnisse, ohne stundenlange Schulungen.

Funktionsweise der Optimierungen

1. Einheitliches Farbkonzept für alle Content-Elemente

Jedes Content-Element und Plugin erhält seine eigene Farbe. Bühnen-Elemente in Pink, Teaser in Türkis, Text-Elemente in Lila. Nicht zufällig handelt es sich bei diesen Farben auch um die Farben des entsprechenden Kunden. Ein Blick genügt – Redakteure wissen sofort, womit sie arbeiten. Der Content Element Wizard wird vom grauen Einheitsbrei zur übersichtlichen, farbcodierten Auswahl.

Dies bedeutet beispielsweise, dass ein Redakteur beim Anlegen neuer Inhalte sofort erkennt, welches Element er benötigt. Die Orientierung ist intuitiv, die Lernkurve flach.

2. Reduzierung unnötiger Felder

Von 60+ Feldern auf 8-10 relevante. Selbst Admins sehen nur noch, was tatsächlich Funktion hat. Über die TSConfig und TCA-Konfiguration lassen sich ungenutzte Legacy-Felder konsequent ausblenden. Das bedeutet, dass jeder Redakteur fokussiert arbeiten kann – ohne von irrelevanten Optionen abgelenkt zu werden.

Soll ein Feld nur in bestimmten Kontexten sichtbar sein, lässt sich dies über Conditional Fields elegant lösen. Die Komplexität wird nur dann gezeigt, wenn sie wirklich benötigt wird.

3. Flache Hierarchien statt Grid-Inception

Schluss mit "Grid im Grid im Grid im Grid". Wir verstehen uns auf den Bau individueller Content-Elemente, die genau das tun, was gebraucht wird – ohne unnötige Verschachtelung. Hierbei setzen wir auf moderne, Core-nahe Lösungen statt auf komplexe, verschachtelte Grid-Strukturen.

4. Redaktionelle Konfiguration statt TypoScript

Header-Menü, Footer-Menü, Logos, Social-Media-Icons – Teil des Seitenlayouts aber dennoch durch Redakteure änderbar. Über Site-Sets und Backend-Formulare haben Content-Teams die volle Kontrolle über grundlegende Layout-Elemente. Hierbei ist kein Entwickler nötig für "Kannst du mal das Logo austauschen?" – Redakteure sind autonom.

5. Custom Plugins statt HTML-Content-Elemente

Newsletter-Anmeldung? Ein Element. iFrame einbinden? Ein Element. Matomo Opt-Out? Ein Element. Cookie-Banner? Ein Element.

Keine HTML-Content-Elements mehr, keine Copy-Paste-Orgien, kein "Wo war nochmal dieser Code-Schnipsel?" Alles sind einfache, selbsterklärende Funktionen, die Redakteure per Klick einbinden können.

Info: Die Optimierungen funktionieren auch mit aktiviertem staticfilecache. Performance und Usability schließen sich nicht aus.

Tipp: Beginnen Sie mit kleinen Verbesserungen. Schon das Ausblenden ungenutzter Felder kann die Zufriedenheit Ihrer Redakteure spürbar steigern!