Ein neues Frontend für eine alte Applikation

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.

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.

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…