Daniel Hundt - Erfahrung Technologien im Frontend

zurück zur Technologie-Übersicht

Nutzerführung vs Komplexität - Abhängigkeiten in WebAnzeigen

Inhalt

In der WebAnzeigen-Buchungsstrecke gab es einige Abhängigkeiten abzudecken. Anstatt dem Endnutzer die Buchung so einfach wie möglich zu machen, ist die Komplexität immer weiter angewachsen - ebenso die Codebasis. Jeder Verlag hatte seine eigene Spezial-Version. Da der Code immer weiter auseinander lief, war er irgendwann nicht mehr handlebar. Die Seite wurde zur "Stundengrab-Seite".

In mehreren Refactoring-Iterationen wurde schließlich die Codebasis angeglichen und eine Art Framework geschaffen. Auch die Nutzerführung wurde immer weiter optimiert und kann sich - denke ich - mitlerweile einigermaßen sehen lassen. Da die Komplexität auf den ersten Blick nicht zu erahnen ist, soll hier ein kleiner Einblick hinter die Kullisen entstehen.

Oberfläche - Usability

Auswahlseite in WebAnzeigen
Erste Seite der Anzeigen Buchung in voller Ausprägung: Nutzung, Rubrik, Ausgabe und Termin wählen

Darstellung der abhängigen Bereiche

Initial waren alle Elemente auf der Seite (optisch) sofort bedienbar. In einem Use-Lab fiel auf, dass die Nutzer mit den ganzen Auswahlmöglichkeiten bereits überfordert waren. In einem ersten Optimierungs-Schritt wurden daher die abhängigen Bereiche (dazu später mehr) erst nach und nach freigegeben: Das Verbreitungsgebiet kann z.B. nun erst gewählt werden, wenn die Rubrik gewählt wurde. Bis dahin bleibt dieser und die nachfolgenden Bereiche ausgegraut.

visuelle Abhängigkeiten in WebAnzeigen
Um den Nutzer visuell weiter zu unterstützen, wurden die Haken neben der Bereichsüberschrift ("RUBRIK") eingeführt. Ist ein Bereich zur Bearbeitung freigegeben, die Auswahl jedoch noch nicht gültig, erscheint ein rotes Fragezeichen. Beim Mouse-Over über dem Fragezeichen erscheint ein Hinweistext.

Außerdem fiel auf, dass die Nutzer mit vielen Verlagstypischen Begriffen nichts anfangen konnten. An dieser Stelle wurden andere Begriffe gewählt oder ein Hilfetext ergänzt.

Verbreitungsgebiet

Im Bereich "Verbreitungsgebiet" gibt es eine Abhängigkeit zwischen verschiedenen Ausgaben. Mal darf nur eine Ausgabe (bzw. feste Kombi) gewählt werden, in einem anderen Fall dürfen mehrere frei kombiniert werden. Außerdem existieren Spezialfälle, die z.B. nur gemeinsam gebucht werden können oder sich gegenseitig ausschließen.

Um die Verbreitungsgebiete zu visualisieren, ist neben den Input-Elementen eine Karte abgebildet, die sich je nach Auswahl dynamisch ändert. In einigen Installationen besteht auch die Möglichkeit, direkt in die Karte zu klicken und so einzelne Gebiete an- oder abzuwählen. Teilweise wird für jede Auswahl-Kombination ein eigenes Bild verwendet. Teilweise werden auch einfach Bilder mit Transparenz überlagert.

Terminauswahl

Über die Darstellung im Kalender ist sofort ersichtlich, welche Termine gewählt werden können und welche bereits gewählt wurden. Diverse Formatierungen (teilweise mit Legende!) ermöglichen die Abbildung mehrerer Zustände. Das Thema Terminauswahl habe ich auf einer eigenen Seite beschrieben.

Abhängigkeiten

komplexe Abhängigkeiten in WebAnzeigen
Komplexität kennt keine Grenzen. Aber: Man kann auch Ordnung hinein bringen.

Ein großes Problem beim Bezwingen der Abhängigkeiten war die Verteilung auf mehrere Bereiche (Rubrik, Ausgabe usw.), Programmiersprachen (JavaScript, Java) über System-Grenzen hinweg (Frontend, Backend, Service usw.) für verschiedene Mandanten und Versionen (Codestände). Als dann noch Abhängigkeiten zur Browserversion (IE 6 -.-') hinzukamen, war das Chaos perfekt.

  • Die komplette Konfiguration kann für jeden Mandanten (Verlag) anders aussehen
  • Außerdem ist eine (weitere) Abhängigkeit zum angemeldeten Nutzer möglich (z.B. spezielle Rubriken)
  • Ebenfalls ergeben sich (weitere) Abhängigkeiten aus dem "vorbelegten Einstieg" (z.B. eingeschränkte Auswahl oder Spezialrubrik)
  • Da WebAnzeigen als eine Eingabeschnittstelle von vielen dient, kann die Auswahl in Richtung der anderen System wieder übersteuert werden. (z.B. Ausgabe A gemappt auf B+C)

Fazit

  • Use-Labs (aka "dem Nutzer über die Schulter schauen") und das Kennenlernen der Nutzer hilft, das Produkt zu verbessern
  • Hohe Komplexität schreckt (End-)Nutzer ab
  • Spezial-Vokabular wird nicht von jedem (richtig) verstanden
  • Durch Usability-Optimierung kann ein großer Teil der Komplexität versteckt werden
  • Gewachsener Code muss (!!!) von Zeit zu Zeit refaktoriert werden
  • Ein klarer Plan und strukturiertes Vorgehen helfen, Ordnung ins Chaos zu bringen