Digital Experience durch intuitive Benutzeroberflächen

Moderne Konzepte schaffen Content Management der nächsten Generation

Christiana Arnold
intuitive Benutzeroberflächen Interface Design Design Digital Experience CMS
Der Schlüssel für eine intuitive Arbeitsweise in Web-Anwendungen liegt in der Vereinfachung von Benutzeroberflächen. Mit solch einem digitalen Erlebnis können Redakteure ihre Hauptaufgabe, Inhalte zu erstellen, effizienter meistern.

Auch Forrester Research stellt in der Studie "Web Content Management für das digitale Kundenerlebnis" fest, dass Anbieter mehr auf die Nachfrage nach Funktionen für die Verwaltung von digitalen Erlebnissen reagieren. Hierzu zählt auch die Anpassung von Benutzeroberflächen.

Aber kann die Bearbeitung von Websites so einfach sein?
Meist steckt hinter dem Stichwort "intuitive Benutzeroberfläche" eine zwar geordnete, aber veraltete und abstrakte Struktur. Die Bearbeitung der Website findet beispielsweise über Listen oder Baumstrukturen statt, die wenig Freiraum für die Gestaltung der Seite geben.

Eine Lösung dafür ist das sogenannte Inplace Editing. Es bietet eine Möglichkeit, die Website schnell und einfach zu bearbeiten.

Was ist Inplace Editing?

Inplace Editing lässt das Bearbeiten von Inhalten durch authentifizierte Redakteure direkt in der Website bzw. Vorschau der Website zu. Es ist nicht nötig, zwischen verschiedenen Anwendungsansichten hin- und herzuschalten.



Im Beispiel sieht der Redakteur anhand des ausgewählten Stift-Icons, dass er sich im Bearbeitungsmodus befindet. Will ein Redakteur nun z.B. Text ändern, kann er einfach "inplace" in eines der Textfelder klicken. Die Änderungen werden beispielsweise durch regelmäßiges, automatisches Speichern gesichert.
Auch ein eingebundener Editor erleichert die Bearbeitung im Textfeld, sodass keine HTML-Kenntnisse seitens der Redakteure nötig sind.
Inplace Editing wird allerdings auf unterschiedliche Arten eingesetzt: Einige Anwendungen ermöglichen das Arbeiten in Pop-Ups, andere direkt in der Website, wieder andere bezeichnen das Vorhandensein eines WYSIWYG-Editors als Inplace Editing.

"Echtes" Inplace Editing lässt zu, dass keine unnötigen Barrieren zwischen dem Redakteur und seinem Ziel entsteht. In welcher Weise z.B. das Speichern der Inhalte funktioniert, spielt dabei keine Rolle. Wichtig ist, dass er Texte, Bilder, etc. ohne Komplikationen anpassen kann.

Es geht auch komplex-einfach: Vielschichtige Seiten mit Widgets

Neben der einfachen Form des Inplace Editings ist, es auch möglich, komplexe Websites abzubilden, indem man das Bearbeitungskonzept mit weiteren Konzepten kombiniert. Beispielsweise können Widgets – d.h. Bausteine für Texte, Bilder, … – in die Seite eingefügt werden. Diese lassen sich einfach bearbeiten und neu arrangieren.
Der Redakteur fügt mit Stift-Icon ein neues Widget ein:
Anschließend kann er aus den vom Designer oder Website-Entwickler vorgefertigten Bausteinen auswählen:


Diese Bausteine können nach belieben erweitert werden.

Medien wie Bilder oder Videos können sogar einfach per Drag & Drop in das Widget gezogen oder über den Medienbrowser eingefügt werden.


Das Verschieben von Widgets ist ebenfalls per Drag & Drop möglich:


Ist der Redakteur mit seiner Bearbeitung fertig, kann er durch einen Wechsel in den Vorschau-Modus sehen, wie seine Website live aussehen wird:


Aber was ist mit Meta-Attributen?

Diese Bearbeitungskonzepte zwingen Redakteure nicht länger, sich mit darunterliegenden Strukturen auseinandersetzen zu müssen.

Ist dies aber gewünscht, können die Widgets auch hier helfen. Mithilfe der "Rückseite" können tiefer gehende Eigenschaften einer ganzen Seite oder eines Widgets bearbeitet werden (bspw. keywords, tags, etc.).
Ein Redakteur wählt die Seiteneigenschaften (links) bzw. Widget-Eigenschaften (rechts) aus. Anschließend werden ihm diese auf der "Rückseite" angezeigt.

Die Attribute sind per Inplace Editing änderbar.

Vorteile von Inplace Editing

  • Intuitive Bearbeitung von Texten und Bildern
  • Freiheit bei der Gestaltung durch moderne Bearbeitungshilfen
  • Direkte Änderungen auf einen Blick sichtbar
  • Kein Wechsel zwischen Anwendungsfenstern
  • Trennung vom Backend ermöglicht Zugang ohne Barrieren
  • Keine versehentlichen Änderungen
  • Effizientes und wirtschaftliches Arbeiten
  • Ohne Schulungen oder Vorkenntnisse
  • Voraussetzung ist nur ein moderner Web-Browser, der HTML5 und CSS3 unterstützt

    Was muss beachtet werden?

    Vor Beginn eines Web-Relaunches sollte festgelegt werden, welche Komponenten des Inplace Editing- und Widget-Konzepts dringend notwendig sind. Somit kann abgeschätzt werden, wie lange das Projekt dauert.

    Fest steht, dass dieses Bearbeitungskonzept sowohl für kleine als auch große Projekte hilfreich ist, den Redakteuren ein positives Erlebnis verschafft und den Geschäftserfolg dank effizienter Arbeitsweise steigert.