Ein neues Frontend für eine alte Applikation

Max Burri

Die Applikation NDBJS RE5 wurde im Jahr 2003 in Betrieb genommen. Die Applikation unterstützt das Bundesamt für Sport (BASPO), Kantone und Verbände bei der Durchführung von Kaderbildungskursen und bei der Abrechnung von Angeboten im Rahmen von Jugend und Sport. Im 2016 wurde der Applikation nun ein neues Frontend gegönnt.

Im Laufe der Jahre wurde die Applikation stetig weiterentwickelt: Neue Features kamen hinzu und andere wurden entfernt. Nur eines blieb über all die Jahre mehr oder weniger unverändert: die Benutzeroberfläche der Applikation.

kursp-041-alt

Zugegebenermassen ist das Design bei einer derartigen Business-Applikation nicht das wichtigste – aber das Auge klickt bekanntlich eben auch mit. Neben dem etwas grellen Erscheinungsbild verursachte der veraltete Techstack des Frontends für uns Entwickler immer mehr Probleme. Vor 13 Jahren war der am meisten genutzte Browser noch Internet Explorer 6 und entsprechend wurde die Applikation damals für diesen Browser optimiert. Für das Layout der einzelnen Seiten und Formulare wurden Tabellen verwendet, das CSS von Hand geschrieben und JavaScript Libraries nach Bedarf von Hand ins Projekt eingefügt.

Dies führte unter anderem zu folgenden Problemen:

  • Einige Formulare funktionierten mit den neuesten Browsern nicht mehr, da zum Teil nicht standardisierte Features von Internet Explorer 6-8 verwendet wurden (Stichwort „Quirks-Mode“)
  • Es wurden zum Teil JavaScript Libraries wie Prototypen mit Scriptacolous und jQuery parallel eingesetzt, welche eigentlich die gleichen Problemfelder angehen.
  • Von einigen JavaScript Libraries waren gleichzeitig verschiedene Versionen im Einsatz – in jeweils verschiedenen Teilen der Applikation
  • Einige der eingesetzten Libraries wurden schon seit Jahren nicht mehr gepflegt
  • Anpassungen am CSS waren praktisch nicht mehr möglich, nachdem das Stylesheet über 13 Jahre lang immer wieder erweitert wurde (von Backend-Entwicklern)
  • Das Tabellenlayout erschwerte Anpassungen an den bestehenden Masken

Aus alt mach neu

Mit dem Release 18.0.0 vom 5. Oktober 2016 wurde der Applikation nun ein neues modernes Design spendiert und der Techstack des Frontends aktualisiert.

Die Ziele des Releases waren folgende:

  • Attraktives und modernes Design der Applikation
  • Sicherstellung der Kompatibilität mit neuen Browsern
  • Einfachere Wart- und Erweiterbarkeit des Frontend-Teils der Applikation

An oberster Stelle stand aber der Erhalt der bisherigen Funktionalität, was ein komplettes Rewrite der Applikation, zum Beispiel als Single Page Applikation, ausschloss.

Die offensichtlichste Änderung im Design, neben der Farbgebung, ist die Navigation im Header. Diese ermöglicht, dass die verschiedenen Bereiche der Applikation einfacher erreicht werden können – vorher musste der Benutzer jeweils zurück zur Startseite wechseln, um in einen anderen Bereich zu gelangen.

Neu wird auch nicht mehr ein Tabellen-Layout sondern ein Grid-Layout verwendet, sodass sich die Applikation besser an die verschiedenen Bildschirmgrössen anpasst. Prinzipiell kann die Applikation jetzt auch auf mobilen Geräten verwendet werden, als Business-Applikation stand dieser Aspekt aber nicht im Fokus.

Die einzelnen Formularelemente haben jetzt mehr Platz erhalten und sind weniger gedrängt als vorher – auf dem Screenshot des alten Frontends ist nicht sichtbar, dass die Formularfelder auf grossen Bildschirmen nur einen kleinen Teil des gesamten Platzes ausgenutzt haben.

kursp041-neu

Mit der Überarbeitung des Designs wurden auch einige der wichtigsten Formulare der Applikation hinsichtlich ihrer Usability überarbeitet. Dabei konnten wir auf die tatkräftige Unterstützung unserer UX-Experten von WeAreCube zählen.

Wir, die Entwickler der Applikation sind überzeugt, dass die neue Oberfläche für die Benutzerinnen und Benutzer in den Sportämtern der Kantone und beim Bundesamt für Sport ihre Arbeit angenehmer gestalten kann und die Applikation wesentlich besser zu bedienen ist als zuvor.

Über unsere Vorgehensweise, Probleme und einige technische Details schreiben wir in einem weiteren Blogpost…

3 Kommentare

  • körner, 15. Dezember 2016

    Die Webseite mag ja gut ausschauen, aber für den Benutzer ist sie äusserst unangenehm. Wichtig für den Coache o.ä. ist die LISTE der Teilnehmer, nicht Kalender oder sonstiges… Jedesmal nach dem Eintrag und Sichern springt das mühsam hinuntergescrollte wieder nach oben und man fängt von vorne an. das IST SEIT DEM BESTEHEN VON SPORT DB – jdie Macher sind einfach nicht bereit, das zu überdenken. Nehmen Sie doch bitte darauf Einfluss!!
    MfG R. Körner

  • körner, 15. Dezember 2016

    Hoffentlich kam der Komentar bis zu Ihnen

  • mm
    Max Burri, 16. Dezember 2016

    Guten Tag Herr Körner

    Vielen Dank für Ihre Rückmeldung.

    Wenn ich Ihren Kommentar richtig interpretiere, verwenden sie als Coach den externen Teil der Applikation für Veranstalter von Angeboten im Rahmen von Jugend und Sport, und sprechen insbesondere das Formular für die Anwesenheitskontrolle an.

    Dieser Teil der Applikation wurde nicht überarbeitet – allerdings sind wir uns bewusst, dass auch hier Verbesserungspotenzial besteht. Wir werden Ihre Kritik mit dem Auftraggeber besprechen.

    Vielleicht kann Ihnen und ihren J+S-Leitern bis dahin die Mobile Version der Anwesenehitskontrolle die Arbeit erleichtern. Diese ist erreichbar unter: https://www.sportdb.ch/extranet/mobile/mobileAwk.do und ermöglicht es Ihren Leitern, die Anwesenheitskontrolle gleich vor Ort durchzuführen.

    Mit freundlichen Grüssen
    Max Burri