Ein neues Interaktionskonzept für die Inhaltserfassung im CMS

Für das Schweizer Content Management System CMSBOX

Als Content Manager ist es wichtig schnell und effizient Inhalte die man online kommunizieren will zu erfassen und bearbeiten. Die Berner Firma CMSBOX GMBH hat uns angagiert ein Interaktionskonzept der neuen Version des hauseigenen Content Management Systems „CMSBOX“ zu konzipieren.

Als Content Manager ist es wichtig schnell und effizient Inhalte die man online kommunizieren will zu erfassen und bearbeiten. Die Berner Firma CMSBOX GMBH hat uns angagiert ein Interaktionskonzept der neuen Version des hauseigenen Content Management Systems „CMSBOX“ zu konzipieren.

Seit über 10 Jahren bietet das innovative Content Management System CMSBOX ein sogenanntes „inline editing“ an. Was heisst, dass Content Manager direkt innerhalb der Webseite Ansicht auch bearbeiten können, ohne dass man in ein Backend (Bearbeitungs-Modus) des Systems wechseln muss. Dafür wurde die CMSBOX sogar mit dem Swiss Web Award ausgezeichnet. Für die neue Version 3.0 wurden wir angefragt das CMSBOX-Team hinsichtlich User Experience Design zu unterstützen.

Vorgehen

Interaktive Wireframes mit Invision-Prototype
Interaktive Wireframes als Invision Prototyp

Interaktive Wireframes

Erste Iterationen des Interaktions-konzeptes fanden anhand von Wireframes statt, welche mit Hilfe eines Invision Prototyps interaktiv wurden. Somit konnte das ganze Projekt-Team die Idee der neuen Interaktion und Abläufe anhand von interaktiven Screens erleben, um diese auf die Machbarkeit zu überprüfen.

Funktionaler Prototyp

In einer weiteren Phase wurde das neue Konzept vom Entwicklungsteam der CMSBOX GMBH in eine Testinstallation integriert. Der funktionale Prototyp diente als Grundlage für die bevorstehenden Benutzertests. Denn nur mit einem qualitativ hochwertigen Funktions-Prototypen konnten wir die komplexen Interaktionen und Abläufe auf Effizienz und Verständnis testen.

cmsbox-user-testing
Remote User Test via Skype

User Testing

Nachdem das neue Interaktionskonzept als funktionaler Prototyp implementiert wurde, starteten wir mit den Benutzertests. Die Tests wurden Remote durchgeführt, dass heisst, die Benutzer haben via Skype am Test teilgenommen und mussten somit nicht extra nach Bern anreisen. Die Test-Szenarien wurden auf das schnelle Erfassen von Inhalten („Fast Content Creation“) ausgelegt. Die Erkenntnisse der Benutzertests waren sehr hilfreich und dienten als Grundlage für weitere Design-Iterationen, welche schlussendlich zum Endprodukt führten.


Das neue Interaktions-Konzept

Schnelle Inhaltserfassung

Das ganze Interaktionskonzept haben wir mit Fokus auf „fast content creation“ erstellt. Eine Website sollte möglichst schnell mit Inhalten befüllt werden können. Deshalb werden nun dem Autor die nötigen Optionen im Kontext zur Auswahl gezeigt. Ein Beispiel dafür ist, wenn ein Text editiert wird, wird die Toolbar erst dann angezeigt, wenn der Content Manager auch wirklich diese Aktion auslösen möchte. In diesem Fall, sobald der Text selektiert wird.

Inhalte hinzufügen

In der CMSBOX können verschiedene Inhaltselemente hinzugefügt werden. Diese stehen neu beim Aufbau der Seiten direkt im Inhaltsbereich zur Verfügung. Eine Schaltfläche „+“ öffnet die verschiedenen Möglichkeiten wiederum im Kontext der Website. Diese Optionen werden dem Benutzer da angezeigt, wo er die Inhalte auch erfasst. Somit verliert dieser keine unnötige Zeit, um den Mauszeiger zum Beispiel zur Seitenleiste zu bewegen, um dann die gewünschte Option auszuwählen.

Responsive Design

Die neue Version des Content Management Systems sollte den neusten Ansprüche der Webtechnologien und vor allem des Responsive Designs entsprechen. Kunden sollten die auf der CMSBOX basierten Websites in den verschiedenen Gerätegrössen innerhalb des CMS testen können, um das Bewusstsein der Autoren für die unterschiedlichen Endgeräte zu fördern. Deshalb gibt es neu einen sogenannten „Device Switch“, mit welchem die Webseite während dem Bearbeiten auf den verschiedenen Bildschirmgrössen getestet werden kann.

Weiter war der Anspruch, dass alle Interaktionen auf Touch-Bedienung ausgelegt werden, damit eine Website auch auf einem mobilen Gerät bearbeitet und somit von unterwegs einfach aktualisiert werden kann.

 

Detaillierte Funktionen der CMSBOX können auf der Website cmsbox.ch gefunden werden.

Art
Interaktionskonzept für CMSBOX

Kunde
CMSBOX GmbH

Leistungen
Design

Website
https://www.cmsbox.ch/cms

cmsbox screenshot features

Kanton Zürich, Bildungsdirektion Web Applikation

Zusammen mit der Bildungsdirektion Kanton Zürich, haben wir ein Portal zum Thema Berufswahl konzipiert und umgesetzt, welches neu öffentlich und ausserhalb der Schule für ein breiteres Publikum wie Jugendliche, Eltern, Lehrpersonen sowie Berufsberater zugänglich ist. Das Portal läuft technisch über ein sogenanntes „Headless“-CMS, das sich Daten aus unterschiedlichen Quellen über verschiedene Schnittstellen einholt, sodass die …

Mica Insurance Website

Wir durften Mica Insurance – den neuen Anbieter von Versicherungen und Sensorik – beim Umsetzen ihrer Online-Strategie unterstützen und haben für die Website die Design-Sprache entwickelt und anschliessend das Design und die Website umgesetzt. Mica gestaltet Versicherungen so, dass sie zeitgemäss sind. Digital. Einfach. Smart. Das Ziel ist es, Sicherheit und «Peace of Mind» zu …

hostettler autotechnik ag Website & Online-Buchung

Für autofit – eine Garagengruppe knapp 300 Garagen in der ganzen Schweiz verteilt – haben wir 2019 die neue Website umgesetzt und begleiten den Kunden auch weiterhin.

Humanis AG Website

Seit über 30 Jahren bringt die Humanis AG Menschen und Firmen passend, gekonnt und nachhaltig zusammen. Wir haben dem Unternehmen ein neues Website-Design auf Basis des existierenden Corporate Designs erstellt und die Website mit WordPress und Custom Blocks für den Block-Editor (Gutenberg) umgesetzt.

schilling partners ag Website

schilling partners ist eines der etabliertesten Schweizer Executive-Search-Unternehmen mit mehr als 30 Jahren Erfahrung. Wir haben dem Unternehmen ein neues Website-Design auf Basis des existierenden Corporate Designs erstellt und die Website mit WordPress und Custom Blocks für den Block-Editor (Gutenberg) umgesetzt.

Die VBZ Traffic Media Produkte Übersicht

VBZ Traffic Media Ad Calculator

Damit Werbekunden der Verkehrsbetriebe Zürich (VBZ) einfach und online ihre Werbekampagnen planen können, haben wir zusammen mit den Verantwortlichen der VBZ ein Online-Rechner für Werbung auf Tram und Bus konzipiert und entwickelt. Ausgangslage Die Trams und Busse der Verkehrsbetriebe Zürich (VBZ) werden rege genutzt. Da macht es natürlich Sinn, diese für Werbezwecke zu nutzen. Die …

Swisscom AG Microsite

Am 16. April 2019 hatte der Bauer Hanspeter Benz für einen Tag ein echtes Picasso-Gemälde bei sich im Stall hängen. Wie es dazu kam, und welche Rolle wir dabei gespielt haben, erzählen wir hier.

SWICA Blogs

Statt wie bisher ihre Geschäftskunden mit Broschüren und Flyer zu informieren, hat die SWICA Krankenversicherung sich entschieden, einen Blog zu starten. Wir durften sie dabei vom Start bis zum Launch im April 2018 und darüber hinaus begleiten.

SWICA Magazin

Digitale Publikationen sind mittlerweile ein wichtiger Bestandteil einer Marketing-Strategie. Da wir viel Erfahrung mitbringen, ganzheitliche Lösungen der Online-Kommunikation unserer Kunden zu gestalten und umzusetzen, hat uns die Versicherung SWICA beauftragt, ihre bisher nur als Druckversion verfügbare Kundenzeitschrift digital zu bringen. Neu können die Inhalte von SWICA „Aktuell“ online und unterwegs gelesen werden und haben somit …

Swisscom Wettbewerb

Lange standen sie fast an jeder Ecke, spätestens seit dem Siegeszug des Handys fristen sie jedoch ein einsames Dasein: die Publifon-Telefonkabinen. Laufend werden die letzten verbliebenen Kabinen abgebaut, eine Ära geht zu Ende. Was war das Ziel des Projektes? Swisscom wollte den 10 letzten Telefonkabinen ein zweites Leben ermöglichen und sie kreativen Köpfen überlassen. In …

Kaufleuten Website & Payment Integration

Für eine Event-Location ist die Zugänglichkeit ihrer Angebote das Wichtigste überhaupt. Das Kaufleuten hat uns beauftragt, ihre Website mit dem „Mobile-First“ Ansatz neu zu konzipieren, sowie ein Online-Payment zu integrieren, damit ihre Kunden direkt und von überall Tickets zu den Klub-, Konzert- und Kulturanlässe erwerben können. Heute sind nicht nur die Veranstaltungen mobil von unterwegs …

klingler consultants Corporate Website

Für klingler consultants durften wir ihren ganzheitlichen Webauftritt neu gestalten und umsetzen. In Zusammenarbeit mit unserem Partner Fotograf Boris Baldinger ist die Bildsprache der Teambilder entstanden.