Magnolia U und I

Die Energie auf den DevDays 2025 war unglaublich, und eine der am meisten erwarteten Vorstellung war die große Enthüllung von Magnolias zukünftiger Richtung für unsere Benutzeroberfläche. Für diejenigen, die dabei waren, und für diejenigen, die nicht dabei sein konnten, möchten wir die Vision und die konkreten Schritte, die wir unternehmen, teilen. In meiner Präsentation stelle ich Christopher Zimmermann, Principal Product Manager bei Magnolia, eine umfassende Initiative zur Entwicklung einer völlig neuen Benutzeroberfläche für die Plattform vor.

Dies ist nicht nur ein Facelifting. Es ist ein grundlegender Umbau, der darauf abzielt, die steigenden Erwartungen der Nutzer zu erfüllen und eine moderne, leistungsstarke und zukunftssichere Plattform für Autoren, Entwickler und Unternehmen gleichermaßen zu schaffen. Lassen Sie uns in das Was, Warum und Wie dieser aufregenden Umgestaltung eintauchen.

Jede größere Entwicklung wird von einem Bedürfnis nach Veränderung angetrieben. Im Laufe der Jahre haben wir unseren Nutzern und Partnern genau zugehört. Das Feedback war eindeutig: Magnolia ist zwar nach wie vor ein leistungsstarkes und flexibles DXP, aber die Benutzerfreundlichkeit ist verbesserungswürdig.

Auf der Grundlage von Erkenntnissen aus unserer Gemeinschaft haben wir mehrere wichtige Faktoren für diese Initiative ermittelt:

Um mit der technologischen Entwicklung Schritt zu halten, geht es nicht nur um die Einführung neuer Tools, sondern um ein grundlegendes Überdenken der Art und Weise, wie Design und Technologie im Dienste der Menschen zusammenarbeiten. Diese Philosophie ist das Fundament unserer neuen UI-Initiative.

Ich stelle in meinem Vortrag unseren Ansatz vor, der sich auf drei Kernbestandteile stützt, die zusammen ein Erlebnis der nächsten Generation ergeben.

Alles beginnt mit einem frischen, sauberen und modernen Designkonzept. Die Sneak Peeks auf den DevDays 2025 zeigten eine intuitivere und visuell ansprechendere Benutzeroberfläche. Diese neue Designsprache ist die Blaupause für das gesamte Benutzererlebnis und legt den Schwerpunkt auf Klarheit und Benutzerfreundlichkeit für Autoren von Inhalten.

Um diese Blaupause zum Leben zu erwecken, führen wir das Magnolia Design System ein. Hier wird das Design greifbar. Es ist eine umfassende Bibliothek, die unser neues Design in wiederverwendbare, vorgefertigte Code-Komponenten umsetzt. Es definiert auch alle zentralen visuellen Elemente durch Design-Token - spezifische Werte für Farben, Schriftarten, Größen und Abstände. Dieses System ist die einzige Quelle der Wahrheit, die Konsistenz gewährleistet und die Entwicklung erheblich beschleunigt.

Das neue Frontend schließlich ist die benutzerorientierte Software, die direkt mit diesen Tools erstellt wird. Diese moderne, auf React basierende Oberfläche wird mit den Komponenten und Token unseres neuen Designsystems erstellt. Für die Benutzer bedeutet dies ein kohärenteres und leistungsfähigeres Erlebnis. Für Entwickler bedeutet es, dass sie mit einem modernen Technologie-Stack arbeiten, der die Erstellung und Erweiterung der Benutzeroberfläche einfacher und schneller als je zuvor macht.

Ein Kernpunkt dieser neuen UI-Initiative ist das Engagement für Barrierefreiheit. Wir glauben an den Aufbau einer Plattform, die von allen genutzt werden kann, und wir machen dies vom ersten Tag an zu einer Priorität, nicht zu einem nachträglichen Gedanken.

Wir konzentrieren uns zunächst auf einen der grundlegendsten Teile der Authoring-Erfahrung: Zugängliche Formulare. Formulare sind die wichtigste Schnittstelle für die Erstellung und Verwaltung von Inhalten, und sie barrierefrei zu gestalten, ist entscheidend, um alle Nutzer zu befähigen.

Wir haben uns für diese Arbeit klare und ehrgeizige Ziele gesetzt:

Die Ergebnisse sind bereits dramatisch. Während der Präsentation zeigten wir einen Vergleich zwischen unseren alten Vaadin-basierten Formularen und den neuen barrierefreien Formularen mit dem WAVE-Zugänglichkeitsbewertungstool. Der Unterschied war eklatant - ein Bildschirm voller Fehler und Warnungen in der alten Schnittstelle wurde in der neuen fast völlig aufgelöst. Dies ist ein enormer Fortschritt in der Benutzerfreundlichkeit für Benutzer, die auf unterstützende Technologien angewiesen sind.

Dieses Engagement für Barrierefreiheit ist ein zentraler Bestandteil unserer Designphilosophie, und wir werden in unserem kommenden Artikel "Das Unsichtbare sichtbar machen" einen tieferen Einblick in unseren Prozess und unsere Erkenntnisse geben: Ein Blick auf unsere Arbeit im Bereich Barrierefreiheit".

Ein kompletter Neuaufbau kann entmutigend wirken, daher haben wir eine Rollout-Strategie entwickelt, die auf eine schrittweise und optionale Einführung setzt. Wir führen "Inseln" der neuen Benutzeroberfläche innerhalb der bestehenden Magnolia-Instanz ein. Das bedeutet, dass Sie neue und verbesserte Funktionen, wie die neuen Formulare, ohne eine störende "Big Bang"-Migration nutzen können.

Das Verfahren zur Einführung der neuen barrierefreien Formulare soll nahtlos und risikofrei sein:

Diese neue Grundlage ermöglicht leistungsfähigere und intuitivere Werkzeuge, die den Teams helfen, wertvolle Arbeit besser zu gestalten und einzugrenzen. Die Vorteile dieser neuen UI-Initiative gelten für jeden im Magnolia-Ökosystem:

Letztlich ermöglicht diese moderne Grundlage Magnolia, Ihnen bessere Funktionen schneller zur Verfügung zu stellen.

Die nächste Generation der Magnolia UI ist mehr als nur ein Projekt, es ist unsere Vision für die Zukunft. Es ist eine schnellere, schönere, zugänglichere und erweiterbare Plattform, die für die Herausforderungen von morgen entwickelt wurde.

Wir bauen diese Zukunft gemeinsam mit unserer Gemeinschaft auf, und Sie können sich noch heute daran beteiligen:

Ihr Feedback ist für uns von unschätzbarem Wert, wenn wir diese Reise fortsetzen. Bitte teilen Sie Ihre Gedanken, Fragen und Ideen mit uns unter feedback@magnolia-cms.com. Willkommen in der neuen UI-Ära von Magnolia.