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
graphical user interface, application

smartportrait Website

smartportrait.io ist eine Plattform für hochwertige und konsistente Mitarbeiterportraits. Ein erfahrenes Fotobearbeitungsteam verwandelt Handyfotos in beeindruckende Studioqualität. Individuelle Anpassungen und erstklassige Bearbeitung schaffen eine vielfältige Portrait-Bibliothek für zahlreiche Einsatzmöglichkeiten.Das Smartportrait wurde von den Mitbegründern Boris und Johannes ins Leben gerufen. Nicole komplettiert das Team und bringt ihre Content Expertise ein. Gemeinsam revolutionieren sie den herkömmlichen …

graphical user interface, text, application, chat or text message

VBZ Online Website

VBZonline ist ein einzigartiges Magazin, das informative Geschichten über den Alltag im Zürcher Verkehr und seine Akteur:innen erzählt. Es widmet sich Themen wie einem nachhaltigen Lebensstil, urbanem Leben, Mobilität und vielem mehr.AusgangslageAnfang 2022 haben wir die bestehende Webseite unverändert übernommen und kontinuierlich gepflegt. Im Frühling dieses Jahres haben wir dann den mit Spannung erwarteten Relaunch …

Ringier Advertising Website & Web-App

73 Brands, über 100 Werbeformate, Millionen von Nutzer:innen. Ringier Advertising vermarktet die Medientitel und Marktplätze von nationaler Strahlkraft von Ringier, Ringier Axel Springer und Swisscom (bluenews, local.ch, search.ch) sowie weiteren Partnern. Ringier Advertising ist die Ansprechpartnerin für die Werbekund:innen der Ringier AG.Sie unterstützen Werbeagenturen, Grosskunden und auch NGOs bei der Suche nach passenden Marken und …

how.fm UX, Design & Development

how.fm bietet digitale Dienstleistungen im Bereich von Trainingssoftware in der Logistik-Branche an. Unser Team in Deutschland betreut how.fm mit Design und Entwicklungsarbeiten rund um deren Websites, Kampagnen und Landingpages.Die Software von how.fm dokumentiert Prozesse digital und führt zu einer automatisierten Einarbeitung von Mitarbeiter*innen. Das SAAS (Software-as-a-Service) Produkt beinhaltet videobasierte Schulungen in vielen Sprachen die interaktiv …

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 auch ausserhalb der Schule für ein breiteres Publikum wie Jugendliche, Eltern, Lehrpersonen sowie Berufsberater:innen 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 Inhalte …

Content Hub Migros Bank

Migros Bank Online Magazin & Content Hub

Das Corporate Design der Migros Bank hat ein Rebrand erhalten und wir haben den aktuellen Blog sowie den Content Hub entsprechend adaptiert. Wo vorher vor allem grün und weiss vorhanden war, ist nun eine Diversität an fröhlichen Farben zu finden.Seit 2015 begleiten wir das Content Marketing Team der Migros Bank. In dieser Zeit haben wir …

Nahrin AG Konzept, UX & UI Design

Für das Schweizer Familienunternehmen Nahrin haben wir den Onlineshop neu gestaltet, mit Fokus auf ein einfaches und intuitives Shoppingerlebnis.Die Website von Nahrin ist ein wichtiges Standbein für den Verkauf ihrer natürlich hergestellten Bouillons, Gewürze und Nahrungsergänzung. Die Anforderungen für das Redesign waren, dass es für Benutzer:innen einfacher wird, die passenden Nahrin Produkte zu finden und …

Screenshot of Boris Baldinger Homepage

Boris Baldinger Website

Boris Baldinger ist ein Spezialist für Personal Branding und Business-Fotografie. Menschen werden bei ihm zu Persönlichkeiten, Charakterköpfe zu Brands. In seinen Fotos reflektiert er, wofür jemand steht und arbeitet. Seine ursprüngliche Website aus dem 2010 widerspiegele jedoch nicht mehr seinen offenen Charakter und seine hoch qualifizierte Arbeit. Wir durften mit einem Website-Relaunch seine Persönlichkeit zum …

Pro Helvetia Online Art Magazin

Um die Zielgruppe der Kulturschaffenden abzuholen, brauchte es eine Website mit Besonderheiten und Überraschungselementen. Ein einzigartiges Online Magazin mit zahlreichen Animationen und aufwändigen Styles. Das brandneue Pro Helvetia Magazin – V/A – Various Artists – ist ein wahres Erlebnis.

SOMEDIA Press AG Konzept & UX Design für das Online News Portal

Für ein Newsportal ist es besonders wichtig, dass sich Leser*innen über diverse Bildschirmgrössen informieren können. Klares reduziertes Design, gute Lesbarkeit, sowie eine gute Benutzerführung über diverse Endgeräte hinweg, stehen dabei im Fokus. Wir durften das regionale News-Portal des Medienhaus Somedia in Chur bereits zum zweiten Mal beim Relaunch begleiten.Neues Kleid mit guter LesbarkeitSeit 2016 dürfen …

Pro Helvetia Website

Im engen Austausch mit der Designagentur Velvet und unserem langjährigen Kunden Pro Helvetia setzten wir die digitale Bücherplattform um. Es entstand eine neue, individuelle WordPress Seite, welche sich innerhalb der allgemeinen Pro Helvetia Multisite befindet.

Screenshot of the registration onboarding for the HIN Client

Health Info Net (HIN) Applikation

Die Health Info Net AG (HIN) schützt sensible Patientendaten in der digitalen Welt und ist der Standard für sichere Kommunikation im Schweizer Gesundheitswesen. Wir unterstützen HIN laufend als Digitalagentur mit User Experience, User Interface Design und Programmierungsarbeiten.