Im Kundenservice eines Unternehmens gibt es viele Abläufe und Prozesse, die nicht immer intuitiv nachvollziehbar sind. Diese Prozesse sind häufig mit den Unternehmen historisch gewachsen, und oft ein Kompromiss aus dem Zusammenspiel vieler verschiedener Abteilungen. Ebenso sind es die Software-Tools, die diesen Prozessen zugrunde liegen. Dementsprechend sind sowohl die Prozesse, als auch die verwendeten Programme, häufig eine Sammlung angestaubter Kompromisse, die zwar zu einer Lösung, aber mitunter auch zu Verwirrung führen können.
Hieraus ergibt sich die Herausforderung, dass neue Mitarbeiter es oft schwer haben, sich in die Prozesse und in die Bedienung von Programmen einzuarbeiten. Gleichzeitig ist die Personalfluktuation gerade in dieser Branche überdurchschnittlich hoch. Dies macht es erforderlich, oft und möglichst schnell neue Mitarbeiter zu schulen.
Ich entwickelte daher in meiner Freizeit für unsere Trainings-Abteilung einige Tools, welche die neuen Mitarbeiter beim Erlernen der Prozesse und ihrer Einarbeitung unterstützen können.
HowTuts ist eines dieser Tools. Es ist ein Tool zum Erstellen von interaktiven Klickweg-Trainings. Es hat sich in der Praxis als extrem hilfreich erwiesen. Das Programm hilft den Mitarbeitern nicht nur dabei, während der Schulung die Programmbedienung schneller und besser zu erlernen, sondern dient auch im späteren Arbeitsleben als sehr nützliche Referenzbibliothek für manchmal selten genutzte Klickwege.
Anstelle von unübersichtlichen Dokumenten mit riesigen Screenshot-Sammlungen erzeugt HowTuts beim Benutzer den Eindruck, als würde er sich tatsächlich gerade angeleitet in dem jeweiligen Programm befinden. Der gesamte Klickweg wird Schritt für Schritt selbst nachvollzogen, indem an den richtigen Stellen die Klicks jeweils selbst durchgeführt werden müssen, um zum nächsten Schritt zu gelangen.
Herausforderungen der Ausführungsumgebung
Im Kundenservice gelten sehr hohe Datenschutzstandards. Daher sind die Möglichkeiten, Code lokal auszuführen, auf den meisten Computern sehr eingeschränkt. Binäre Dateien können nur von der IT installiert werden, was einen recht aufwendigen Genehmigungsprozess voraussetzt. Gleichzeitig ist die Kommunikation ins Internet oft stark eingeschränkt. Ähnlich wie lokale Anwendungen müssen auch Webseiten zunächst von der IT freigegeben werden. Was nicht auf der Whitelist steht, kann auch nicht aufgerufen werden.
Hier kam mir die Natur des Browsers sehr entgegen. Mit den Möglichkeiten, die ein modernes JavaScript bietet, ist es heute möglich, auf Basis einer lokal ausgeführten HTML-Datei mit JavaScript ein „fast normales“ Anwendungserlebnis zu erzeugen. Die Datei und die Skripte liegen also lokal auf dem Rechner oder auf einem Netzlaufwerk. Der Benutzer öffnet die HTML-Datei und der Rest läuft im Browser ab. Es gibt lediglich einige Einschränkungen bei Dateioperationen oder der Handhabung der Zwischenablage, wenn eine Datei lokal und nicht über einen Webserver ausgeführt wird.
Technisches Konzept
Aus den Herausforderungen mit der Ausführungsumgebung ergaben sich folgende Voraussetzungen bzw. Einschränkungen:
- Der Programmcode muss lokal ausführbar sein.
- Es darf keine Kommunikation nach außen stattfinden.
- Dementsprechend muss auch der gesamte Content lokal gespeichert werden.
- Ein „lokales CMS“ ist aufgrund der Einschränkungen der lokalen Ausführungsumgebung nicht umsetzbar, der Content muss an irgendeiner Stelle also händisch eingepflegt werden.
- Es kann kein externes Framework verwendet werden, insbesondere da nicht nachvollziehbar ist, ob an irgendeiner Stelle eine Kommunikation nach außen stattfindet.
Das Tool ist extrem dynamisch mit extrem wenigen statischen Inhalten. Daher könnte man im Normalfall so ein Tool entweder als Serverseitige Webanwendung (z.B. mit PHP) realisieren, oder aber ein Frontend-Framework wie React verwenden. Beides kam aufgrund der Voraussetzungen nicht in Frage.
Ich bin ein Fan von Herausforderungen, Experimenten und ja, auch von JavaScript. Und so habe ich mich entschieden, praktisch das gesamte Programm als eine Art lokale Single-Page-Applikation in Vanilla JavaScript zu realisieren.
Die Erfahrung war wirklich interessant, und nach einigen konzeptionellen Schwierigkeiten, klappte alles auch ganz wunderbar.
Bedien-Konzept
Bei der Bedienung des Tools gibt es 2 Rollen: Den Viewer, und den Creator.
Für den Creator gibt es einen Editor, in dem er die Klickpfade definieren und Beschreibungen hinzufügen kann. Zuerst muss man eine Reihe von Screenshots für den Klickpfad machen, der gezeigt werden soll. Diese werden dann in einem entsprechenden Unterverzeichnis gespeichert. Danach wechselt man in den Editor, wo man nun die Screenshots einfügen kann. Nun erstellt man praktisch für jeden Klick einen eigenen Schritt mit einer Beschreibung.
Auf diese Weise erhält der Benutzer am Ende eine ähnliche Erfahrung, als würde er die Klickpfade in einem echten Programm ausführen können. Allerdings kombiniert mit hilfreichen Beschreibungen und ohne die Gefahr, versehentlich etwas zu verstellen.
Sobald alle Schritte konfiguriert sind, kann man per Knopfdruck den Code für das Tutorial generieren lassen. Dieser wird dann in die Zwischenablage kopiert und an einer bestimmten Stelle in den Quellcode des Tools selbst eingefügt. – Dieser Schritt hat noch Optimierungspotential, da er bei unerfahrenen Benutzern zu unangenehmen Fehlern führen kann.
Nachdem der Code eingefügt und gespeichert wurde, muss nur noch die Seite aktualisiert werden und das Tutorial erscheint auf der Startseite. Hier kann man direkt in das Tutorial einsteigen, indem man auf „Tutorial starten“ klickt. Oder man kann einen Link zum jeweiligen Tutorial in die Zwischenablage kopieren, falls man das Tutorial jemandem schicken möchte.
Der Code
Wenn du das Programm testen möchtest, dir den Code anschauen, oder es selbst einsetzen möchtest, findest du den gesamten Quellcode auf GitHub. Testen kannst du das Tool hier.
