Ca. 50 % der Zugriffe auf die Webseite der Akademie Handel finden über mobile Endgeräte statt (Stand: Mai 2016). Daher suchte Akademie Handel eine Werbeagentur für einen Relaunch der Webseite. Über Weblication CMS entwickelten wir einen neuen Online-Auftritt mit optimierter Darstellung und Bedienung auf mobilen Endgeräten.

Da viele der Zugriffe aus Firmennetzwerken heraus erfolgen, in denen die Endgeräte jedoch nicht immer mit den neuesten Browserversionen ausgestattet sind, standen wir als Werbeagentur vor folgender Herausforderungen: Wir mussten vor der Kompatibilität mit älteren Browsern, wie dem Internet Explorer Version 9 und 10, Rücksicht nehmen.

Bei herkömmlicher Integration einer Übersicht zu allen Terminen mit Filter- und Sortiermöglichkeiten benötigt jede Filter- und Sortieraktion einen Aufruf der Serverkomponente, die ein neues Listenergebnis bereitstellt und an den Browser sendet. Dieses Konzept ist aufgrund der Client-Server-Kommunikation entsprechend unperformant, insbesondere auf mobilen Endgeräten.

Um das Problem zu umgehen haben wir die Weblication-Listendarstellung mit den JavaScript-Bibliotheken listJS und multipleSelect kombiniert. Damit ist es uns gelungen, die Filterung und Sortierung der Bildungsangebot-Termine clientseitig, also im Browser, durchzuführen.

Filter- und Sortieraktionen werden damit ohne Seitenreload möglich und sind dadurch deutlich performanter als die herkömmliche Implementierung des Filter- und Sortierkonzepts. Die Aktualisierung der Ergebnisse geschieht so schnell, dass in unseren Usability-Tests einige Nutzer gar nicht bemerkt haben, dass ihre Filter-/Sortieraktion bereits ausgeführt und das neue Ergebnis dargestellt wurde. Um den Nutzern Feedback zu geben, haben wir schließlich noch Effekte zum Ein- und Ausblenden der Ergebnisse sowie eine Statusmeldung, welche die Anzahl der gefundenen Termine wiedergibt, eingeführt.

Die Termine der Studiengänge und Seminare werden mit der Seminarmanagementsoftware ORBiS der Materna GmbH verwaltet. ORBiS ist ein Client-Server-System mit einem Microsoft SQL Server (MSSQLServer) als zentralen Datenbankserver.

Für ORBiS haben wir eine Schnittstelle erstellt, um alle neuen und geänderten Termindaten abzufragen. Die Informationen werden von der Schnittstelle als XML-Daten bereitgestellt und durch ein Skript verarbeitet, welche die Terminseiten in Weblication CMS anlegt, aktualisiert oder auch deaktiviert, falls ein Termin nicht mehr im Web veröffentlicht werden soll.

Wichtige Merkmale der Termine können in der von der Akademie Handel eingesetzten Seminarsoftware ORBiS nicht gesetzt werden, beispielsweise "nur noch wenige freie Plätze”, “Einstieg noch möglich”, “Durchführung garantiert”  und “Anmeldung zur Warteliste”. Daher haben wir für die Studiengangsbetreuer/-innen eine eigene Management-Konsole auf der Webseite geschaffen, über welche sich diese Merkmale für jeden einzelnen Termin setzen lassen.

In Kombination mit der ORBiS-Schnittstelle bleiben diese Merkmale selbst dann erhalten, wenn Termindaten in ORBiS geändert und in der Webseite vollautomatisch aktualisiert werden.

Das Herzstück der neuen Webseite ist die Möglichkeit zur Online-Ameldung zu Seminaren und Studiengängen. Die Vielzahl an Informationen, die im Anmeldeprozess abgefragt werden müssen, stellte eine Herausforderung dar, die es zu lösen galt, insbesondere auf mobilen Endgeräten. Dementsprechend haben wir dem Anmeldeprozess hohe Aufmerksamkeit gewidmet in der Konzeption, im Designprozess und in der Umsetzung.

Das Ergebnis ist ein Anmeldeprozess, der in mehreren Schritten vollzogen wird und der den Nutzern in jedem Schritt wichtige Informationen und Hilfestellungen per Tooltips gibt. Trotz des umfangreichen Anmeldeprozesses ist die Anmeldung somit auf einem Smartphone problemlos möglich.

Bei ausgebuchten Terminen besteht für Teilnehmer die Option, sich für die Warteliste registrieren zu lassen, sodass sie benachrichtigt werden können, falls ein Platz frei wird im Seminar bzw. Studiengang.

Basis des neuen Anmeldeprozesses ist der Weblication CMS Formulareditor, der von uns an einigen Stellen erweitert wurde.

In HTML-Formularen werden die Bezeichnungen (labels) von Formularfeldern üblicherweise links neben dem Feld oder über dem Feld dargestellt. Eine weitere beliebte Option ist die Integration der Bezeichnung als Platzhaltertext im Eingabefeld, die insbesondere aus Designgründen oft genutzt wird.

Der Nachteil der Platzhaltertext-Variante besteht allerdings darin, dass bei einem ausgefüllten Feld nicht mehr ersichtlich ist, um welches Feld es sich handelt, da die Feldbezeichnung, die durch den Platzhaltertext gegeben ist, nur angezeigt wird, solange das Feld leer ist. Bei Formularen mit wenig Eingabefeldern kann dieser Nachteil oftmals in Kauf genommen werden, bei umfangreichen Formularen stellt es jedoch ein wirkliches Problem dar, insbesondere in Kombination mit der Autofill-Funktion mancher Browser: Tippt der Nutzer seinen Vornamen ein und nutzt die Autofill-Funktion seines Browsers, ist für ihn beispielsweise nicht mehr ersichtlich, ob in einem Eingabefeld, das der Browser mit der Telefonnummer ausgefüllt hat, nun die private oder geschäftliche Telefonnummer abgefragt wird.

Den Nachteil der Platzhaltertext-Variante konnten wir durch eine innovative Lösung eliminieren: Sobald eine Eingabe in einem Feld mit Platzhaltertext vorgenommen wird, wandert der Platzhaltertext in die linke obere Ecke des Eingabefeldes.

Unsere Lösung kombiniert somit den hohen Usability-Grad der klassischen Ausgabe der Feldbezeichnungen links bzw. oberhalb des Feldes mit dem unter Designaspekten deutlich eleganterem Ansatz des Platzhaltertextes.