Divi Modulvorschau Optimierung für eine benutzerfreundlichere Bedienung
Diese Fallstudie beschäftigt sich mit der Entwicklung einer Erweiterung für die Wireframe-View des Divi Builders in WordPress. Das Ziel besteht darin, die Benutzerfreundlichkeit und Übersichtlichkeit für Redakteure zu verbessern.
Informationen zum Projekt
Divi ist ein hochwertiges WordPress-Theme mit integriertem Drag-and-Drop-Page Builder, vorgefertigten Layouts und umfangreichen Anpassungsoptionen. Diese Funktionen ermöglichen es Nutzern, ansprechende Websites ohne Programmieraufwand zu erstellen. Die vielseitige Bibliothek mit Layouts bietet einen idealen Ausgangspunkt für individuelle Gestaltungen. Persönlich bevorzuge ich Divi für die Entwicklung von Corporate Websites und Landingpages, und es hat sich als meine erste Wahl für die meisten Kundenprojekte erwiesen. Millionen von Nutzern weltweit schätzen die Benutzerfreundlichkeit und Flexibilität dieses Themes bei der Erstellung moderner, professioneller Websites.
Tools die ich für das Projekt verwendet habe
Figma
Miro
Projektrolle
Beschreibung des Problems
Nach ausgiebiger Arbeit mit dem Divi Builder und nach zahlreichen Kundenübergaben,
Schulungen und Beobachtungen ist mir aufgefallen, dass Nutzer bei der Pflege von Inhalten auf der Webseite an
bestimmten Stellen Schwierigkeiten haben. Ein beobachtetes Problem besteht darin, dass Nutzer den Fronteditor
oder die Desktop-View als teilweise zu komplex empfinden, um kleinere Änderungen an der Webseite vorzunehmen.
Diese Ansicht ist jedoch ideal für Webdesigner, da sie einen umfassenden Überblick über alle Einstellungen und
Verschachtelungen bietet.
Bei einem Wechsel zur Drahtgittersicht konnte ich beobachten, dass Nutzer diese Ansicht als angenehmer
empfinden, da der Aufbau der Webseite und die Verschachtelung strukturierter sichtbar werden. Diese Ansicht
eignet sich auch viel besser zum Verschieben von Abschnitten, da man nicht direkt darauf achten muss, wo man
genau anfasst, und während des Verschiebens nichts versehentlich verstellen kann.
Allerdings hat die Drahtgitteransicht ein Problem: Man muss alle Abschnitte, Reihen und Module selbst
beschriften, was zu zusätzlicher Arbeit führt. Lässt man die Bezeichnungen weg, weiß man nicht mehr genau, wo
man sich auf der Seite befindet, was besonders bei längeren Unterseiten sehr unübersichtlich werden
kann.
Frontend-Editor in der Desktop-View
Wireframe-Ansicht
Lösung
Das Ziel besteht darin, die Backend-Übersicht und Usability für das Bearbeiten, Orientieren und Verschieben von Inhalten, insbesondere für Nutzer ohne gestalterische oder technische Vorerfahrung, so zu gestalten, dass sie schnell und intuitiv ihre Ziele erreichen.
Persona
Durch das Erstellen von Personas konnte ich die Ziele und Verhaltensweisen der Kunden besser verstehen. Dies sichert, dass das Design auf die tatsächlichen Benutzerbedürfnisse ausgerichtet ist und dient mir als Orientierung für Designentscheidungen. Es ermöglicht mir, mich besser in die Perspektive der Zielgruppe zu versetzen und so zielgerichtete und benutzerfreundliche Lösungen zu entwickeln.
Wettbewerbsanalyse
In diesem Schritt habe ich andere Page Builder auf dem Markt unter die Lupe genommen, um
zu sehen, ob bereits ähnliche Herausforderungen erfolgreich bewältigt wurden. Aufgrund meiner Erfahrungen mit
verschiedenen Page Buildern habe ich einen identifiziert, an dem ich mich orientiert habe.
Der WP-Bakery Builder zeichnet sich durch eine besonders benutzerfreundliche Anwendung aus. Bei der Nutzung
dieses Builders ist mir ein Aspekt aufgefallen, der die Ansicht für Menschen ohne gestalterischen und
technischen Hintergrund im Vergleich zu Divi übersichtlicher gestaltet. Basierend auf dieser Erkenntnis habe
ich ein User Interface Design Konzept entwickelt, um das identifizierte Problem in Divi zu verbessern.
Entwicklung eines Flowcharts
Die Standardkonfiguration von Divi bewirkt, dass beim Klicken auf eine WordPress-Seite die Aufforderung zur Bearbeitung mit Divi erscheint. Wenn daraufhin geklickt wird, öffnet sich die Seite standardmäßig im Desktop-View. In den allgemeinen Divi-Einstellungen gibt es die Möglichkeit, Seiten direkt im Wireframe-View zu öffnen. Um den Nutzern einen reibungslosen und direkten Zugang zur Bearbeitung einer Seite zu ermöglichen, sollte diese Option im Rahmen dieses Konzepts aktiviert werden. In den Flowcharts habe ich die Schritte und Pfade vor und nach der Anwendung dieser Optimierung visualisiert.
Aktueller Weg bis zum Bearbeiten einer Seite
Nach meinen Beobachtungen ergibt sich für die Nutzergruppe standardmäßig ein zu langer und komplexer Prozess mit zahlreichen Optionen beim Bearbeiten einer Seite, was zu einem negativen Nutzererlebnis führt.
Wireframe
Nachdem ich mir verschiedene Page Builder angesehen habe, habe ich zunächst ein Konzept in Form eines Wireframes erstellt, damit ich Designentscheidungen frühzeitig ändern oder anpassen kann.
UI Design Konzept
Ich habe das Wireframe-Konzept als Grundlage für das UI-Design verwendet und es mit Farben, Bildern, Icons und Texten erweitert. Dabei habe ich die Farbwelt des Divi Builders in der Wireframe-Ansicht leicht erweitert, um dem Nutzer durch klare Strukturen und Farben eine schnelle Orientierung zu ermöglichen.
Abschluss
Durch einfache Erweiterungen einer Vorschauansicht und kleineren Farbanpassungen in der Wireframe-Ansicht wird es Nutzern ermöglicht, sich schnell zu orientieren und auf klassische Weise eine Webseite zu pflegen. Die anderen Ansichten dienen meistens dem Webdesigner, um einen Überblick über Abstände und Gestaltung zu erhalten. Diese Erweiterung bietet eine praktische Lösung für Nutzer, die den Frontend-Editor oder die Desktop-View als zu komplex empfinden, um kleinere Änderungen an der Webseite vorzunehmen. Zudem ist es einfacher, einzelne Sektionen auf einer Seite zu verschieben.
