Im vorangegangenen Artikel Update von imperia 9 auf imperia 10 wurde der technische Ablauf des CMS-Versionsupgrades thematisiert. Dieser Beitrag behandelt Neuheiten von imperia 10 aus Sicht des Content Management Redakteurs mit den Fragestellungen:

  • Wie sieht die neue Benutzeroberfläche aus?
  • Gibt es grundlegende Verhaltensänderungen?
  • Welche neuen Features gibt es in imperia 10?

 

An dieser Stelle möchte ich ausdrücklich erwähnen, dass der Artikel sich auf eine Vorabversion von imperia 10 bezieht. Bis zur Release-Version kann sich das Verhalten ändern. Zudem handelt es sich bei Usability-Aspekten um meine persönliche Meinung und muss sich nicht mit Ihren Vorlieben decken.

 

Die Imperia AG beschreibt in ihrer Release-Ankündigung, dass der Fokus des Major-Releases auf das Benutzererlebnis des Redakteurs gelegt wurde. Flat Design, klare Strukturen und bessere Lesbarkeit sollen die Benutzerfreundlichkeit erhöhen. Responsive Design soll imperia CMS 10 geräte- und auflösungsunabhängig nutzbar machen.

Im Praxistest wird sich zeigen, wie sich die neueste Content Management Lösung schlägt.

 

Die imperia 10 Login-Maske

Nach erfolgreichem Update oder Neuinstallation ist die Login-Maske die erste Oberfläche, die ein Content-Redakteur zu sehen bekommt:

Login-Maske imperia 10

Das Facelifting von imperia 10 ist nicht zu übersehen. Der Hintergrund ist nun ein dunkler Verlauf, auf dem das neue Logo über dem Login-Formular platziert ist.

Eine Versionsnummer des Content Management Systems ist im Logo nicht mehr enthalten:

Login Logo imperia 9
Login Logo imperia 10

Wie aus der vorangegangenen Version gewohnt, wird man nach erfolgreichem Login auf das imperia-Dashboard weitergeleitet.

 

Das Dashboard – imperias Widget Schaltzentrale

Mit imperia 10 bleibt der modulare Aufbau des imperia-Dashboards erhalten. Den Hauptbereich kann ein Content-Redakteur oder CMS-Administrator nach belieben mit sogenannten Widgets aufbauen. Die Einstellungen des Dashboards werden im Profil des angemeldeten Users individuell gespeichert:

Dashboard imperia 10

 

Header

Der Header wurde stark verkleinert, so dass dieser nicht mehr so viel Platz wie in imperia 9 einnimmt. Da man eher vertikal als horizontal arbeitet, vermeidet dies unnötiges Scrollen.

Hier die Vergleichsdaten:

  • Höhe neuer Header: 40 px
    Header imperia 10
  • Höhe alter Header: 113 px
    Header imperia 9

 

Menü

Das aus imperia 9 bekannte Dropdown-Menü wurde auf die Linke Seite versetzt und lässt sich über den Hamburger Menu Button ein- und ausklappen. Die Einstellung, ob das Menü ein- oder ausgeklappt ist, wird vom CMS im Cookie des Users unter der Variable i-main-menu-visibility gespeichert.

Es gibt leider 2 Dinge, die mich beim Gebrauch des Menüs störten:

  1.  Empfindlichkeit

    Das Menü ist in der 2. Ebene sehr empfindlich. Man muss mit der Maus ziemlich genau arbeiten, damit es nicht versehentlich wieder schließt oder die darunterliegende Ebene öffnet. Man hat quasi nur den hier aufgezeigten Korridor, in dem man sich mit der Maus bewegen darf:

    Menü Korridor
    Es gibt eine sehr gute Fallstudie, wie Amazon einen dreieckigen Bereich ausgehend vom Mauszeiger aufspannt, um ein versehentliches Schließen oder Öffnen von Submenüs zu unterbinden, solange sich die Maus in diesem Kanal bewegt. Das jQuery-Plugin jQuery-menu-aim stellt genau diese Funktionalität zur Verfügung.

  2. Keine Icons im Submenü

    Wie man im oberen Screenshot sehr schön sehen kann, sind die Icons im Untermenü verschwunden.
    Ich weiß, dass es Ansätze im Mobile-Bereich gibt, bei denen man ganz auf Icons verzichtet. Den Vorteil von jahrelang gelernten Grafiken darf man allerdings nicht unterschätzen. Ich musste erst einmal lesen, welcher Menüpunkt für welche Aktion gilt. Unterbewusst galt meine bisherige Aufmerksamkeit wohl eher den grafischen Symbolen, als der Textvariante.

UPDATE 28.02.15
Die Einstellung der Empfindlichkeit des Menüs ist auf der TODO-Liste und wird noch angepasst.
Siehe Kommentar von Guido Flohr

 

Footer

Den Footer in imperia 10 gänzlich zu entfernen, halte ich für eine sehr gute Idee. Er enthielt keine nützliche Information, die einen Redakteur bei seiner täglichen Arbeit unterstützt. Den Copyright-Hinweis habe ich nicht mehr auffinden können, die Lizenzinformationen sind weiterhin über die System-Informationen des Setting-Dropdowns abrufbar.

 

Widgets

Folgende Neuerungen gab es bei den Dashboard-Widgets, die in der Vorabversion von imperia 10 enthalten sind:

  • Hermes-Status
    Der imperia Systemdienst Hermes lässt sich neuerdings über den toggle-Button ein- und ausschalten.
  • Current User Activities
    Statistiken über Rollen, Benutzer und angemeldeten Usern.
  • Imperia News
    Das Widget zeigt die letzten 2 Top-News der Imperia AG, welche auch auf der Startseite dargestellt werden.
  • Piwik
    Das Piwik-Widget zeigt Statistiken des kostenlosen OpenSource Analytics Tool Piwik. Bevor man es nutzen kann, muss man die Konfiguration site/config/piwik.conf an seine Piwik-Installation anpassen. Eine Beispielkonfiguration findet man unter piwik.conf.sample
  • WiredMinds
    Ähnlich zum Piwik-Plugin verhält sich das WiredMinds-Widget. Eine Konfiguration ist hier nicht notwendig. Die Statistiken werden angezeigt, sobald man sich über das Widget bei WiredMinds eingeloggt hat.

Dashboard Widgets imperia 10

 

Mobile Ansicht

Die mobile Ansicht reduziert das Menü auf die Icons, die Beschreibung der Menüpunkte wird ausgeblendet. Die 2. Navigationsebene verhält sich wie in der Desktop-Ansicht. Die Widgets sortieren sich untereinander und passen die Breite an den maximal verfügbaren Platz an. Etwas ungünstig für Mobilgeräte sind Scrollbalken, die bei manchen Boxen entstehen:

Dashboard imperia 10 mobile view

Leider konnte ich die Usability von imperia 10 nicht mit meinem Nexus 4 Smartphone auf Touch-Funktionen testen. Es scheint eine Weiche zu geben, die anhand des User-Agents eine andere View zur Darstellung heranzieht:

Dashboard imperia 10 smartphone view Nexus 4

Dies ist auch sehr schön reproduzierbar, indem man im Chromium Browser auf ein Mobile Device switched:

Dashboard imperia 10 smartphone view Chromium

UPDATE 28.02.15
Das Umschalten der Skins ist auch noch auf der TODO-Liste von Imperia. Man kann das in der Vorabversion bereits fixen, indem man den Ordner site/view/imperia/iphone komplett löscht.
Siehe Kommentar von Guido Flohr

 

Ein neues Dokument erzeugen

Nun zur eigentlichen redaktionellen Arbeit – wir erstellen ein neues imperia-Dokument. Dieses erzeugen wir in einer imperia-Rubrik, editieren es und schalten es anschließend frei.

Rubrikenbaum

Neues Dokument imperia 10

Der Rubrikenbaum besteht nur noch aus einer Farbe: schwarz

Leider hat das einen entscheidenden Nachteil. Man kann nicht erkennen, in welcher Rubrik Dokumente erstellt werden können und in welcher nicht. In meinem Beispiel darf die Root-Rubrik lediglich Unterrubriken enthalten, in allen anderen ist es erlaubt Dokumente anzulegen. Man muss also per Onmouseover-Effekt prüfen, ob sich hinter der Rubrik ein Link verbirgt oder nicht.

Editieren & Vorschau

Für den Testdurchlauf kam das Standard-Template von imperia zum Einsatz. Es besteht zwar lediglich aus einer Textbox, man kann den neuen Preview-Modus trotzdem sehr schön veranschaulichen:

Vorschau imperia 10

Die neue imperia Vorschau bietet dem Redakteur die Möglichkeit, den eben eingegeben Content in unterschiedlichen Größen anzuschauen. Bereits voreingestellt sind die Mobile-Größen 3.5, 7 und 12 Zoll, als auch die Desktopgröße von 100% des aktuellen Bildschirms. Das Fenster lässt sich über die Ränder größer und kleiner ziehen, sowie mittels Eingabe der Breite und Höhe einstellen. Zudem kann für die Mobilen Geräte zwischen Landscape- und Portrait-Modus gewechselt werden.

Dieses Feature ist bei responsiven Seiten sehr hilfreich. Der Content-Redakteur kann das Umbruch-Verhalten direkt testen und eventuelle Schwachstellen (zu lange Wörter, zu große Bilder) schnell identifizieren. Sehr gelungen!

 

Der imperia Schreibtisch und seine Ansichten

Im Standard-Workflow wird man nach dem Speichern seines Dokuments auf den imperia Schreibtisch weitergeleitet. Dieser beinhaltet alle Dokumente, die sich aktuell im Workflow befinden.

Der Schreibtisch bietet per Default folgende Views:

Classic-View

Desktop Classic-view imperia 10

Compact-View

Desktop Compact-view imperia 10

Default-View

Desktop Default-view imperia 10

Detail-View

Desktop Detail-view imperia 10

In jeder Desktop-Ansicht sind im inneren Bereich horizontale und vertikale Scrollbalken zu sehen, obwohl sie in den meisten Fällen gar keine Funktion haben. Im Chromium sind sie von der Darstellung noch sehr dezent, im Firefox hingegen sehr präsent.

Den vertikalen Scrollbalken würde ich lediglich einblenden, wenn er notwendig wird, den horizontalen sollte man gänzlich vermeiden.

Für die mobile Darstellung ändert sich der Schreibtisch nicht wirklich. Der innere Bereich wird zwar zusammengeschoben, so dass der Browser keine eigenen Scrollbars erzeugt, dafür werden die inneren Scrollbalken sehr klein. Hier könnte man noch eine wirkliche mobile-optimierte Ansicht mit großen Buttons für optimale Touch-Funktionen bereitstellen.

 

Der Document-Browser – Dokumenten­verwaltung mit imperia CMS

Eine Übersicht über die in den imperia Rubriken enthaltenen Dokumente liefert uns der Document-Browser. In imperia 10 lässt sich nicht nur die Infobox auf der rechten Seite ein- und ausblenden, sondern nun auch der Rubrikenbaum:

Document Browser 1 imperia 10

Document Browser 2 imperia 10

Document Browser 3 imperia 10

Document Browser 4 imperia 10

Document Browser 5 imperia 10

Document Browser 6 imperia 10

Die Infobox-Labels brechen leider um, wobei auf der rechten Seite noch sehr viel freier Platz existiert. In der Iconbox-View sieht der Infobox-Bereich korrekt aus, leider ist die Darstellung der Dokumente eher suboptimal. Die Rubriken-Ansicht ist konsequent über alle Masken hinweg in Weiß-Schwarz-Orange gehalten. Die fehlenden Zeilenbegrenzungen im Rubrikenbaum und in der Infobox hinterlassen bei mir einen eher unaufgeräumten Eindruck, kann aber auch die Macht der Gewohnheit sein.

 

Das Media Asset Management (MAM) – zentrale Medien-Verwaltung

Was der Document Browser für imperia CMS Dokumente ist, das ist das Media Asset Management für Bilder, PDFs, Word-Dokumente und sonstige Binärformate.

Media Asset Management imperia 10

Der Aufbau des MAM ist analog zum Document Browser. Auf der linken Seite wir der MAM-Rubrikenbaum dargestellt, in der Mitte die eigentlichen Assets und rechts davon eine Infobox, mit Detailinformationen und Shortcuts auf das Dokument.

Auch hier lässt sich sowohl der Rubriken- als auch der Infobereich komplett ausblenden.

Ausgezeichnet finde ich die Möglichkeit, Bilder einfach per Drag&Drop in die ausgewählte Rubrik hochladen zu können. Das erspart eine Menge Klicks durch den imperia Upload Workflow:

imperia 10 Drag&Drop Upload Schritt 1

imperia 10 Drag&Drop Upload Schritt 1

imperia 10 Drag&Drop Upload Schritt 1

 

Workflows – maßgeschneiderte Prozesse per Drag&Drop

Das Herzstück von imperia CMS sind die Workflows. Über die imperia Workflow-Engine lassen sich redaktionelle Prozesse per Drag&Drop in beliebiger Komplexität abbilden. Sei es ein einfaches Vier-Augen-Prinzip, Vertreterregelungen, komplexe Eskalationen, Anbindung von Drittsysteme oder E-Mail Benachrichtigungen – alles ist möglich.

Wie viele andere Bereiche in imperia CMS, so ist auch der Workflow PlugIn-basiert umgesetzt. Mit kundenspezifisch entwickelten Workflow-PlugIns ist der Umfang sehr einfach, modular und updatesicher erweiterbar.

Workflow Engine imperia 10

Das Workflow Grid ist in imperia 10 in HTML5 umgesetzt, so dass kein installiertes Java mehr Voraussetzung zur Workflow-Konfiguration im Browser ist. Das erhöht die Sicherheit des Client-Rechners, ist zudem performanter und deutlich responsiver in der Handhabung.

 

Das Archiv – nichts geht verloren

Bei jeder Änderung an einem imperia-Dokument, erzeugt das Content Management System eine Archivversion mit genauem Timestamp und der Dokumenten-Historie. Somit lässt sich jederzeit genau nachvollziehen, welcher User zu welchem Zeitpunkt welche Änderungen vorgenommen hat.

Archiv imperia 10

Das imperia Archiv unterscheidet sich in der Darstellung der Baumstruktur von der Document-Browser- oder MAM-Ansicht. Es wird jeweils nur der Rubrikenpfad und die Children-Rubriken der aktuellen Ebene dargestellt. Beim Klick auf das entsprechende Dokument erscheinen die Archivversionen. Die beendeten Versionen werden mit (finished), die aktuell freigeschaltete Version ist mit einem Schild-Icon gekennzeichnet.

 

Mein persönliches Fazit

  • Verkleinerung des Headers und ein Ausblenden des Footers sind sehr sinnvoll, um Platz für wichtige redaktionelle Funktionen zu schaffen
  • Das Starten und Stoppen des Hermes-Dienstes über das Hermes-Status-Widget ist eine praktische Erweiterung
  • Der Einsatz von Bootstrap in imperia 10 verbessert die Bedienbarkeit des Content Management Systems bei unterschiedlichen Bildschirm-Auflösungen
  • Die neue Vorschau-Funktion, die dem Redakteur die Möglichkeit gibt, auf unterschiedliche Bildschirmabmessungen umzustellen, vereinfacht das Testen responsiven Verhaltens stark
  • Der Drag&Drop Bildupload im MAM verkürzt Klickstrecken bei simplen Uploads ohne manuelle Erfassung von Metainformationen
  • Das HTML5 Workflow Grid ist deutlich performanter in der Handhabung und erhöht die Sicherheit des Client-Rechners, da kein aktiviertes Java-Plugin mehr benötigt wird
  • Das neue imperia Menü ist sehr empfindlich und man muss sehr genau mit der Maus arbeiten, um ein versehentliches Schließen oder Öffnen des darunterliegenden Menüs zu vermeiden
  • Ich empfinde die 2. Navigationsebene als unübersichtlich, da alle Menü-Icons entfernt wurden
  • Die imperia Oberfläche wurde zwar mittels Bootstrap responsive implementiert, ist aber nicht wirklich geräte- und auflösungsunabhängig umgesetzt. Es erscheinen viele horizontale Scrollbalken in Widgets oder inneren Frames, die Buttons sind sehr klein und sehr nahe beieinander. Eine echte Touch-Optimierung für Smartphones und Tablets wäre wünschenswert.
  • imperia 10 besteht aus sehr wenigen Farben und viel Weißraum, was an manchen Stellen einen unaufgeräumten Eindruck hinterlässt.
    Ein sehr gutes Beispiel hierfür ist die „Edit Category“-MaskeRubrik editieren imperia 10. Horizontale und vertikale Scrollbalken, der Edit-Link ist nicht als solcher erkennbar, keine klare Abgrenzung bei den Berechtigungseinstellungen, der Call-To-Action Button in der gleichen Farbe wie gewöhnliche Lables
  • Wenn man das MAM aus dem Editmode-Template heraus öffnet, enthält das PopupMAM Template Aufruf imperia 10 den kompletten Header und das imperia-Menü. Da es den Redakteur nur verwirrt und Platz verschwendet, sollten diese Seitenelemente ausgeblendet werden.
Auch hier noch einmal der Hinweis vom Seitenanfang, dass ich eine Vorabversion von imperia 10 getestet habe. Dieser Artikel wird natürlich gerne ergänzt, sollte eine neue Version erscheinen oder Hinweise kommentiert oder an mich herangetragen werden.

 
Über Kommentare und Anmerkungen würde ich mich sehr freuen!

Ein weiterer Artikel über die Kompatibilität von Projektumsetzungen ist bereits in Planung…

Bitte bewerten Sie meinen Beitrag:
grauenhafteinfach nur schlechtich habe es geschafft ohne einzuschlafengut ist gut genugsehr gut, bitte mehr davon (3 Bewertungen, Ø: 5,00 von 5)
Loading...