Bedienoberfläche

Um möglichst viele Einsatzszenarien abzudecken, wird die Anwendung plattformübergreifend umgesetzt. Das System steht auf verschiedenen Geräten und in unterschiedlichen Nutzungskontexten zur Verfügung, ohne dass Bedienbarkeit oder Sicherheit leiden. Im Einzelnen werden folgende Plattformen unterstützt:

Web-Applikation (Desktop & Mobile Responsive)

Die Hauptanwendung ist als Web-App konzipiert, die über gängige Browser zugänglich ist. Dank Responsive Webdesign passt sich die Oberfläche dynamisch an verschiedene Bildschirmgrößen an – von großen Desktop-Monitoren bis zu Smartphones. Ein Mobile-First-Ansatz stellt sicher, dass die Kernfunktionen bereits auf kleinen Displays übersichtlich nutzbar sind, und zusätzliche Inhalte bzw. Layouts kommen auf größeren Bildschirmen hinzu. Insbesondere Security-Administratoren und Empfangspersonal werden vorrangig die Desktop-Webversion nutzen, da hier umfangreiche Übersichten und Verwaltungstools bequem dargestellt werden können. Gleichzeitig ermöglicht das responsive Design dem Empfang auch den Einsatz von Tablets, z.B. für mobile Check-ins bei Veranstaltungen. Die Web-Oberfläche liefert eine einheitliche User Experience in allen modernen Browsern und dient auch als Basis für das Kiosk-Interface.

Native Mobile-Apps (iOS/Android)

Für den täglichen Gebrauch durch Mitarbeiter und bestimmte Administratoren werden native Mobile-Apps für iOS und Android entwickelt. Diese Apps bieten eine optimierte Performance und können Hardware-Funktionen der Geräte nutzen (z.B. Kamera für QR-Code-Scan beim Check-in, biometrische Sensoren für Fingerabdruck/FaceID als Login-Methode). Die native Umsetzung ermöglicht außerdem Push-Benachrichtigungen in Echtzeit (z.B. Alarmmeldungen oder Besucheranfragen direkt aufs Smartphone). Die Mobile-App ist speziell auf Touch-Bedienung und kleinere Screens abgestimmt und stellt sicher, dass Mitarbeiter auch unterwegs (außerhalb des Firmengeländes) oder direkt vor dem Zutrittsterminal schnell agieren können. Funktionen wie das Anzeigen eines mobilen Zugangsausweises (QR-Code/Badge auf dem Handy) oder das Stellen von Zutrittsanträgen von unterwegs werden hierdurch unterstützt. Trotz nativer Implementierung wird das Designsystem konsistent zur Web-App gehalten, um ein nahtloses Wechseln zwischen Plattformen zu ermöglichen.

Touch-Terminals am Eingang (Kiosk-Modus)

An Gebäudeeingängen oder Empfangsbereichen kommen Touch-Terminals im Kiosk-Modus zum Einsatz. Diese fest installierten Geräte (z.B. Touchscreens oder Tablets in Terminals) laufen in einer abgesicherten Variante der Web-App, die ausschließlich die für den Eingang relevanten Funktionen bietet. Die Benutzeroberfläche im Kiosk-Modus ist stark vereinfacht, großflächig und touch-optimiert, da sie vor allem von Besuchern genutzt wird, die sich selbst einchecken oder einen Ausweis scannen. Beispielsweise können Besucher am Terminal ihren QR-Code aus der Einladung scannen, sich registrieren oder den zuständigen Mitarbeiter benachrichtigen. Die Navigation ist hier bewusst linear und begrenzt, um Fehlbedienungen durch unerfahrene Nutzer zu vermeiden – der Kiosk zeigt nur die notwendigen Schritte an (Willkommen → Sprache wählen → Check-in/Anmeldung → Bestätigung). Eine automatische Sperre (Screen Lock) nach jedem Vorgang sorgt dafür, dass keine sensiblen Daten sichtbar bleiben und der nächste Nutzer wieder am Startbildschirm beginnt. Das Kiosk-Interface unterstützt Mehrsprachigkeit (Besucher können direkt am Start ihre Sprache auswählen) und Barrierefreiheit, z.B. indem es ausreichende Farbkontraste und gut lesbare Schriftgrößen bietet. Insgesamt gewährleisten die Touch-Terminals einen schnellen und intuitiven Self-Service für Gäste, ohne dass ständig Personal eingreifen muss.

Eine hohe Usability ist Kernanforderung dieses Zutrittskontrollsystems. Nutzer sollen ihre Ziele mit minimalem Aufwand und wenigen Klicks erreichen und dabei möglichst keine Fehler machen. Um dies sicherzustellen, folgen Design und Interaktion anerkannten Ergonomie- und Usability-Prinzipien:

• Einfache, intuitive Navigation: Die Informationsarchitektur ist klar und flach gehalten. Hauptfunktionen sind über eine übersichtliche Menüstruktur oder Dashboard-Kacheln erreichbar. Navigationselemente sind eindeutig erkennbar und beschriftet, sodass der Nutzer stets weiß, wo ein Klick ihn hinführen wird. Durch konsistente Platzierung (z.B. Hauptmenü immer oben oder seitlich) und gängige Symbole/Begriffe (Erwartungskonformität nach ISO 9241-110) findet sich der Nutzer schnell zurecht. Zusätzlich wird jederzeit ein Orientierungskonzept geboten: etwa Breadcrumbs oder Fortschrittsanzeigen in mehrstufigen Prozessen, damit der Nutzer seinen Standort im System und den Fortschritt einer Aufgabe erkennen kann​.

• Geringe Fehleranfälligkeit: Die Oberfläche ist so gestaltet, dass Fehleingaben und Irrtümer weitgehend vermieden werden. Formularfelder verfügen über Plausibilitätsprüfungen und geben sofortiges Feedback bei fehlerhaften Eingaben (z.B. Hinweis bei ungültigem Format, bevor das Formular abgeschickt wird). Kritische Aktionen (etwa das Löschen eines Nutzers oder Ändern von Zutrittsrechten) erfordern Bestätigungsdialogs, um unbeabsichtigte Folgen zu verhindern. Diese Maßnahmen erhöhen die Fehlertoleranz des Systems, da Fehlbedienungen entweder gar nicht erst zugelassen werden oder leicht korrigierbar sind​. Erhält der Nutzer unmittelbar eine Rückmeldung über den Erfolg oder Misserfolg seiner Aktion (z.B. “Speichern erfolgreich” als Meldung), entsteht Vertrauen und Sicherheit in die Systemnutzung​. Sollte doch ein Fehler passieren, helfen verständliche Fehlermeldungen weiter und zeigen Lösungen auf.

• Barrierefreiheit (WCAG 2.1): Das Interface wird inklusiv gestaltet, sodass Menschen mit Behinderungen das System gleichberechtigt nutzen können. Es orientiert sich am WCAG 2.1 Standard (Level AA-Konformität wird angestrebt), der umfangreiche Empfehlungen bietet, um Webinhalte einem möglichst breiten Nutzerspektrum zugänglich zu machen​. Konkret bedeutet dies: ausreichende Farbkontraste für Texte und Bedienelemente, skalierbare Schriftgrößen, verständliche Icons und Labels, sowie Unterstützung von Tastaturbedienung für alle Funktionen (wichtig z.B. für Nutzer, die keine Maus verwenden können). Bilder und Symbole werden mit Alternativtext versehen, damit Screenreader sie vorlesen können. Bewegte Inhalte oder Animationen werden auf ein Minimum beschränkt bzw. mit Steuerungsmöglichkeiten versehen, um Nutzer mit kognitiven Einschränkungen oder Anfälligkeit für Photosensitivität nicht zu beeinträchtigen​. Durch diese Maßnahmen erfüllt die Anwendung die Web Content Accessibility Guidelines und wird damit auch für Nutzer mit Seh- oder Hörbeeinträchtigungen, motorischen Einschränkungen etc. bedienbar. Die Einhaltung solcher Standards macht erfahrungsgemäß Inhalte auch generell benutzerfreundlicher für alle​.

• Konsistentes Designsystem: Ein durchgängiges Designsystem sorgt dafür, dass alle Bedienelemente und Seiten einheitlich wirken. Schriftarten, Farben, Abstände und Kontrollelemente folgen festen Vorgaben (Styleguide), unabhängig von Plattform oder Endgerät. Diese Konsistenz reduziert die kognitive Last für Nutzer, da einmal gelernte Bedienmuster überall gelten. Zum Beispiel haben alle Bestätigungs-Buttons dieselbe Farbe und Position, Warnhinweise verwenden ein einheitliches Symbol etc. Neue Nutzer finden dank wiederkehrender Muster schneller Zugang zur Bedienung (Lernförderlichkeit). Zudem wird bei der Gestaltung auf Aufgabenangemessenheit geachtet – das System unterstützt den Anwender optimal bei der Aufgabenerledigung, ohne ihn mit unnötigen Funktionen abzulenken​. Insgesamt entspricht das Design den sieben grundlegenden Dialogprinzipien der ISO 9241-110 (u.a. Aufgabenangemessenheit, Selbstbeschreibungsfähigkeit, Erwartungskonformität, Fehlertoleranz, Individualisierbarkeit)​und stellt den Nutzer in den Mittelpunkt.

Zusammengefasst bieten diese Usability-Maßnahmen eine intuitive Bedienung: Der Nutzer weiß jederzeit, wo er sich befindet und was zu tun ist, das System beschreibt sich quasi selbst. Wo nötig, sind Hilfen und Rückmeldungen unmittelbar verfügbar, sodass auch unerfahrene Anwender die Software intuitiv richtig bedienen können​.

Die Benutzeroberfläche deckt alle funktionalen Anforderungen ab, die sich aus den Aufgaben der verschiedenen Rollen ergeben. Je nach Benutzerrolle werden unterschiedliche Module und Bildschirmmasken angeboten, die passgenau auf die Bedürfnisse zugeschnitten sind (→ rollenbasierte Dashboards). Im Folgenden die wichtigsten Funktionen pro Nutzergruppe:

Security-Administratoren

Security-Administratoren verwalten das gesamte Zutrittssystem und benötigen daher mächtige, aber dennoch übersichtlich handhabbare Funktionen. Die UI für Administratoren stellt insbesondere folgende Features bereit:

• Rollen- und Berechtigungsmanagement: Administrierende können Benutzerrollen anlegen, bearbeiten und löschen sowie fein granular Zugriffsrechte zuweisen. Die Oberfläche bietet z.B. Übersichten aller Rollenprofile mit deren Berechtigungen und ermöglicht es, Nutzer per Mausklick oder Drag-and-Drop einer Rolle bzw. einem Bereich zuzuordnen. Auch Gruppen von Nutzern (z.B. Abteilungen) lassen sich verwalten. Das System unterstützt den Admin dabei, Rollenhierarchien oder Vorlagen für Standardrollen einzuhalten, um konsistente Berechtigungsstrukturen sicherzustellen.

• Zutrittsrichtlinien definieren: Über eine dedizierte Sektion können Zutrittszonen (z.B. Gebäude, Etagen, Räume) und zeitliche Regeln festgelegt werden. Administratoren definieren, wer wann wohin Zutritt hat – etwa durch das Erstellen von Richtlinien (Policies), die Rollen oder Einzelpersonen Zugänge erlauben oder verwehren. Die UI stellt dies verständlich dar, z.B. in Form eines Kalenders oder einer Matrix (Person/Rolle vs. Bereich). Komplexe Regeln werden durch Wizard-gesteuerte Dialoge erstellt, die den Admin schrittweise durch alle nötigen Eingaben führen (z.B. Auswahl der Zone, dann Zeitfenster, dann berechtigte Rollen). Änderungen an Richtlinien werden versioniert und mit Kommentaren versehen, um die Nachvollziehbarkeit zu gewährleisten.

• Logs und Alarme überwachen: Administratoren haben Zugriff auf umfangreiche Protokolle aller Zutrittsereignisse und sicherheitsrelevanter Ereignisse. Ein Dashboard zeigt z.B. die letzten Zutrittsversuche, erfolgte Ein- und Ausgänge pro Eingang, abgelehnte Versuche etc. in Echtzeit an. Filter- und Suchfunktionen erlauben das gezielte Analysieren von Logs (nach Datum, Person, Bereich, Ereignisart). Bei sicherheitskritischen Vorfällen (z.B. Zutrittsalarm bei unberechtigtem Versuch) wird der Admin sofort via Echtzeit-Benachrichtigung alarmiert – in der Web-Oberfläche als auffälliger Hinweis und in der Mobile-App als Push-Meldung. Eine Alarmübersicht ermöglicht die rasche Einleitung von Maßnahmen (z.B. Türen ferngesteuert verriegeln, Security informieren). Außerdem können Admins Systemparameter verwalten (z.B. Ausweiskonfigurationen, technische Einstellungen), wofür die UI eine strukturierte Einstellungssektion bietet.

Das Empfangspersonal nutzt die Anwendung im Tagesgeschäft vor allem zur Besucherverwaltung. Die Oberfläche für diese Rolle ist darauf ausgelegt, viele Vorgänge schnell hintereinander und mit minimaler Fehlerquote abwickeln zu können – oft parallel zum direkten Kundenkontakt. Wichtige Funktionen sind:

• Besucher registrieren: Empfangsmitarbeiter können über eine einfache Maske neue Besucherprofile anlegen. Bei Eintreffen eines Gastes werden relevante Daten erfasst (Name, Firma, Ansprechpartner im Haus, Grund des Besuchs, Datum/Uhrzeit). Die UI unterstützt Eingabehilfen wie automatische Vervollständigung (z.B. Suche nach dem Mitarbeiter, den der Besucher treffen will) und kann auf zuvor eingegebene Besucher zurückgreifen, um Wiederholungsbesuche zu beschleunigen. Optional lassen sich Fotos aufnehmen (via Webcam) und direkt dem Profil hinzufügen. Ein Wizard führt durch alle Schritte (Daten -> Ausweis -> Bestätigung), damit kein Detail vergessen wird.

• Badges ausstellen: Sobald ein Besuch registriert ist, kann das Empfangspersonal einen Besucherausweis (Badge) erstellen. Die Software generiert automatisch ein temporäres Zugangsmedium – dies kann ein Druckausweis mit QR-Code/Barcode sein oder ein digitaler Badge, der aufs Smartphone des Besuchers gesendet wird. Die UI bietet eine Druckfunktion, die mit dem angeschlossenen Kartendrucker kommuniziert, sowie die Möglichkeit, vorab definierte Ausweisvorlagen auszuwählen (inkl. Besucherdaten und Gültigkeitsdauer). Alle ausgestellten Badges werden in der Oberfläche geloggt, sodass das Empfangspersonal jederzeit sieht, welche Besucher aktuell im Haus sind und bis wann deren Ausweis gültig ist.

• Temporäre Zutrittsrechte vergeben: Für Besucher oder externe Dienstleister kann das Empfangspersonal zeitlich begrenzte Zugangsrechte einstellen. Über die UI wählt der Mitarbeiter aus, welche Bereiche der Besucher betreten darf und für welchen Zeitraum (z.B. nur heute von 9–17 Uhr, Zugang zu Gebäude A und Konferenzraum B). Diese Berechtigungen werden dem Besucherausweis hinterlegt. Die Oberfläche zeigt übersichtlich an, welche temporären Zugänge aktiv sind und ermöglicht ein einfaches Deaktivieren oder Verlängern auf Knopfdruck. Zusätzlich kann das Empfangspersonal Besuchern Sonderanweisungen oder Hinweise mitgeben, die auf dem Badge oder in der Besuchereinladung erscheinen (z.B. "Begleitung erforderlich" o.ä.). Neben diesen Kernaufgaben hat das Empfangs-Dashboard stets eine Liste der erwarteten Besucher (aus Terminintegrationen) im Blick und kann Besucher per Klick als eingetroffen/ausgecheckt markieren, sobald sie kommen oder das Gebäude verlassen.

Die Endnutzer-Oberfläche richtet sich an regelmäßige Benutzer des Systems, vor allem Mitarbeiter des Unternehmens, evtl. aber auch externe Partner oder Besucher, die Self-Service nutzen. Ziel ist es, diesen Nutzern Transparenz über ihre Zutrittsberechtigungen zu geben und Prozesse wie Zutrittsanfragen zu vereinfachen. Wichtige Funktionen im Self-Service-Portal sind:

• Zutrittsanfragen stellen: Mitarbeiter können direkt über die UI Zutrittsberechtigungen beantragen, falls sie z.B. für ein Projekt Zugang zu einem normalerweise gesperrten Bereich benötigen. Ein entsprechendes Formular erlaubt es, den gewünschten Bereich und den Zeitraum auszuwählen sowie eine Begründung einzugeben. Nach dem Absenden wird der Anfrage-Status angezeigt (z.B. "pending approval by Security-Admin"). Die Oberfläche informiert den Antragsteller per Notification oder E-Mail, sobald die Anfrage genehmigt oder abgelehnt wurde. Ähnlich können Mitarbeiter Besuchereinladungen erstellen: Sie geben die Besucherdaten und den Termin ein, woraufhin das System einen Einladungscode oder QR-Code für den Gast generiert und per E-Mail verschickt. Diese Self-Service-Funktionen entlasten den Empfang und beschleunigen Abläufe.

• Credential-Verwaltung: Endnutzer erhalten im Portal einen Überblick über ihre persönlichen Zutrittsmedien (z.B. Mitarbeiterkarte, digitale Schlüssel). Sie können dort bestimmte Aktionen selbst durchführen, etwa: Verlust der Zugangskarte melden und diese temporär sperren, einen Ersatz anfordern, PIN-Codes zurücksetzen oder ein mobiles Gerät als Schlüssel registrieren. Die Oberfläche zeigt klar an, welche Ausweise aktiv sind und wann sie ablaufen. Falls eine Mehr-Faktor-Authentifizierung genutzt wird, kann der Nutzer hier z.B. weitere Zweitfaktoren (wie eine Authenticator-App) hinterlegen. Durch diese Selbstverwaltung verringert sich der administrative Aufwand und die Nutzer haben jederzeit Kontrolle über ihre Zugänge.

• Kalender-Integration: Das System integriert sich in gängige Kalendersysteme (Outlook, Google Calendar etc.), um den Prozess rund um Besucher und Zutritt weiter zu vereinfachen. Beispielsweise können Mitarbeiter beim Erstellen eines Kalendereintrags im Firmen-Outlook einen Haken setzen, um einen Besucher für den Termin voranzumelden. Die Benutzeroberfläche des Zutrittskontrollsystems synchronisiert solche Einträge und zeigt im Mitarbeiter-Portal kommende Besuche an, für die der Mitarbeiter als Gastgeber eingetragen ist. Umgekehrt kann der Mitarbeiter im Portal einen Besuchstermin anlegen, der dann in seinen Kalender übertragen wird. Diese Integration minimiert Doppelerfassungen und stellt sicher, dass Informationen konsistent bleiben. Zudem kann der Mitarbeiter im Portal seinen persönlichen Terminkalender einsehen, soweit er für Zutrittsbelange relevant ist (z.B. heute geplanter Besuch um 10 Uhr – mit Möglichkeit, den Besuchereinlass mit einem Klick zu bestätigen, sobald der Gast angekommen ist).

Die Endnutzer-Oberfläche ist insgesamt darauf ausgelegt, transparente Informationen zu bieten (Welche Zugangsrechte habe ich? Welche Anfragen laufen? Wen erwarte ich als Besuch?) und Interaktion auf das Nötige zu reduzieren, damit auch gelegentliche Nutzer problemlos damit zurechtkommen.

Neben den fachlichen Funktionen muss die Bedienoberfläche bestimmte technische Anforderungen erfüllen, um modern, performant und integrativ zu sein:

• Responsives Webdesign (Mobile-First): Die Entwicklung folgt dem Mobile-First-Prinzip, d.h. die Gestaltung beginnt für kleine Smartphone-Displays und skaliert dann auf Tablets und Desktops hoch. Dadurch wird gewährleistet, dass essenzielle Funktionen auf allen Geräten verfügbar sind und sich die Oberfläche an verschiedene Auflösungen anpasst. Flexibles Layout (Grid-System), skalierbare UI-Elemente und responsive Grafiken sorgen dafür, dass die Anwendung auf einem Handy ebenso gut bedienbar ist wie auf einem großen Bildschirm. Dieses responsive Design ist zentral, da Nutzer – gerade Mitarbeiter – häufig mobil auf das System zugreifen und an Eingangsterminals ebenfalls die Web-Technologie genutzt wird.

• RESTful APIs für Backend-Anbindung: Die Frontend-Anwendung kommuniziert mit dem Backend ausschließlich über RESTful API-Endpunkte. Jede Aktion in der UI (z.B. "Besucher anlegen", "Zutrittsrecht ändern", "Log-Eintrag abrufen") entspricht einem Aufruf einer HTTP-API (REST) im Hintergrund. Diese Entkoppelung ermöglicht eine saubere Schichtentrennung: Die Oberfläche ist vom Backend unabhängig und könnte theoretisch auch durch andere Frontends (oder Integrationen in Drittsysteme) angesprochen werden. Gleichzeitig erleichtert es die Wartung und Erweiterung, da neue Funktionen serverseitig bereitgestellt und dann im Frontend genutzt werden können. Die APIs werden nach gängigen Standards gestaltet (JSON als Datenformat, klar definierte Endpunkte und HTTP-Methoden), wodurch auch externe Systeme (z.B. ein HR-System zum Abgleich von Mitarbeiterdaten) leicht angebunden werden können.

• Echtzeit-Benachrichtigungen: Für sicherheitskritische oder zeitabhängige Ereignisse ist die Echtzeitkommunikation entscheidend. Die Architektur der UI nutzt dafür WebSockets oder server-sent events (bzw. Push-Services in den nativen Apps), um sofortige Benachrichtigungen auszulösen. Beispielsweise wird ein Alarm oder eine neue Besucherankunft ohne manuelles Neuladen des Browsers unmittelbar angezeigt. Technisch wird nach dem Login eine WebSocket-Verbindung aufgebaut, über die das Backend Events an den Client schickt. In der Oberfläche erscheinen dann z.B. Popup-Hinweise oder rote Markierungen im Menü (etwa bei einem neuen Alarm). Ebenso können Live-Daten wie Zutrittszählungen oder ein laufendes Audit-Log in Echtzeit aktualisiert werden. Diese Push-Technik erhöht die Reaktionsfähigkeit des Systems erheblich – Admins und Empfang sehen wichtige Vorfälle sofort und können direkt reagieren.

• Mehrsprachigkeit: Das System wird international einsetzbar sein, daher ist die Benutzeroberfläche mehrsprachig ausgelegt. Alle Texte, Fehlermeldungen, Labels etc. werden über eine Internationalisierungs-(i18n)-Engine verwaltet und liegen in Übersetzungsdateien vor. Benutzer können in ihrem Profil oder direkt in der UI die Sprache umschalten (z.B. Deutsch, Englisch, Französisch ...). Die Standard-Anzeigesprache kann auch automatisch auf Basis der Browsersprache oder eines Administratoreinstellungen gewählt werden. Wichtig ist, dass das Design Mehrsprachigkeit berücksichtigt – z.B. genug Platz für längere Wörter in anderen Sprachen und Unterstützung von Sonderzeichen/Unicode. Die Mehrsprachigkeit erstreckt sich auch auf die Kiosk-Terminals, sodass Besucher in ihrer Landessprache durch den Check-in geführt werden können. Durch konsequente Trennung von Text und Code lässt sich die Anwendung zudem leicht um weitere Sprachen erweitern.

• Rollenbasierte Dashboards: Beim Login erkennt das System die Rolle des Nutzers und lädt ein entsprechendes Dashboard bzw. Startseite, die speziell für diese Rolle entworfen wurde. Technisch bedeutet dies, dass die Frontend-Anwendung modulare Komponenten besitzt, die je nach Berechtigung eingeblendet werden. Ein Administrator-Dashboard zeigt z.B. Systemstatus, Alarmübersicht und Kurzlinks zur Rollenverwaltung; das Empfangs-Dashboard präsentiert die Liste der erwarteten Besucher für heute und Schnellaktionen zum Registrieren; das Mitarbeiter-Portal zeigt persönliche Zutrittsinfos. Diese Customization per Role ist serverseitig abgesichert (das Backend liefert nur autorisierte Daten), aber auch im Frontend sollen nicht relevante Menüpunkte gar nicht erst sichtbar sein. Das Ergebnis ist eine fokussierte Nutzerführung: Jeder sieht primär das, was er für seine Aufgaben braucht, was wiederum die Usability steigert. Die Dashboards sind dabei so gestaltet, dass sie einheitlich wirken, aber inhaltlich auf die Rolle zugeschnitten sind (beispielsweise unterschiedliche Widgets). Für wechselnde Rollen (etwa ein Admin, der sich auch mal als Empfang einloggt) gibt es Mechanismen, um die Ansicht umzustellen, ohne sich komplett neu anmelden zu müssen.

Bei der Gestaltung der UI kommen bewährte Designprinzipien zum Tragen, um die Benutzerfreundlichkeit und Ästhetik zu optimieren:

• Minimalismus: Die Benutzeroberfläche folgt dem Leitsatz "weniger ist mehr". Unnötige Elemente oder dekorative Spielereien werden vermieden, um den Fokus auf die wesentlichen Funktionen zu lenken. Jede Seite zeigt nur die für den aktuellen Kontext relevanten Informationen – alles Überflüssige wird ausgeblendet. Durch dieses reduzierte, aufgeräumte Layout fällt es den Nutzern leichter, sich zu orientieren und Entscheidungen zu treffen. Weißraum (leere Fläche) wird gezielt eingesetzt, um Inhalt zu gliedern und Überfrachtung zu verhindern. Dieses ästhetisch minimalistische Design ist nicht nur gefälliger, sondern belegt auch eine Nielsen-Heuristik der Usability (Vermeidung irrelevanter Informationen). In der Praxis bedeutet Minimalismus z.B.: statt komplexer Tabellen mit zu vielen Spalten werden übersichtliche Kacheln oder Listen genutzt; bei Dialogen werden nur die nötigsten Eingabefelder angezeigt, erweiterte Optionen befinden sich ggf. hinter einem "Erweitert"-Schalter. So bleibt die UI leicht verständlich und lenkt die Nutzer nicht ab.

• Klare Call-to-Action-Buttons: Interaktive Schaltflächen und Hauptaktionen sind deutlich als solche erkennbar und stechen visuell hervor. Wichtige Call-to-Action (CTA)-Elemente – etwa "Besucher einchecken", "Zutritt anfordern", "Speichern" – sind in einer konsistenten Farbgestaltung (z.B. immer in der Primärfarbe des Corporate Designs, gut kontrastierend) gehalten und ausreichend groß. Ihre Beschriftungen sind präzise und beschreiben die Aktion eindeutig (keine kryptischen Icons ohne Text für zentrale Aktionen). Dadurch wissen Nutzer sofort, wohin sie klicken müssen, um ihren gewünschten Vorgang auszuführen. Im Layout werden CTAs bevorzugt an erwarteten Stellen platziert (z.B. unten rechts in Formularen der "Speichern"-Button, gemäß Konvention). Hover-Effekte und fokussierbare Zustände (bei Tastaturbedienung) unterstreichen die Klickbarkeit dieser Elemente. Durch diese klare Herausstellung der Handlungsoptionen führt die Oberfläche den Nutzer schrittweise zum Ziel und minimiert die Wahrscheinlichkeit, dass etwas übersehen wird.

• Wizard-geführte Prozesse: Für komplexe oder mehrschrittige Abläufe setzt das Design auf Wizard-Konzepten. Anstatt den Nutzer mit langen Formularen oder Einstellungsseiten zu konfrontieren, werden solche Prozesse in kleine, logische Schritte unterteilt. Ein typischer Wizard präsentiert dem Nutzer nacheinander einzelne Screens (mit Schrittzähler oder Fortschrittsleiste), auf denen er jeweils einige Daten eingibt oder Entscheidungen trifft, und führt ihn dann mit "Weiter" zum nächsten Schritt. Beispielanwendungen: Ein Administrator richtet einen neuen Bereich mit Zutrittsregeln ein – Schritt 1: Bereichsdaten, Schritt 2: Zeitpläne festlegen, Schritt 3: berechtigte Rollen zuordnen, Schritt 4: Zusammenfassung & Bestätigung. Durch die Schritt-für-Schritt Führung sinkt die kognitive Belastung, da sich der Nutzer jeweils nur auf einen Aspekt konzentrieren muss. Außerdem können in jedem Schritt kontextspezifische Validierungen und Hilfestellungen gegeben werden. Wizard-Prozesse sorgen so für weniger Eingabefehler und nehmen insbesondere ungeübte Benutzer „an die Hand“. Sollten Nutzer den Wizard abbrechen oder unterbrechen, bleiben bereits gemachte Eingaben zwischengespeichert, um Frustration zu vermeiden. Insgesamt gewährleisten wizards, dass auch umfangreiche Konfigurationen strukturiert und nachvollziehbar durchgeführt werden können.

• Dark Mode-Unterstützung: Die Anwendung unterstützt neben dem hellen Standarddesign auch einen Dark Mode (dunkles Farbschema). Viele Benutzer schätzen diese Option aus ergonomischen Gründen, etwa bei der Arbeit in schwach beleuchteten Umgebungen oder generell zur Schonung der Augen. Das Designsystem ist daher so aufgebaut, dass Farben und Hintergründe sich mit einem Umschalter invertieren bzw. auf dunkle Töne wechseln lassen, ohne die Lesbarkeit zu beeinträchtigen. Kontraste im Dark Mode werden gemäß WCAG-Richtlinien ebenfalls eingehalten. Nutzer können manuell zwischen Light und Dark Mode wechseln; ebenso kann die Einstellung automatisch der Systemvoreinstellung des jeweiligen Geräts folgen. Technisch bedeutet dies, dass CSS-Variablen oder Design-Tokens sowohl für helle als auch dunkle Themes definiert sind. Bei der Icon-Gestaltung wird auf Transparenz oder Outline-Styles geachtet, damit sie auf dunklem Grund genauso erkennbar sind. Durch die Umsetzung eines Dark Mode wird nicht nur einem aktuellen Designtrend gefolgt, sondern vor allem die Individualisierbarkeit der UI erhöht – der Nutzer kann die Darstellung an seine Vorlieben anpassen (ein Aspekt der ISO 9241-110 Individualisierbarkeit​). Unabhängig vom Modus bleibt die Benutzeroberfläche konsistent in Aufbau und Funktion.

Da es sich um ein sicherheitskritisches System handelt, fließen umfangreiche Sicherheitsmaßnahmen in die Konzeption der Benutzeroberfläche ein. Diese sollen unbefugten Zugriff verhindern, Daten schützen und die Einhaltung gesetzlicher Vorgaben (wie DSGVO) unterstützen:

• Multi-Faktor-Authentifizierung (MFA): Für den Zugang zum System wird eine 2-Faktor-Authentifizierung implementiert. Insbesondere Administratoren und Empfangspersonal (mit erweiterten Rechten) müssen sich beim Login neben Passwort noch mittels eines zweiten Faktors legitimieren – z.B. durch einen Einmal-Code via Authenticator-App/SMS oder einen FIDO2-Sicherheitsschlüssel. Auch Mitarbeiter können MFA aktivieren, um ihre Accounts zu sichern. Die UI unterstützt MFA, indem nach der Passworteingabe ein zweiter Eingabeschritt erfolgt (Code-Eingabe oder Gerätezulassung). Eine Gerätebindung (Remember-Device-Funktion) kann angeboten werden, um vertrauenswürdige Geräte wiederzuerkennen, ohne die Sicherheit zu kompromittieren. MFA erhöht die Sicherheit deutlich, da selbst bei bekanntwerden eines Passworts kein Login ohne den zweiten Faktor möglich ist. Die Einrichtung der MFA ist im User-Profil intuitiv geführt (QR-Code scannen mit Authenticator-App etc.). Damit folgt das System dem Stand der Technik für Zugriffsschutz.

• Session-Timeouts und Absicherung: Aus Sicherheitsgründen werden Sitzungen zeitlich begrenzt. Die Anwendung meldet Nutzer nach einer definierten Inaktivitätsdauer (z.B. 15 Minuten) automatisch ab. Kurz vor Ablauf erhält der Nutzer eine sichtbare Warnung mit Countdown und die Möglichkeit, die Session aktiv zu verlängern. Nach Logout (sei es manuell oder via Timeout) sind alle sensiblen Daten sofort aus dem Frontend-Speicher gelöscht. Zusätzlich werden Session-Cookies mit Sicherheitsattributen versehen (Secure Flag, HttpOnly, SameSite), um Risiken wie XSS oder CSRF vorzubeugen. Bei besonders kritischen Aktionen (z.B. Freigeben einer neuen Admin-Rolle) kann ein Re-Login oder die erneute MFA-Eingabe verlangt werden (Step-Up Authentication), um sicherzustellen, dass der gerade agierende Benutzer noch autorisiert ist. Die Oberfläche zeigt zudem aktiv an, wer eingeloggt ist, um Benutzerwechsel an gemeinsam genutzten Rechnern sichtbar zu machen. Insgesamt stellt das Session-Management sicher, dass ungebrauchte Logins kein Sicherheitsloch darstellen und nur legitimierte, aktive Nutzer Zugriff haben.

• DSGVO-Konformität (Datenschutz): Das System wird gemäß der EU-Datenschutzgrundverordnung (DSGVO) konzipiert. Bereits im UI-Design wird auf Datensparsamkeit geachtet: Es werden nur jene personenbezogenen Daten erhoben und angezeigt, die für den Zweck erforderlich sind (Prinzip der Datenminimierung). Beispielsweise sieht das Empfangspersonal nur die unbedingt nötigen Besucherdaten. Personenbezogene Daten von Besuchern oder Mitarbeitern werden in der UI nur mit entsprechenden Rechten sichtbar gemacht. Funktionen zur Einwilligung (z.B. ein Besucher willigt bei Registrierung ein, dass seine Daten für den Zutritt verwendet werden) sind vorgesehen. Auch Transparenz wird großgeschrieben: Betroffene Personen können über Selbstauskunft erfahren, welche Daten von ihnen im System gespeichert sind. Technisch werden geeignete Maßnahmen umgesetzt, um Datenschutz sicherzustellen – etwa Pseudonymisierung oder Anonymisierung in Log-Daten​. So könnte das System Besuchernummern statt Klarnamen in allgemeinen Protokollen anzeigen, um die Privatsphäre zu wahren. Die UI unterstützt zudem die Löschung bzw. Anonymisierung von Daten nach Ablauf von Aufbewahrungsfristen per Admin-Kommando. Hinweise auf Datenschutz (z.B. ein Banner mit Datenschutzhinweisen beim ersten Besuch der Web-App) werden nutzerfreundlich integriert. Durch diese Vorkehrungen wird Privacy by Design umgesetzt: Datenschutz durch Technikgestaltung und datenschutzfreundliche Voreinstellungen sind gewährleistet​.

• Audit-Logging aller administrativen Aktionen: Zur Gewährleistung von Revisionssicherheit und Nachvollziehbarkeit protokolliert das System lückenlos alle sicherheitsrelevanten Aktionen. Wenn Administratoren z.B. Berechtigungen ändern, neue Rollen anlegen, Benutzer sperren oder Einstellungen anpassen, erzeugt die Anwendung einen Audit-Log-Eintrag mit Zeitstempel, Benutzer-ID und Beschreibung der Aktion. Diese Logeinträge können nicht vom Administrator selbst manipuliert werden (Schreibschutz) und werden in der UI in einem separaten Audit-Log-Bereich angezeigt. Berechtigte (z.B. Sicherheitsbeauftragte) können dort z.B. sehen: "Am 12.04.2025 um 14:32 Uhr hat Admin X die Rolle 'Besucher' geändert (Zutrittsbereich Y hinzugefügt)". Such- und Filtermöglichkeiten erlauben das schnelle Auffinden von Vorgängen (z.B. alle Änderungen eines bestimmten Nutzers). Dieses Audit-Logging dient sowohl internen Compliance-Richtlinien als auch im Ernstfall der forensischen Analyse. Das UI macht die Existenz dieses Loggings transparent (Admins sehen ggf. einen Hinweis "Aktion wird protokolliert"), um eine bewusste Bedienung zu fördern. Damit wird ein hohes Maß an Verantwortlichkeit sichergestellt – jeder Änderungsschritt ist später nachvollziehbar.

Um die Bedienung noch intuitiver zu gestalten, kommen moderne Interaktionskonzepte zum Einsatz. Diese erleichtern komplexe Tätigkeiten durch visuelle und direkte Manipulation sowie kontextsensitive Unterstützung:

• Drag-and-Drop-Funktionalität: Wo immer sinnvoll, ermöglicht die UI Drag-and-Drop als Eingabemethode, um Vorgänge natürlicher abzubilden. Ein Anwendungsfall ist z.B. das Zuweisen von Nutzern zu Bereichen oder Rollen: Der Administrator kann einen Benutzer in einer Liste anklicken und direkt per Drag auf einen bestimmten Bereich oder in eine Rollen-Gruppe ziehen, statt über Dropdowns und Buttons gehen zu müssen. Dieses visuelle Verschieben macht komplexe Vorgänge einfacher verständlich, da sie an greifbare Metaphern angelehnt sind. Ein weiteres Beispiel: Das Empfangspersonal könnte Besucher per Drag-and-Drop in eine Timeline ziehen, um deren Besuchstermin zu verlängern. Wichtig ist, dass Drag-and-Drop immer durch alternative Bedienwege ergänzt wird (für Barrierefreiheit und Nutzer ohne Maus) – z.B. durch kontextuelle Aktionsbuttons oder Tastaturkürzel, sodass keine Funktion exklusiv von Drag-and-Drop abhängt. Dennoch trägt diese Interaktionsform zu einer intuitiven User Experience bei, weil sie vielen aus anderen Anwendungen vertraut ist (z.B. Drag zum Verschieben oder Zuordnen). Die Umsetzung erfolgt mit gängigen Web-Framework-Funktionen, die visuelles Feedback beim Ziehen geben (etwa Hervorhebung des Ziels, „Schattenobjekt“ unter dem Cursor). So wird die UI erlebbarer und erlaubt direkte Manipulation von Objekten, was die Aufgabenbearbeitung beschleunigen kann.

• Kontextbezogene Tooltips: Die Benutzeroberfläche integriert an vielen Stellen kontextsensitive Hilfetexte (Tooltips), um den Nutzer unmittelbar bei der Interaktion zu unterstützen. Kleine Info-Icons (ⓘ) neben Begriffen oder Einstellungsoptionen bieten bei Berührung oder Klick kurze Erläuterungen. Fährt der Nutzer z.B. mit der Maus über "Rollenhierarchie", erscheint ein Tooltip: "Definiert die Über- und Unterordnung von Berechtigungsrollen." Diese Hilfetexte sind knapp gehalten und beantworten häufige Verständnisfragen genau dort, wo sie auftreten. Besonders Erstnutzer profitieren davon, da sie nicht in ein Handbuch schauen müssen – die Erklärung ist eingebettet. Auch bei Formularfeldern kommt dies zum Tragen: Ein Beispiel wäre ein Feld "Gültigkeit (Tage)", bei dem ein Tooltip beim Hover anzeigt, welches Format erwartet wird oder was das Feld bedeutet. Auf Touch-Geräten ohne Hover werden Tooltips via Tap auf ein "?"-Symbol einblendet. Laut ergonomischen Prinzipien sollen komplexere Aufgaben durch geeignete Hilfestellungen unterstützt werden​– genau das leisten diese kontextbezogenen Tooltips. Sie verbessern die Selbstbeschreibungsfähigkeit der Anwendung, da der Nutzer jederzeit nachlesen kann, was ein Element bewirkt, ohne den aktuellen Dialog verlassen zu müssen. Wichtig ist, dass die Tooltips unaufdringlich sind (nur sichtbar, wenn gewünscht) und selbstverständlich auch barrierefrei (z.B. für Screenreader als aria-label hinterlegt).

• Adaptives Hilfesystem: Über die kurzen Tooltips hinaus verfügt das System über ein umfassenderes Hilfesystem, das adaptiv auf den Nutzer und Kontext reagiert. Beispielsweise wird neuen Benutzern beim ersten Zugriff ein interaktives Onboarding angeboten: Ein geführter Rundgang markiert nacheinander wichtige Bereiche der Oberfläche und gibt Erklärungen (z.B. "Hier finden Sie das Menü für Besucherregistrierung... Jetzt klicken Sie auf 'Neuer Besucher', um fortzufahren"). Dieses Tutorial kann vom Nutzer übersprungen oder später erneut gestartet werden. Des Weiteren passt sich die Hilfe dem Nutzerverhalten an: Wenn z.B. ein Administrator zum ersten Mal die komplexe Rollenverwaltungsseite öffnet, könnte ein Hinweisbanner erscheinen: "Benötigen Sie Hilfe bei der Rollenverwaltung? Starten Sie den Konfigurationsassistenten." Erfahrene Nutzer hingegen werden nicht mit redundanten Hinweisen überhäuft; das System merkt sich, welche Hilfen bereits genutzt oder weggeklickt wurden. Die Hilfeinhalte sind kontextsensitiv verlinkt – ein Klick auf "Hilfe" innerhalb eines Moduls führt direkt zur entsprechenden Dokumentation (etwa einem FAQ-Artikel oder einem kurzen Video-Tutorial für genau dieses Modul). Durch diese adaptiven Hilfen wird die Lernförderlichkeit gesteigert: Der Nutzer erhält genau dann Unterstützung, wenn er sie braucht, was dem Prinzip der lernförderlichen Gestaltung entspricht. Im Idealfall macht das Hilfesystem sich mit der Zeit überflüssig, weil der Nutzer die Anwendung erlernt hat. Dennoch bleibt es immer abrufbar, um bei selten genutzten Funktionen oder Updates schnell Auskunft zu geben. Insgesamt fördert das adaptive Hilfesystem die kompetente und selbständige Nutzung der Software – Benutzer fühlen sich nie alleingelassen,