Cmsbox Content Management mit System Usability Dokumentation
Management summary «Einfach» gehört im Jahr 2007 unmittelbar nach «Wir», «Mehr», «Your» und «Leben» zu den fünf beliebtesten und am meisten verwendeten Wörtern in der Werbung. 1 Plötzlich ist also alles einfach. Einfach cool. Einfach verbunden. Aber was heisst eigentlich «einfach»? Einfachheit entsteht durch das perfekte Zusammenspiel nur weniger Faktoren, welches mit einigen grundlegenden Regeln beschrieben werden kann. Dadurch wird ein Prozess leicht verständlich und schnell nachvollziehbar. Einfacher gesagt als getan. Einfachheit passiert nicht einfach so. Um ein Produkt oder Service einfach zu gestalten, braucht es vor allem eines: Gestaltung! Die Gestaltungskriterien werden dabei durch den Benutzer definiert. Durch systematische Befragung und objektive Beobachtung werden die Bedürfnisse der Benutzer und die Schwachstellen des Produktes sichtbar. Cmsbox funktioniert einfach. Die cmsbox wurde nach den Prinzipien der benutzerzentrierten Gestaltung entwickelt. In zahlreichen Iterationen wurde das System gemeinsam mit den zukünftigen Benutzern laufend evaluiert und optimiert. «Einfachheit» ist mehr als minimale Komplexität. Sie ist durchdachte Gestaltung und sorgfältige Umsetzung. Sie schafft eine ganzheitliche Erfahrung und vermittelt dem Benutzer ein positives Erlebnis. The user stands above. We have to understand. 1 http://www.slogans.de/slogometer.php?year=2007 2
Inhalt User Needs 5 Vielseitige Bedürfnisse................................................. 6 Konkrete Anforderungen................................................7 Kreative Umsetzung................................................... 8 Interaction Design 9 Das Baukasten-Prinzip.................................................10 Nützliche Werkzeuge.................................................. 11 Spezifische Eigenschaften..............................................12 Aussagekräftige Symbole...............................................13 Ease Of Use 14 Benutzeroberfläche...................................................15 Evaluation...........................................................16 Accessibility.........................................................17 Eingabehilfen........................................................18 Automatisierung......................................................19 User Experience 20 Jetzt ausprobieren....................................................27 3
Einleitung Mit der Verbreitung des Internet in den 90er Jahren hat sich das Informationsverhalten unserer Gesellschaft grundlegend verändert. Selbst hochspezifische Informationen sind heute überall und jederzeit verfügbar. Für Firmen und Institutionen gehört es längst zum Standard, eine eigene Webseite zu betreiben. Nebst der Aktualität der Inhalte erwarten die Benutzer eine konsistente Gestaltung, eine intuitive Strukturierung der Inhalte und eine einwandfreie technische Umsetzung. Um diesen Bedürfnissen gerecht zu werden, sind viele kleine und mittlere Unternehmen auf professionelle Unterstützung angewiesen. Diese Unterstützung ist jedoch meist mit hohen externen Kosten und Umtrieben verbunden, während die Webpublisher massivem Termindruck und utopischen Preisvorstellungen ihrer Kunden gegenüberstehen. Um diese für alle Beteiligten unbefriedigende Situation zu verbessern, wurden so genannte «Content Management Systeme» (CMS) entwickelt, welche dem unerfahrenen Anwender ermöglichen sollen, die Inhalte einer Webseite selber zu erstellen und zu verwalten. Bereits die ersten CMS basierten auf einer Trennung von Inhalt und Gestaltung. Diese Trennung wird technisch durch eine generische Eingabemaske als Schnittstelle zur Datenbank realisiert. Die eigentlichen Inhalte werden mit Word-ähnlichen Editoren erstellt und direkt im Text formatiert. Für das Layout stehen dem Anwender je nach Inhalt mehrere spezifische Templates zur Verfügung. Mit dem Einsatz solcher Applikationen entstehen für den Betreiber jedoch neue Probleme: Die Bedienung vieler Systeme ist entgegen den Behauptungen ihrer Hersteller sehr kompliziert. Aber nicht nur das Erlernen der Bedienung fordert die Redaktoren heraus: Auch selber verwaltete Webseiten stehen den gleichen Anforderungen an Benutzerfreundlichkeit, Zugänglichkeit und graphischer Gestaltung gegenüber wie professionelle Webseiten. Dazu sind «Soft-Skills» notwendig, welche nur mit viel Aufwand oder durch Erfahrung erworben werden können. 4
User Needs 5
Vielseitige Bedürfnisse Die cmsbox wurde speziell im Hinblick auf ihre Benutzerfreundlichkeit entwickelt. Dabei spielten die Bedürfnisse und Anforderungen der zukünftigen Benutzer von Anfang an eine zentrale Rolle. In einem ersten Schritt wurden zahlreiche explorative Interviews mit Benutzern aus verschiedenen Interessengruppen durchgeführt. Danach wurden einige Teilnehmer zu einer moderierten Diskussionsgruppe eingeladen. Die qualitative Auswertung dieser Befragung ergab ein sehr heterogenes Anforderungsprofil. Redaktoren Einfache und effiziente Bedienung auch für Laien und sporadische Benutzer Hohe Flexibilität bei der Strukturierung und Gliederung der Inhalte Ansprechende und nachhaltig überzeugende Webseiten Webdesigner Maximale Freiheit bei der graphischen Gestaltung der Webseiten Das Designkonzept soll von den Redaktoren langfristig eingehalten werden Das System soll sauberen, schlanken und validen Code generieren Besucher Schöne, übersichtliche und informative Webseiten Nahtlose Einbindung von multimedialen Inhalten Kurze Ladezeiten und einwandfreie Funktionalität Usability-Spezialisten Schnelle Erlernbarkeit, hohe Fehlertoleranz und zielgerichtete Abläufe Konsequente Umsetzung der Richtlinien für behindertengerechte Webseiten Klare Trennung von Content-Navigation und Service-Navigation (Suche, usw.) 6
Konkrete Anforderungen Die cmsbox soll mit einer intuitiven Bedienung unerfahrene Benutzer dabei unterstützen, allgemein gültige Standards und Richtlinien automatisch einzuhalten. Diese bedürfnisbezogene Zielformulierung erfordert eine ebenso einfallsreiche, wie hochstehende technische Umsetzung. Auf der Suche nach möglichen Lösungsansätzen wurden zunächst Dutzende Systeme sorgfältig getestet und analysiert. 1 Überzeugende Teillösungen wurden weiterentwickelt und integriert, während problematische Ansätze systematisch umgangen wurden. Anhand der Benutzerbedürfnisse und der technischen Systemanalyse wurden konkrete Anforderungen abgeleitet: Bearbeitung direkt auf der eigenen Webseite (keine komplizierte Eingabemaske) Zentral definierte Formatvorlagen (Formatierung ohne Rich-Text Editor) Flexibel kombinierbare Elemente (keine einschränkenden Layoutvorlagen) Hierarchisch strukturierte Content-Navigation und globale Service-Navigation Konsequente Trennung von strukturierten Inhalten (XHTML) und Design (CSS) (keine tabellenbasierten Layouts) Erste Skizze eines Elements, welches mit Hilfe spezifischer Werkzeuge direkt auf der Webseite bearbeitet werden kann. 1 http://www.opensourcecms.com 7
Kreative Umsetzung Die Umsetzung der Anforderungen wurde stufenweise von Hand skizziert. Dabei wurden für jede Stufe jeweils mehrere Möglichkeiten aufgezeichnet und gegeneinander abgewogen. Bereits in dieser frühen Phase zeichnete sich die Interdependenz von Elementen, Eigenschaften und Werkzeugen ab: Ein kleines Set an Funktionen (Hinzufügen, Bearbeiten, Verschieben, Speichern und Löschen) wurden immer wieder auf unterschiedliche Elemente (Menus, Texte, Bilder, Links, Linien, usw.) mit spezifischen Eigenschaften (Breite, Position, Stil, usw.) angewendet. Daraus entstand schliesslich die Idee einer zentralen Toolbar mit globalen Werkzeugen und Element-spezifischen Einstellungen. Verschachtelte Elemente, welche je nach Inhalt neu zusammengesetzt und dem Kontext angepasst werden können. 8
Interaction Design 9
Das Baukasten-Prinzip Die Gestaltung der Interaktionsprozesse fand vorwiegend am Schreibtisch statt. Zunächst wurden schematische Prototypen gebaut, welche verschiedenen Testpersonen zur Beurteilung vorgelegt wurden. In zahlreichen Iterationen wurden die Prototypen umgebaut, weiterentwickelt und optimiert. Submenu 1 = + V Text Link Bild Datei V X Submenu 1 Submenu 2 Submenu 3 Einfach Submenu 4 Box Submenu 5 Liste Menu 1 Menu 2 Menu 3 Menu 4 login forum kontakt Flexible Elemente Auf der Ebene der Inhalte setzte sich das Konzept verschiedener Container-Elemente mit unterschiedlichen Inhalten durch: Artikel Texte, Bilder, Links, usw. Formulare Textfelder, Auswahlfelder Tabellen Zeilen und Spalten Submenu 2 Submenu 3 Submenu 4 Submenu 5 Standard Quatue euisit doluptat aci et nim velit, con hent nos elendiam quamcon sequis am quis duisl dit ex euisit ip et ex euipsus cidunt dunt vulputat. Ut erit il eugue dolum dolore er se duisi. Vulput nostrud dionum zzrillan essequat lutat. Venit la feum incil ea feuiscipit lamet wissectet praesenim dolore dolor sit ullan velesectet ing eui bla consequi tat amconullut nostrud eum quamcon eu facinisis augiat. Die Container und ihre Inhalte sollten vom Benutzer wie Lego-Steine zusammengesetzt werden können. Dazu fehlten jedoch noch die entsprechenden Werkzeuge. deutsch français italiano english cmsbox muristrasse 57 3006 bern contact@cmsbox.ch drucken sitemap suchen 10
Nützliche Werkzeuge Damit die Elemente möglichst komfortabel bearbeitet werden können, wurden neue Features und Funktionen eingebaut. Die Tasten zum Verschieben der Elemente wurden durch die Positionierung mit «Drag & Drop» ersetzt. Mit der «Zwischenablage» können mehrere Elemente stapelweise kopiert, ausgeschnitten und eingefügt werden. Lorem Ipsum Dolor Consect eur Adipiscing Nonummy Euismod Sit Amet Obis videntur parum clari Nam liber te mpor Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent delenit augue duis dolore te feugait nulla. > Eodem modo typi... Blandit praesent Mirum est nota re C M S E Textfeld 1 Zeile S A Ke in Sta ndardtext Hinzufügen X T * Im «Papierkorb» werden gelöschte Elemente aufbewahrt, bevor sie endgültig entfernt werden. Dieses Feature wurde später durch die Undo-Funktion ersetzt. Im «Verlauf» werden alle Aktionen aufgezeichnet und können über mehrere Schritte rückgängig gemacht werden. Um die Interaktionsprozesse für die verschiedenen Elemente zu vereinheitlichen, Deutsch English Français Typi non habent claritatem insitam, est usus legentis in: Qui Etiam Mirum Notare Demon Verunt Est A C B A B Quam 1 5 3 7 5 Quam littera gothica: Quam litt era gothica Submit Reset Suchen Sitemap Druck en AAA Login Zwischenablage Pap ierk orb Verlauf >>> T wurden die Funktionen später in einem speziellen Kontextmenu zusammengefasst. 11
Spezifische Eigenschaften Die spezifischen Eigenschaften der einzelnen Elemente wurden auf ein sinnvolles Mass reduziert. Die Einstellungen der Elemente werden in der Toolbar angezeigt, wo sie gleichzeitig auch angepasst werden können. Auf diese Weise kann beispielsweise die Breite oder der Stil eines Elementes verändert werden das markierte Element passt sich sofort den neuen Einstellungen an. So wenig wie möglich, so viel wie nötig Die Auswahlschalter der Formulare verdeutlichen dieses leitende Prinzip: Mit der Eigenschaft «Anzahl Optionen» können alle sinnvollen Varianten hergestellt werden: 1 Option Checkbox 2-3 Optionen Radiobuttons 4+ Optionen Drop-down Liste 12
Elegante Bedienung Die cmsbox erfindet sich selber neu: Mit der Version 2.1 wird die Bedienung der Toolbar noch eleganter, effizienter und einfacher. Die Menu-Symbole wurden durch Text ersetzt und können vom Nutzer schneller erfasst werden, weil Schriften Lesen ein hoch automatisierter Prozess ist. Die einzelnen Menü-Punkte werden dadurch trennschärfer. 13
Ease Of Use 14
Benutzeroberfläche Inline-Editor Die Bearbeitung erfolgt direkt auf der eigenen Webseite. Alle Bilder und Texte passen sich automatisch an das Layout und die gewählten Formatvorlagen an. Überschriften, Texte, Bilder, Links, Listen, Linien und Dokumente können beliebig kombiniert werden. Auch sortierbare Tabellen mit bis zu acht Spalten und interaktive Formulare sind frei definierbar. Drag & Drop Anklicken - ziehen - loslassen. Drag & Drop funktioniert für einzelne Inhaltselemente, ganze Boxen und die Navigation. Alle Inhaltselemente können untereinander und zwischen den Boxen verschoben und in andere Spalten platziert werden. Cut / Copy / Paste Mit dem Bearbeitungsmenu können ganze Seiten, Boxen und einzelne Inhalte kopiert oder ausgeschnitten werden. Die Elemente aus der Zwischenablage können auf der gleichen oder einer anderen Seite wieder eingefügt werden. Undo Redo Analog zur Textverarbeitung mit Schreibprogrammen können einzelne oder mehrere Arbeitsschritte rückgängig gemacht und bei Bedarf wieder hergestellt werden. In der Toolbar sind alle Aktionen als lückenloser Verlauf ersichtlich und verfügbar. Archiv Jede publizierte Seite wird automatisch archiviert und kann bei Bedarf abgerufen werden. Alle Inhalte früherer Versionen können aus dem Archiv kopiert und in die aktuelle Webseite eingefügt werden. Die wichtigsten Features der cmsbox 2.1 15
Evaluation Contextual Inquiry Die Güte der Benutzeroberfläche wurde vorwiegend mit systematischen Feldbefragungen erhoben. Das hypothesengeleitete Verfahren überzeugt mit einer effizienten Durchführbarkeit, einer hohen Validität und einer ausgezeichneten Aussagekraft. Bei den Untersuchungen wurde jeweils die Variante mit der klassischen Rollenverteilung durchgeführt: Der Testleiter gibt sich als Lehrling aus, während die eigentliche Testperson in der Rolle des Lehrmeisters oder der Lehrmeisterin den Umgang mit dem System erklärt. Shadowing Vor der eigentlichen Befragung wurden die Testpersonen jeweils eine Weile stillschweigend beim Umgang mit dem System beobachtet. Nachbefragung Nach der Untersuchung wurden schliesslich offene Interviews durchgeführt. Auswertung Die Auswertung erfolgte ausschliesslich auf qualitativer Basis. Bereits nach der ersten Testphase konnten zahlreiche Schwachstellen identifiziert und optimiert werden. Auf den folgenden Seiten werden einige dieser Verbesserungen beschrieben. Die cmsbox ist «work in progress»: sie wird laufend getestet, bewertet und verbessert. 16
Usability-Test Mit dem Fokus auf die Benutzerfreundlichkeit wurde die cmsbox Version 2.1.1 evaluiert und validiert. Untersucht wurden zwei Nutzer-Gruppen mit unterschiedlichem Erfahrungs-Hintergrund: neue Nutzer, welche die Web-Anwendung noch nicht kannten und erfahrene, die im Mittel seit neun Monaten damit gearbeitet haben. Es wurden der Zeitunterschied und die Qualität der Aufgabe erhoben, womit die Effizienz und die Erlernbarkeit sowie die Zufriedenheit und Nützlichkeit des Systems geprüft werden konnten. Aufgabe Die Studienteilnehmer wurden gebeten, auf einer cmsbox-website gemäss Aufgabenvorlage eine neue Seite zu erstellen und diese mit Inhalt zu füllen. Die Aufgabe enthält alle wesentlichen Elemente des Systems und ermöglicht, das Grundprinzip zu evaluieren. Ergebenisse Die Studienergebnisse legen nahe, dass die cmsbox insgesamt hoch benutzerfreundlich ist, dass für unerfahrene Nutzer aber nachwievor Optimierungsbedarf besteht. Aus der Aufgabenauswertung, den Beobachtungen und zusätzlichen Interviews konnten wichtige Hinweise zur Verbesserung des Systems erarbeitet werden. Diese sollen insbesondere neuen Nutzern das Erlernen der cmsbox vereinfachen und das Effizienzerleben erhöhen. Hauptbericht Weitere Informationen zum Testverfahren, zu den Resultaten und Empfehlungen sind im Haupt-Bericht «Benutzerfreundlichkeits- Studie der cmsbox Version 2.1.1» aufgeführt. 17
Accessibility Mit verschiedenen Massnahmen wird der barrierefreie Zugang für behinderte Personen ermöglicht. Die strikte Trennung von strukturierten Inhalten (XHTML) und graphischer Gestaltung (CSS) führt zu schlankem und gut lesbarem Code. Dabei werden nach Möglichkeit semantische XHTML-Tags mit verständlichen CSS-Klassennamen verwendet. Textausgabe Jede Seite kann mit dem Zusatz «text-only» als reine Textdatei abgerufen werden: http://www.example.com/content/text-only Damit wird auch der Zugang mit stark vergrösserten Schriften, Braille-Tastaturen und Vorlesegeräten problemlos möglich. Mit der cmsbox erstellte Webseiten sind auch für sehbehinderte Menschen problemlos zugänglich Meta-Informationen Die Metainformationen im HTML-Header enthalten eine kurze Inhaltsangabe sowie Hinweise auf weiterführende und übergeordnete Seiten. 18
Eingabehilfen Autocompletion Die Verlinkung von Elementen erfolgt über das Eingabefeld in der Toolbar. Für interne Links genügt die Angabe des Namens der gewünschten Seite. Das System berechnet bereits während dem Tippen mögliche Treffer: Der Benutzer kann aus einer dynamischen Liste unterhalb des Textfeldes den gewünschten Link auswählen. Bei externen Links und E-Mail Adressen wird eine Liste bereits verwendeter Eingaben vorgeschlagen. Datumseingabe Im Archiv werden alle publizierten Seiten aufbewahrt. Der Benutzer kann an einen beliebigen Tag in der Geschichte der Webseite reisen. Archivierte Inhalte können in die Zwischenablage kopiert und in der aktuellen Version wieder eingefügt werden. Umgekehrt können Änderungen auch in der Zukunft publiziert werden. In beiden Fällen reicht die Angabe des gewünschten Datums. Die Eingabe des Datums wird mit einem dynamischen Kalender zusätzlich vereinfacht. Tastenkombinationen Um die Bedienung noch effizienter zu gestalten, wurde für jede Aktion eine Tastenkombination für (PC) und Mac definiert: (Shift-)Ctrl-Z Rückgängig (Shift-)Ctrl-Y Wiederholen (Shift-)Ctrl-X Ausschneiden (Shift-)Ctrl-C Kopieren (Shift-)Ctrl-V Einfügen (Shift-)Ctrl-D Duplizieren Autocompletion eines externen Links mit Anzeige des korrekten Internet-Protokolls. 19
Automatisierung ImageMagick Der Benutzer kann über 150 Bildformate (etwa psd, eps, pdf oder raw) auf die Webseite laden. Die hochgeladenen Bilder werden als Original gespeichert und auf dem Server für die Anzeige im Browser weiterverarbeitet. Dazu wird zunächst eine Kopie des Bildes als Portable Network Graphic (png) angelegt. Anschliessend wird die Bildgrösse an die Bildgrösse der Webseite angepasst und die Bildqualität auf 80% reduziert. So wird eine 2MB grossen Photoshop-Datei mit mehreren Ebenen ohne sichtbaren Qualitätsverlust in ein handliches Bild von 40KB umgewandelt. Nice-URLs Die URL in der Adresszeile des Browsers wird anhand der hierachischen Navigation automatisch generiert: http://sub.domoain.tld/menu/submenu Dabei werden Sonderzeichen, wie «+» oder «&» in den Ausdruck «and» umgewandelt, während Leerzeichen als «_» dargestellt werden. Damit ist gewährleistet, dass jede Seite automatisch unter einer verständlichen und leicht lesbaren Adresse erreichbar ist. Suchmaschinenoptimierung Die Webseiten werden automatisch für die Indizierung durch Suchmaschinen optimiert. Nebst semantisch korrektem und validem XHTML, den Fenstertiteln und URLs, werden auch die standardisierten Hilfsdokumente (robots.txt und sitemap.xml) automatisch generiert. Services Alle Services werden vom System automatisch generiert: LiveSuche Treffer während dem Tippen Sitemap Aktuelles Inhaltsverzeichnis Drucken Optimiertes Drucklayout Make PDF Seite als PDF speichern Kontakt Einfaches Kontaktformular Empfehlen Link an Freunde senden Mein Konto Benutzerprofil verwalten Impressum Urheberrechtliche Hinweise 20
User Experience 21
Die Redaktoren können sich über einen dezenten Login-Button in der Service-Navigation anmelden. Das Login erfolgt über die eingeblendete Toolbar. 22
Mit dem Inline-Editor können Inhalte direkt auf der Webseite bearbeitet werden. Das Layout passt sich automatisch der Textlänge an. Die Eingaben werden automatisch gespeichert. Mit dem Bearbeitungsmenu kann das markierte Element ausgeschnitten, kopiert, eingefügt, dupliziert oder gelöscht werden. Zudem kann die letzte Aktion rückgängig gemacht und wieder hergestellt werden. 23
Einzelne Elemente oder ganze Artikel, Formulare, Tabellen und Menus können auf der Seite mit Drag & Drop positioniert werden. Im Verlauf sind die letzten Arbeitsschritte gespeichert. Es lassen sich mehrere Schritte auf einmal rückgängig machen. Jede Seite hat ihre eigene Entstehungsgeschichte, welche jeweils beim Publizieren zurückgesetzt wird. 24
Links und Bilder können mit Hilfe der Autocompletion verlinkt werden. Eine dynamische Liste unterhalb des Textfeldes zeigt bereits während dem Tippen passende Vorschläge an. Die Suchresultate werden je nach Kontext sinnvoll gewichtet und bereits während dem Tippen aktualisiert. 25
Der Benutzer kann Bilder in über 150 verschiedenen Formaten direkt auf die Webseite laden. Die Bildgrösse und die Bildqualität werden vom System automatisch angepasst. Zwingende Eingabefelder werden vom System automatisch mit einem * gekennzeichnet. Oben im Formular erscheint der Hinweis: «Bitte alle obligatorischen Felder ausfüllen». 26
Fertige Seiten können einzeln oder als Gruppe mit allen Unterseiten publiziert werden. Die Publikation erfolgt wahlweise sofort oder an einem beliebigen Datum in der Zukunft. Jede publizierte Seite wird im Archiv gespeichert. Alte Versionen können per Datumseingabe jederzeit abgerufen werden. Die archivierten Inhalte können kopiert und wieder verwendet werden. 27
CMSBOX GMBH TERRASSENWEG 18 CH-3012 BERN TEL +41 (0)31 356 42 52 FAX +41 (0)31 356 42 51 WWW.CMSBOX.COM MAIL@CMSBOX.COM