Sngle Page App Formulare

Nutzerfreundliche Formulare mit Single-Page-App

Ob bei Bestellungen, Anträgen, Kontaktanfragen oder Anmeldungen: Überall begegnen uns Formulare. Funktionalität und Design können die User bei der effizienten Eingabe ihrer Daten unterstützen und so ein positives Erlebnis erzeugen. Dabei sind Leistungsfähigkeit, Übersichtlichkeit und Bedienbarkeit zentrale Aspekte, die bei der Erstellung von nutzerfreundlichen Formularen zu berücksichtigen sind.

Mehr Anwenderfreundlichkeit im Anmeldeprozess war auch das Thema eines Kunden der direkt gruppe, eine Berufsgenossenschaft mit etwa 2000 Mitarbeitenden und Niederlassungen in ganz Deutschland. Der Kunde wollte die Nutzerverwaltung im Bereich der Zugangsberechtigung optimieren. Teilweise wurde das Identity Management noch auf Basis von Excel-Listen durchgeführt. Uneindeutige Fragestellungen, fehlende intuitive Bedienbarkeit sowie eine Vielzahl an Regeln und Abhängigkeiten banden übermäßig viele Kapazitäten und machten den Prozess schwerfällig und unbeliebt.

Um eine userfreundliche Lösung zu schaffen, entschied sich das Unternehmen für eine Single-Page-App. Die Nutzeroberfläche des Formulars sollte komplett im Browser laufen. Die Kommunikation zum Back-End wurde mit .NET Core realisiert. Für die Browserseite wählte man Angular, ein TypeScript-basiertes Front-End-Webapplikationsframework.

Folgend ein kleiner Einblick in das Projekt und die Technik:

Durch die beim Kunden vorhandene Windows Active Directory konnte im Zusammenspiel mit .NET Core ein Single-Sign-On leicht aufgesetzt werden. Anhand der Information, von welchem Account das Formular aufgerufen wird, wird eine Berechtigungsprüfung durchgeführt. Usern werden so nur die für sie relevanten Informationen aus dem Back-End ausgespielt. Je nach Auswahl werden weitere ausfüllbare Felder, Meldungen und Buttons eingeblendet. Dank der Nutzung einer Single-Page-App ist das Formular die ganze Zeit schnell und reaktiv.

Die verwendete Angular Vorlage von .NET Core schafft eine gut zu nutzende Struktur, in der TypeScript und C#-Code in verschiedenen Ordnern liegen. Während die Anwendung läuft, werden die JavaScript Angular und C# Teile gebaut. Alles ist unter einer URL verfügbar. Änderungen an dem TypeScript werden automatisch erstellt und stehen umgehend im Browser zum Testen bereit.

Innerhalb des .NET Core Projektes befindet sich ein vollwertiges Angular Projekt, das normal mit angular cli und npm gemanagt werden kann. Der Single-Page-App-Support von .NET Core ist dabei nicht auf Angular festgelegt. Es lassen sich beliebige JavaScript Frameworks nutzen.

Online Formulare Single Page App

 

Development im Team dank Projektcharakter

Dank der Projektstruktur hat die Entwicklung im Team mit TypeScript- und C#-Entwicklern gut funktioniert. Der Quellcode wurde in Azure DevOps in der Cloud gehalten. Dort wurden auch Continuous Integration Builds und Code Reviews im Pull Request durchgeführt. Weil alles für Unit Tests in C# und Angular in der Vorlage vorbereitet war, konnten ohne Weiteres Unit Tests erstellt werden. Diese wurden in die Continuous Integration Pipeline ausgeführt und haben zusammen mit den Code Reviews eine hohe Software-Qualität sichergestellt. Aus unternehmensinternen Sicherheitsgründen war es nicht möglich, das Formular direkt in der Kundenumgebung zu installieren. Daher wird eine neue Version durch den Administrator des Kunden eingespielt.

Die gewählten Werkzeuge Angular und .NET Core haben sich als gut geeignet zur Erstellung eines Formulars gezeigt. Die Schnelligkeit, mit der die Oberfläche reagiert, begeistert die Mitarbeitenden der Berufsgenossenschaft. Für komplexe Formulare, die eigentlich die Grenzen eines Formularsystems übersteigen und gleichzeitig nutzerfreundlich bleiben müssen, sind Formulare in Single-Page-Apps eine optimale Lösung.

Userfreundliche Formulare – auch im Web einfach umsetzen

Was für diese Unternehmensanwendung gut funktioniert hat, lässt sich im Zeitalter von Digitalisierung und Cloud auch unkompliziert für Webseiten und mobile Anwendungen im B2B- oder B2C-Bereich umsetzen. Dies ist besonders interessant, da eine positive User Experience vor allem in der Kundenbindung relevant ist. Ist die Erfahrung zum Beispiel aus Performance- oder Usability-Gründen negativ, ist die Gefahr groß, dass zunächst Interessierte abspringen – und nicht zurückkommen.


Können wir Ihnen helfen, Ihre Formulare nutzerfreundlich, funktional und leistungsfähig zu gestalten? Nehmen Sie mit unseren Experten aus dem Development Kontakt auf!


 

Diesen Artikel teilen: