Redakteursfreundliche CMS-Gestaltung
Im Webdesign dreht sich alles um den Nutzer. Das Maß aller Dinge ist eine überzeugende User Experience. Das digitale Produkt soll klar, verständlich und leicht zu bedienen sein. Dabei kann jedoch eine kleine, aber für den nachhaltigen Erfolg des Auftritts sehr relevante Nutzergruppe in den Hintergrund geraten: die Backend-User, also die Redakteure und Editoren einer Website.
Gemeinsam mit unserem Kunden Stadtwerke Bonn haben wir im Rahmen des Relaunchs der Karriere-Seite www.swb-karriere.de das Ziel formuliert, für beide Nutzergruppen – also für die Zielgruppe der Fachkräfte, Trainees, Praktikanten – ebenso wie für das Redaktionsteam ein zugleich sehr vielseitiges, dabei attraktives, verständliches und gut bedienbares User Interface zu kreieren. In diesem Blogpost zeigen wir dir, wie das gelingt.
Redakteursfreundlichkeit als schwieriger Spagat
Wohl jeder Redakteur eines Content-Management-Systems kennt das Dilemma. Mal ist die passende Komponente nicht verfügbar, mal nicht flexibel genug oder schlicht nicht auffindbar. Wenn sie nicht auffindbar ist, verschafft gelegentlich noch das Kopieren des Inhaltstyps von einer bereits vorhandenen Seite Abhilfe. In anderen Fällen bietet die eingesetzte CMS-Komponente oftmals nicht die gewünschten Einstellungsoptionen, um den individuellen Gestaltungswünschen gerecht zu werden. Kompromiss-Lösungen sind das Resultat.
Auf der anderen Seite können komplexe und komponenten-reiche CMS Instanzen vor allem Gelegenheitsredakteure, neu hinzugekommene Mitarbeiter aber auch weniger digital-affine Editoren vor viele Fragezeichen beim Erstellen von neuem Content stellen. Somit bleibt jede CMS-Umsetzung auch ein Spagat hinsichtlich der Backend-Gestaltung.
↘️ Weniger Features und Komponenten = einfachere Bedienbarkeit, zugleich geringere Flexibilität
↗️ Mehr Features und Komponente = komplexere Bedienung, höhere Flexibilität
Vielfältige redaktionelle Anforderungen an das CMS
Für das Karriere-Portal des Bonner Energieversorgers haben wir uns eng mit den beteiligten Gewerken, bestehend aus dem Redaktionsteam auf Kundenseite, dem TYPO3 Backend-Team und den Frontend-Designer eng verzahnt.
Die Anforderungen an die Gestaltungsfreiheit im TYPO3 CMS waren vielfältig. Angelehnt an das kachelige Webdesign, eingeführt in 2018, sollte der Karriere-Auftritt eine größtmögliche Flexibilität in der Kombination von farbigen Kacheln, Bildelementen, Text und Buttons bieten. Speziell die Positionierung und Dimensionierung der einzelnen Elemente sollte mehr Variabilität bieten, als es im ursprünglichen Web-Baukasten konzipiert war.
Das Gestaltungsziel: Ein dynamisches und frisches Design, echte Mitarbeiterfotos und eine klare Sprache sorgen für eine glaubwürdige und authentische Positionierung als Arbeitgebermarke. Employer Branding auf digitaler Bühne, wie es in Zeiten akuten Fachkräftemangels branchenübergreifend mehr denn je gefragt ist.
Grundlagen für Redakteursfreundlichkeit: Dokumentation und klare Strukturen
Um einerseits ein hohes Maß an gestalterischer Freiheit zu ermöglichen und andererseits ein verständliches User Interface im Backend zu wahren, war eine strukturierte Vorgehensweise in der Konzeption und technischen Umsetzung gefragt.
Zum Einsatz kam dabei in der initialen Design-Konzeption ein Aufbau aller Designvarianten mithilfe von Sketch.
Pattern Library und Dokumentation für das Modern Design System
Seit einigen Jahren setzen wir auf die Pattern Library als Leitfaden für die langfristige Pflege und Erweiterung des jeweiligen Web-Projekts. Diese dient primär als Doku für die Entwickler und stellt die Konsistenz des Projekts sicher. Zusätzlich zur Pattern Lib dieses Auftritts erstellten wir eine Dokumentation des „Modern Design Systems“ in einer Microsite, die speziell auf die Redakteure ausgerichtet ist.
Hier findet sich eine Beschreibung sämtlicher Komponenten und der grundlegenden Designvariablen:
- Grid
- Farben
- Bilder
- Typographie
- Buttons
Die neuen Komponenten des Modern Design Systems mit ihrem Zweck und den jeweiligen Besonderheiten werden mithilfe von Illustrationen so veranschaulicht, dass ein schneller Überblick über die Gestaltungsoptionen ermöglicht wird.
Hier ein Beispiel für die Erstellung einer Colored Teaser Komponente:
Mit wenigen Klicks sind mit dieser Komponente attraktive, verständliche und conversion-starke Seiten aufgebaut, die einen großen kreativen Freiraum für die Redakteure ermöglichen.
CMS und Redaktionsteam verantwortlich für Barrierefreiheit
Für die Webpräsenzen öffentlicher Einrichtungen ist das Thema Barrierefreiheit mittlerweile unumgänglich. Dieser Anforderung wurde durch die neuen Komponenten ebenfalls Rechnung getragen. Wo vorher noch Grafiken samt Text gebaut werden mussten, die für Screenreader nicht lesbar waren, kombiniert das Modern Design System farbige Kacheln mit freigestellten PNG Bildern und vielfältig positionierbaren Textinhalten und Buttons.
Je nach gewählter Kachelfarbe wählt das CMS automatisch eine helle oder dunkle Schriftfarbe, um ein ausreichendes Kontrastverhältnis im Sinne der BITV sicherzustellen.
Somit erfüllt die CMS-Umsetzung auch an dieser Stelle die BITV-Kriterien. Gleichzeitig ist nicht jeder Prozess hierbei vollautomatisch realisierbar. Aspekte wie eine verständliche Sprache oder die Pflege von Alt-Texten lassen sich nicht automatisieren und müssen weiterhin von Redakteuren berücksichtigt werden.
Fazit:
Ein Content-Management-System ist bei größeren Webauftritten immer ein komplexes Gebilde. Jedes Backend erfordert eine grundlegende Einarbeitung des Redaktionsteams. Bei PPW setzen wir daher auf die Kombination aus einer sauberen Dokumentation, Schulungen, bei Bedarf auch Video-Tutorials. Unterschiedliche Nutzerrollen in einem CMS bieten die Möglichkeit, nur Teilbereiche einer Seite, einzelne Komponenten oder Funktionen anzuzeigen, so dass die Bedienung vereinfacht und die Chancen für Fehler reduziert werden. Vor allem aber ist in der Planungsphase eines Projekts eben auch die Brille des Redakteurs notwendig, denn er oder sie sorgt mit den jeweiligen Inhalten für die User Experience bei den Nutzern, und damit für den nachhaltigen Erfolg.
Mehr zu TYPO3: TYPO3 Agentur Köln + Münster
