| Hoch | Buttons & CTAs | Schritt 9 | In dieser Ansicht ist nicht ersichtlich wie Anträge abgeschickt werden können. | Abschick-Aktion für Anträge klar sichtbar und erreichbar machen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 3 | Abbrechen Button mit Sicherheitswarnung, da sonst ungespeicherte Eingaben verloren gehen | „Abbrechen“ mit Sicherheitsabfrage versehen, wenn ungespeicherte Eingaben bestehen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 4 | Sozialstaffeln werden automatisch gesetzt, auch wenn man diese nicht markiert | Bug: Sozialstaffeln nur bei expliziter Markierung setzen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Nach dem umstellen auf Personalreserve verbleibt die Person als Leiter in der Einrichtung sichtbar – ist dieses Verhalten gewollt? Es wirkt nach einem Fehler. | Nach Umstellung auf Reserve die Leitungs-Kennzeichnung entfernen (Status konsistent). | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Hier ist keine Beschäftigungsart auswählbar, warum? | Bug: Auswahl der Beschäftigungsart befüllen/aktivieren. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Wenn man das Hinzufügen Abbricht wird die Person trotzdem gespeichert und wird in der Liste angezeigt = nicht erwartetes Verhalten | Bug: bei Abbruch alle Eingaben verwerfen, nichts speichern. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Beim Hinzufügen des Personals was eigentlich abgebrochen hätte sein sollen wurden auch Werte vorausgewählt | Bug: nach Abbruch keine Werte vorbelegen/speichern. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Hier ist kein Element im Dropdown - es ist keine Gruppe auswählbar | Bug: Dropdown befüllen, damit eine Gruppe auswählbar ist. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Validierung fehlt: Man kann eine Elementarpädagogik-Ausbildung in der Steiermark eintragen und gleichzeitig "Ausbildung in einem anderen Bundesland absolviert" auswählen | Validierung: widersprüchliche Ausbildungsangaben (Steiermark + anderes Bundesland) verhindern. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 5 | Man kann öfter die gleiche Ausbildung (Elementarpädagogik) eintragen – Validierung fehlt | Validierung: mehrfach gleiche Ausbildung verhindern. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | wenn man zurück springt und den namen abändert werden die änderungen nicht übernommen! | Bug: Namensänderung nach Zurück-Navigation übernehmen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Einschreibezeitraum auch in der Vergangenheit möglich | Datum in der Vergangenheit sperren/validieren. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Betreuungszeiten auch in die Vergangenheit möglich | Vergangene Betreuungszeiten sperren/validieren. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Name ist bearbeitbar wird aber oben in der Headline nicht übernommen nach der bearbeitung | Bug: geänderten Namen in Headline übernehmen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Hinzufügen einer neuen Betreuungszeit: Ein von - bis Zeitraum kann in der Vergangenheit stehen. | Von-Bis-Validierung: keine Vergangenheit zulassen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Nach erneutem Login ist die Seite des Erhalters nicht mehr aufrufbar | Bug: Erhalter-Seite nach erneutem Login wieder erreichbar machen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Wirksam bis ist nicht eintragbar | Bug: Feld „Wirksam bis“ editierbar machen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Änderung des Geburtsdatums nicht möglich - wird nicht übernommen! | Bug: Änderung des Geburtsdatums übernehmen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 6 | Endlos viele gleiche Betreuungszeiten sind hier eintragbar mit den genau selben Daten | Duplikate identischer Betreuungszeiten verhindern. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 7 | Sommerferien und überschneidender Personaleinsatz sind im gleichen Monat eintragbar - sollte nicht passieren? | Validierung: überschneidende Einträge im selben Monat verhindern (Fehlermeldung bei Konflikt). | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 7 | Stillegung auch im selben Monat möglich | Validierung: Stilllegung im selben Monat wie Konflikt-Eintrag unterbinden. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 8 | Speichern des Antrages ist nicht möglich um ihn später weiter zu bearbeiten | „Zwischenspeichern“/Entwurf-Funktion ergänzen. | Öffnen ↗ |
| Hoch | Fachlogik & Daten | Schritt 8 | Wenn Förderungsart gecheckt werden werden sie nach dem Speichern nicht übernommen. | Bug: ausgewählte Förderungsart beim Speichern übernehmen. | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 1 | Kontrast zu gering bei WCAG AA & WCAG AAA, er liegt bei 4.34:1 | Textkontrast auf ≥4,5:1 erhöhen (WCAG AA; aktuell 4,34:1). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 2 | Tag hebt sich nicht vom Seitenhintergrund ab * Ort: Einrichtungsübersicht, Tag/Label neben dem Einrichtungsnamen (z. B. „wiki-stmk") * Beobachtung: Die Hintergrundfarbe des Tags ist der Body-/Seitenhintergrundfarbe zu ähnlich. Dadurch hebt sich der Tag kaum als eigenständiges UI-Element ab und geht optisch im Hintergrund unter. * Verletztes Prinzip: Nielsen #6 – Wiedererkennung statt Erinnerung (der Tag ist nicht auf Anhieb als eigenständiges Element erkennbar); ergänzend Informationsdarstellung – Unterscheidbarkeit sowie WCAG 2.1 AA, Kriterium 1.4.11 Non-Text Contrast (mind. 3:1 für UI-Komponenten gegenüber angrenzenden Farben) * Auswirkung auf den Nutzer: Nutzer:innen nehmen den Tag nicht sofort als separates, informationstragendes Element wahr, sondern könnten ihn übersehen oder für Teil des Hintergrunds halten – das erschwert die schnelle Orientierung. * Schweregrad: 2 – Kleines Usability-/Accessibility-Problem. Tritt überall auf, wo dieser Tag-Typ verwendet wird, blockiert aber nicht die Kernaufgabe. * Empfehlung: Andere Hintergrundfarbe für den Tag wählen, die sich mit mindestens 3:1 Kontrast vom Body-Hintergrund abhebt (WCAG AA, Non-Text Contrast), statt nur den internen Text-Hintergrund-Kontrast zu optimieren. | Tag-Hintergrund mit ≥3:1 Kontrast zum Body wählen (WCAG AA). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 2 | „Eingereicht"-Kachel: Kontrast, Farb-Semantik & Icon-Metapher * Ort: Anträge-Übersicht, Stat-Kachel „Eingereicht" (Zahl, Icon, Label) * Beobachtung: Der Kontrast zwischen der orangen Schrift/dem orangen Icon und dem weißen Hintergrund ist zu gering (Accessibility-Problem). Zusätzlich wird dieselbe Orange-Farbe auf der Seite an anderer Stelle als Warnfarbe verwendet (Warnbanner, „Stammdaten bearbeiten"), hier aber für einen neutralen, laufenden Status – wodurch Orange mehrdeutig wird. Das verwendete Icon (kreisförmige Pfeile) ähnelt zudem eher einem „Aktualisieren/Synchronisieren"-Symbol als einem Symbol für „eingereicht". * Verletztes Prinzip: Nielsen #4 – Beständigkeit und Standards (wie benannt: Kontrast & Farbcodierung); ergänzend WCAG 2.1 AA (Kontrastanforderungen für Text und UI-Komponenten) und Nielsen #2 – Übereinstimmung von System und Wirklichkeit (Icon-Metapher) * Auswirkung auf den Nutzer: Nutzer:innen mit eingeschränktem Sehvermögen können Zahl/Label schlechter erkennen. Zusätzlich könnte die Farbe fälschlich als Warnhinweis interpretiert werden, und das Icon als Aufforderung zum manuellen Neuladen statt als Status „wird bearbeitet". * Schweregrad: 3 – da es sich um ein öffentliches Förderportal handelt, ist WCAG-AA-Konformität vermutlich nicht nur wünschenswert, sondern regulatorisch relevant (Barrierefreiheit im öffentlichen Sektor). * Empfehlung: Für den Status „Eingereicht" eine neutrale, kontraststarke Farbe verwenden (WCAG AA: mind. 4,5:1 für Text, 3:1 für UI-Komponenten), Orange ausschließlich für Warnungen reservieren, und das Icon durch eine treffendere Metapher ersetzen (z. B. Sanduhr für „in Bearbeitung" oder Versand-Symbol). | Kontraststarke, neutrale Farbe (WCAG AA); Orange nur für Warnung; Icon passender (z. B. Sanduhr). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 3 | Links sind schwer zu unterscheiden von Fließtext, da sie sich visuell nicht abheben außer on hover. | Links dauerhaft visuell abheben (z. B. Unterstreichung), nicht nur bei Hover. | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 3 | Allgemein ist der Kontrast zwischen Fließtext und Hintergrund bei WCAG AAA durchgefallen, da die Schrift auch zu klein ist des Fließtextes. Kontrast 6.09:1 Ich würde zu dunkelgrauer Schrift raten und hellem Hintergrund. | Fließtext vergrößern und Kontrast erhöhen (dunkelgrau auf hell; WCAG, aktuell 6,09:1 AAA-Fail). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 4 | Accessibility: Tab-Order - neuer Antrag kann via Tabulator Taste nicht annavigiert werden, generell kann man mittels Tab nicht durch die Seite navigieren. Empfehlung: Alle interaktiven Elemente sollen in einer logischen Reihenfolge von links oben nach rechts unten via Tabulator fokussierbar sein um eine Navigation durch die Seite auch ohne Maus möglich zu machen. | Vollständige Tastatur-/Tab-Navigation in logischer Reihenfolge sicherstellen (WCAG). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 5 | Kontrast des hellgrün auf helltürkis ist sehr schwach - Empfehlung: andere Farbe wählen | Farbe mit ausreichendem Kontrast wählen (WCAG AA). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 8 | Checkbox und ganzer Content wird dunkelgrün hinterlegt, dadurch ist sehr wenig Kontrast zwischen den zwei Elementen. | Kontrast Checkbox ↔ Hintergrund erhöhen (WCAG AA). | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 8 | Focus-State Checkboxen: In der gecheckten Checkbox gibt es keinen sichtbaren Focusstate. | Sichtbaren Focus-State für (gecheckte) Checkboxen ergänzen. | Öffnen ↗ |
| Hoch | Farbe, Kontrast & Barrierefreiheit | Schritt 8 | Das Alert Zeichen ist quasi unsichtbar - zu hell. Empfehlung: Redesign der Cards. Cards auf weiß, Warnung klarer gestalten, CTA hinzufügen | Warn-/Alert-Icon kontrastreicher; Cards auf Weiß, Warnung klarer, CTA ergänzen. | Öffnen ↗ |
| Hoch | Formularfelder & Eingabe | Schritt 6 | Doppelpunkt sollte stehen bleiben beim ausfüllen - sonst kommt eine fehlermeldung | Bug: Format-Zeichen (Doppelpunkt) fix im Feld halten, keine Fehlermeldung. | Öffnen ↗ |
| Hoch | Formularfelder & Eingabe | Schritt 6 | Leeres Feld innerhalb des Dropdowns "Gruppe wählen" | Bug: leeren Eintrag aus Dropdown „Gruppe wählen“ entfernen. | Öffnen ↗ |
| Hoch | Formularfelder & Eingabe | Schritt 8 | Der Dateiupload wurde nicht als verpflichtend gekennzeichnet obwohl er es ist. | Pflicht-Upload als Pflichtfeld kennzeichnen. | Öffnen ↗ |
| Hoch | Modals & Dialoge | Schritt 5 | Das Formular ist nicht weiter bedienbar, da das zweite Modal direkt darüber liegt und nicht automatisch ausblendet. Eine Successmessage ist in diesem Schritt unnötig. | Zweites Modal nach Aktion automatisch schließen; Success-Message hier entfernen. | Öffnen ↗ |
| Hoch | Typografie & Lesbarkeit | Schritt 5 | Text in einer Zeile - Keine rechtsbündige Darstellung nötig Text ist sehr klein und schwer zu lesen | Text vergrößern und linksbündig in einer Zeile darstellen (Lesbarkeit). | Öffnen ↗ |
| Hoch | Typografie & Lesbarkeit | Schritt 6 | fast unsichtbare headlines ( Labels?) viel zu klein! | Label-Größe & -Kontrast erhöhen. | Öffnen ↗ |
| Hoch | Typografie & Lesbarkeit | Schritt 6 | "Künstliches" Bold setzen durch css - das sieht man leider - Schriften werden so fast unleserlich | Echte Font-Weight statt CSS-Fett verwenden. | Öffnen ↗ |
| Hoch | Typografie & Lesbarkeit | Schritt 8 | Viel zu kleine Schriftarten, der Inhalt ist kaum lesbar | Schriftgröße erhöhen (Lesbarkeit/WCAG). | Öffnen ↗ |
| Hoch | Typografie & Lesbarkeit | Schritt 8 | Label ist fast nicht lesbar (zu helle Schriftart und zu klein) | Label-Kontrast & -größe erhöhen. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 4 | Es ist unersichtlich welcher Fehler der IBAN hat. Auch das gewünschte Eingabeformat ist nicht ersichtlich | IBAN-Fehler konkret benennen und erwartetes Eingabeformat anzeigen. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 5 | Auch nach mehrerem Hin- und Hertesten haben wir nicht herausgefunden wie diese Fehlermeldung entfernt werden kann. Die Aufgabe ein Personal mit den richtigen Stunden einzutragen ist nur schwer möglich. Ohne zu wissen was man genau eintragen muss bietet das System keinerlei Hilfestellung. | Validierungslogik korrigieren + klare Ausfüllhilfe, damit Feld korrekt befüllbar ist. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 5 | Ein Dispens muss einen Prüfungstermin haben? Fehlermeldung bezieht sich auf den ersten Tab. Das sollte nicht sein. | Fehlermeldung dem richtigen Tab/Feld zuordnen; Pflicht-Logik prüfen. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 8 | Visuell: 2 unterschiedlich gestaltete Messages (anderer Hintergrund) Inhaltlich: Zuerst kann er nicht abgesendet werden, in der zweiten Message jedoch schon = Wiedersprüchliche Aussagen | Widersprüchliche Meldungen auflösen; einheitliche Aussage. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 8 | Auch nach dem Eintragen der Bankdaten bleibt die Fehlermeldung erhalten | Bug: Fehlermeldung nach korrekter Bankdaten-Eingabe entfernen. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 8 | IBAN ist ungültig - es ist durch die Fehlermeldung nicht ersichtlich was geändert werden soll | Fehlermeldung präzisieren (was genau an der IBAN falsch ist). | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 8 | Aus den Fehlermeldungen ist nicht ersichtlich, dass eigentlich keine Leitung eingetragen ist. | Fehlermeldung: fehlende Leitung explizit benennen. | Öffnen ↗ |
| Hoch | Validierung & Fehlermeldungen | Schritt 8 | Trotz Eintragen der Bankverbindung bleibt die Fehlermeldung bestehen | Bug: Fehlermeldung nach korrekt eingetragener Bankverbindung entfernen. | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 1 | das ist der einzige button wo speichern am ende des formulars ist - inkonsistenz innerhalb der anwendung | Position des Speichern-Buttons anwendungsweit vereinheitlichen. | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 2 | Secondary-Buttons ohne erkennbaren Interaktionscharakter * Ort: Einrichtungsübersicht, Secondary-Buttons (z. B. „Förderdaten ändern", „Anträge anzeigen") * Beobachtung: Die Secondary-Buttons haben denselben Farbton wie der Seiten-Body. Dadurch heben sie sich kaum ab und wirken eher wie statischer Text als wie ein klickbares Element. * Verletztes Prinzip: Nielsen #4 – Beständigkeit und Standards; ergänzend ISO 9241-110 – Erwartungskonformität und Informationsdarstellung – Unterscheidbarkeit * Auswirkung auf den Nutzer: Nutzer:innen erkennen nicht auf Anhieb die Klickbarkeit, was die Funktion übersehen lassen kann. * Schweregrad: 2 * Empfehlung: Interaktive Elemente farblich klar vom Content abheben (dedizierte interaktive Farbe, z. B. Dunkelgrün) statt grauer Buttons auf Body-Hintergrund. Diese Farbe muss sich zusätzlich von Headline-Farben unterscheiden, damit Content, Headlines und Interaktion durchgängig unterscheidbar bleiben. | Secondary-Buttons farblich vom Body abheben (interaktive Farbe/Rahmen). | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 2 | „Stammdaten bearbeiten" – fehlende Button-Hierarchie & Farb-Semantik-Konflikt * Ort: Kopfbereich der Einrichtungsseite, Button „Stammdaten bearbeiten" * Beobachtung: Der Button ist auffällig (orange, gefüllt) gestaltet, obwohl er nicht die Hauptinteraktion der Seite darstellt. Zwei Ursachen verstärken sich gegenseitig: Erstens fehlt eine konsistente Button-Hierarchie (Primary/Secondary/Tertiary), wodurch Nutzer:innen die tatsächliche Wichtigkeit der verfügbaren Aktionen nicht einschätzen können. Zweitens wird dieselbe Orange-Farbe an anderer Stelle der Seite als Warn-/Statusfarbe verwendet (Warnbanner-Icon, „Eingereicht"-Kachel) – hier aber für eine reguläre Handlung. * Verletztes Prinzip: Nielsen #4 – Beständigkeit und Standards (primär); ergänzend ISO 9241-110 – Erwartungskonformität (Buttons sollten sich gemäß ihrer tatsächlichen Wichtigkeit verhalten, Farben eine konsistente Bedeutung tragen) * Auswirkung auf den Nutzer: Nutzer:innen könnten den Button gleich doppelt fehldeuten – einmal als wichtigste/empfohlene Handlung der Seite (obwohl z. B. „+ Neuer Antrag" im Fokus stehen sollte), und einmal als Warn- oder Fehlerhinweis statt als reguläre Handlungsmöglichkeit. * Schweregrad: 2 – Kleines Usability-Problem. Tritt bei jedem Seitenaufruf auf (persistent), blockiert aber nicht die Aufgabenerledigung. * Empfehlung: Klare Button-Hierarchie einführen (Primary, Secondary, Tertiary) und konsequent nach tatsächlicher Priorität der Aktion anwenden. Orange dabei ausschließlich für Status-/Warnhinweise reservieren und dem Button stattdessen eine Farbe/einen Stil zuweisen, der seiner Hierarchie-Ebene entspricht (z. B. Secondary-Stil analog zu den anderen Secondary-Buttons). | Button-Hierarchie (Primary/Secondary/Tertiary) einführen; Orange nur für Warnungen reservieren. | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 2 | Secondary-Buttons ohne erkennbaren Interaktionscharakter * Ort: Einrichtungsübersicht, Secondary-Buttons (z. B. „Förderdaten ändern", „Anträge anzeigen") * Beobachtung: Die Secondary-Buttons haben denselben Farbton wie der Seiten-Body/Hintergrund. Dadurch heben sie sich visuell kaum ab und wirken eher wie ein statisches Textelement als wie ein klickbares UI-Element. * Verletztes Prinzip: Nielsen #4 – Beständigkeit und Standards (primär); ergänzend ISO 9241-110 – Erwartungskonformität (UI soll allgemeinen Konventionen für interaktive Elemente entsprechen) und Informationsdarstellung – Unterscheidbarkeit (Element ist nicht klar vom Hintergrund abgegrenzt) * Auswirkung auf den Nutzer: Nutzer:innen erkennen nicht auf Anhieb, dass es sich um einen klickbaren Button handelt. Das erhöht die kognitive Last (genaueres Hinsehen/Hovern nötig) und kann dazu führen, dass die Funktion übersehen oder als nicht verfügbar interpretiert wird. * Schweregrad: 2 – Kleines Usability-Problem. Tritt konsistent überall dort auf, wo Secondary-Buttons verwendet werden (persistent), blockiert aber nicht die Aufgabenerledigung, da der Button bei genauerem Hinsehen weiterhin auffindbar ist. * Empfehlung: Schriftfarbe auf Dunkelgrün (die systemweite interaktive Farbe) ändern und Hintergrund des Secondary-Buttons auf Weiß setzen, um klare Unterscheidbarkeit von Body und Button zu schaffen. Falls Weiß sich nicht ausreichend vom Seitenhintergrund abhebt, zusätzlich einen dezenten Rahmen oder Schatten einsetzen, um die Klickbarkeit visuell abzusichern. | Secondary-Button auf Weiß + interaktive Schriftfarbe (Dunkelgrün); ggf. Rahmen. | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 2 | Fehlende Hierarchie & fehlende explizite Handlungsaufforderung bei den Management-Cards * Ort: Anträge-Übersicht, untere Kachelreihe („Personal verwalten", „Gruppen verwalten", „Kinder verwalten") * Beobachtung: Innerhalb jeder Kachel fehlt eine klare visuelle Hierarchie zwischen Headline, Subheadline und der angezeigten Zahl. Zusätzlich gibt es keine explizite, klar beschriftete Handlungsaufforderung – die Headline selbst ist wie ein Call-to-Action formuliert („...verwalten"), wodurch unklar bleibt, ob es sich um eine inhaltliche Überschrift oder den eigentlichen Button-Text handelt. Falls stattdessen die gesamte Kachel als ein Link fungiert, entsteht zusätzlich ein Accessibility-Problem: Der Accessible Name eines solchen Links würde den gesamten Karteninhalt (Zahl, Headline, Subheadline) als einen langen, unübersichtlichen Text zusammenfassen. * Verletztes Prinzip: Nielsen #2 – Übereinstimmung von System und Wirklichkeit und Nielsen #4 – Beständigkeit und Standards; ergänzend ISO 9241-110 – Selbstbeschreibungsfähigkeit sowie WCAG 2.1 (2.4.4/2.4.9 Link Purpose, 2.4.7 Focus Visible) * Auswirkung auf den Nutzer: Nutzer:innen erkennen nicht auf Anhieb, ob und was klickbar ist. Screenreader-Nutzer:innen bekämen bei einer ganzen Karte als Link eine unverständlich lange Linkbeschriftung vorgelesen statt einer kurzen, klaren Handlungsaufforderung. * Schweregrad: 2 – persistent, aber kein vollständiger Blocker für sehende Nutzer:innen; für Screenreader-Nutzer:innen potenziell schwerwiegender. * Empfehlung: Innerhalb jeder Kachel eine klare visuelle Hierarchie einführen (Zahl am prominentesten, Headline sekundär, Subheadline als kleinerer Fließtext) und einen expliziten, eigenständigen Call-to-Action-Link mit konkreter Handlungsbezeichnung ergänzen (z. B. „Verwalten →" statt vager Formulierungen wie „Mehr erfahren"), farblich als interaktives Element abgesetzt (Dunkelgrün) von Headline/Subheadline (Schwarz/Grau). Damit ist die Karte für sehende wie für Screenreader-Nutzer:innen eindeutig als interaktiv erkennbar, mit klarer, kurzer Linkbeschriftung. | Klare Hierarchie in Karten; expliziten CTA-Link („Verwalten →“) statt ganze Karte verlinken. | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 3 | Braucht es all diese Aktionen? Kann man diese reduzieren um den User nicht zu überfordern? | Anzahl der Aktionen reduzieren/priorisieren (kognitive Last senken). | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 4 | Button entspricht nicht dem UI Standard. Annahme, dass User dieses Element nicht als Button erkennen. | Button nach UI-Standard gestalten, damit er als Button erkennbar ist. | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 5 | Button: "Qualifikation hinzufügen" fehlt – inkonsistentes Pattern - in anderen Seiten werden Inhalte mittels Dialog eingetragen | „Qualifikation hinzufügen“-Button + Dialog ergänzen (konsistent mit anderen Seiten). | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 6 | Secondary Button fast unsichtbar | Secondary-Button-Kontrast erhöhen (sichtbare Abgrenzung). | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 7 | CTA besser: Personal zuordnen, da kein neues Personal hinzugefügt werden kann | CTA umbenennen zu „Personal zuordnen“ (kein neues Personal anlegbar). | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 7 | Externer Reinigungsdienst – warum kann dieser Button nicht beim Standard-Prozess des "Personal hinzufügen" dabei sein? Das Ausgliedern als alleiniger Button sehen wir als unnötig an. | „Externer Reinigungsdienst“ in den Standard-Flow „Personal hinzufügen“ integrieren (eigener Button unnötig). | Öffnen ↗ |
| Mittel | Buttons & CTAs | Schritt 8 | Durch dieses Icon ist nicht klar, dass unterhalb in der Kinderübersicht die Kinder wie in einem Accordion ein oder ausgeblendet werden können. Die Accordion Funktionalität sollte in einer Accordion Komponente eingebaut werden. | Accordion-Komponente mit klarem Auf-/Zuklapp-Indikator verwenden. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 5 | Logik unverständlich: eine Personalrreserve kann gleichzeitig eine Leitung sein? Warum ist das möglich? | Fachlogik klären: gleichzeitige Rolle Reserve+Leitung verhindern oder erklären. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 5 | Wenn man ein Personal bearbeitet ist hier nicht möglich diese Person als Leitung zu markieren. Warum nicht? | Beim Bearbeiten Option „als Leitung markieren“ ergänzen. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 5 | Bis 2011 auswählbar. Personal ist potentiell älter, somit sollte hier die auswählbare Range größer sein | Auswahlbereich Geburtsjahr erweitern (Personal kann älter sein). | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 5 | Warum ist hier nur Personalreserve auswählbar? das ist missverständlich | Auswahl erklären oder weitere Optionen freigeben. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 5 | Empfehlung: Nur die Befähigung anzeigen die die bei der Person angegeben wurde. | Nur die tatsächlich bei der Person hinterlegte Befähigung anzeigen. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 6 | errechnetes Geburtstdatum kann weit auseinander liegen | Berechnungslogik Geburtsdatum prüfen/plausibilisieren. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 6 | Einschreibezeitraum auch in der Vergangenheit möglich. Man kann hinzufügen klicken, es kommt jedoch keine Fehlermeldung. Der "falsche" Einschreibezeitraum wird nicht übernommen - was passt. | Validierung + Fehlermeldung bei Zeitraum in der Vergangenheit. | Öffnen ↗ |
| Mittel | Fachlogik & Daten | Schritt 8 | Betriebszeiten sind beim Editieren der Gruppe kein Pflichtfeld, warum jedoch hier? | Pflichtfeld-Logik für Betriebszeiten vereinheitlichen. | Öffnen ↗ |
| Mittel | Farbe, Kontrast & Barrierefreiheit | Schritt 2 | Farbvielfalt der Stat-Kacheln wirkt überladen * Ort: „Anträge"-Abschnitt, die vier Stat-Kacheln * Beobachtung: Jede Kachel nutzt eine eigene Farbe für Zahl, Icon und Label – in Kombination mit den übrigen Farben der Seite entsteht eine hohe Farbvielfalt. * Verletztes Prinzip: Informationsdarstellung – Kompaktheit; ergänzend Nielsen #8 – Ästhetisches und minimalistisches Design * Auswirkung auf den Nutzer: Erhöhte kognitive Last beim ersten Erfassen der Seite. * Schweregrad: 2 * Empfehlung: Einheitliche, neutrale Textfarbe für Zahl und Label aller Kacheln verwenden, Farbe nur als kleiner Icon-Akzent. Die vier Kacheln in einem gemeinsamen, abgegrenzten Container gruppieren. | Einheitliche Textfarbe für Kacheln, Farbe nur als Icon-Akzent; Kacheln in einen Container gruppieren. | Öffnen ↗ |
| Mittel | Farbe, Kontrast & Barrierefreiheit | Schritt 4 | Es gibt fast keinen Unterschied zwischen Inactive und Active | Active/Inactive-Zustände klar unterscheidbar gestalten. | Öffnen ↗ |
| Mittel | Farbe, Kontrast & Barrierefreiheit | Schritt 6 | Hover Effekt: ein komplett anderes Grün kommt hier zum Einsatz das nicht zum Look & Feel passt. Das Dunkelgrau und Dunkelgrüner Schrift hat zu wenig Kontrast. Empfehlung: Hover Effekte überarbeiten. | Hover-Effekte vereinheitlichen und Kontrast erhöhen. | Öffnen ↗ |
| Mittel | Farbe, Kontrast & Barrierefreiheit | Schritt 6 | Hover Effekte in Dropdowns ohne Suchfeld haben ein anderes Styling als Dropdowns mit Suchfeld. Empfehlung angleichen und auf Kontraste achten (Barrierefreiheit) | Dropdown-Hover-Styling vereinheitlichen (mit/ohne Suchfeld), Kontraste beachten. | Öffnen ↗ |
| Mittel | Feedback & Meldungen | Schritt 2 | Das Statusicon erklärt nicht worum es hier geht, der Helpertext besagt: "Änderungen wurden noch nicht übermittelt" - wenn man jedoch draufklickt weiß man nicht, welche Änderungen nicht übermittelt wurden. Die Anzeige fehlt. | Anzeigen, welche Änderungen noch nicht übermittelt wurden (Status konkretisieren). | Öffnen ↗ |
| Mittel | Feedback & Meldungen | Schritt 2 | In dieser Ansicht erwarte ich, dass nicht übermittelte Änderungen angezeigt werden. | Nicht übermittelte Änderungen in dieser Ansicht auflisten. | Öffnen ↗ |
| Mittel | Feedback & Meldungen | Schritt 5 | Empty States sind ohne Nachricht / nicht ein- die Lupe alleine wirkt falsch man versteht nicht was hier gemeint ist. Empfehlung: Kein Personal angelegt | Empty-State-Text ergänzen (z. B. „Kein Personal angelegt“) statt nur Lupen-Icon. | Öffnen ↗ |
| Mittel | Feedback & Meldungen | Schritt 7 | Empty State Message fehlt | Empty-State-Message ergänzen. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 1 | Wie erkenne ich Input Felder die verpflichtend auszufüllen sind? | Pflichtfelder klar kennzeichnen (z. B. * + Legende). | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 1 | Bei dem Input "Stock Tür" ist es auch möglich nur Buchstaben einzutippen, eventuell Validierung anpassen? | Eingabevalidierung „Stock/Tür“ anpassen (nur zulässiges Format). | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 3 | Visueller Unterschied zu klein, um zu singalisieren, dass das Feld nicht zur Änderung oder Eingabe verfügbar ist. Eventuell als Liste darstellen und nicht als Input | Read-only-Felder klar von Eingabefeldern abheben (z. B. als Liste statt Input). | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 3 | nicht editierbare felder sollten keinen active state haben und nicht klickbar sein | Read-only-Felder ohne Active-State und nicht fokussier-/klickbar machen. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 3 | Es ist unklar an den user kommuniziert, dass on click die Bankverbindung bearbeitbar ist - andere Lösung fiden | Bearbeitbarkeit der Bankverbindung klar signalisieren (sichtbarer Bearbeiten-Trigger). | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 5 | Scrollbalken in beide Richtungen wären nicht notwendig. Das Dropdown-Item ist nicht Im Gesamten sichtbar. Der Text ist nicht anzeigbar. | Dropdown-Breite/-Höhe an Inhalt anpassen; Doppel-Scrollbar vermeiden. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 5 | Besser kein Datepicker sondern datum Eingabe (DD.MM.YYYY), ermöglcht schnellere Eingabe | Statt Datepicker direkte Datumseingabe (TT.MM.JJJJ) ermöglichen. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 5 | Besser kein Datepicker sondern datum Eingabe (DD.MM.YYYY), ermöglcht schnellere Eingabe (für konkretes Datum) | Für konkrete Datumsangaben direkte Eingabe (TT.MM.JJJJ) statt Datepicker. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 6 | Input Felder: Lesbarer Content - sieht zu sehr nach normalen Input Feld aus | Read-only-Content klar von editierbaren Feldern unterscheiden. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 6 | man kann buchstaben eingeben. Besser dd.mm.jjjj als vorgegebenes, vorausgefülltes format vorgeben und wenn man reinklickt dass nur zahlen erlaubt sind pro teilbereich. fix bleiben immer die punkte zwischen dem datum. | Datumsfeld: Maske TT.MM.JJJJ, nur Zahlen, Punkte fix; keine Buchstaben. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 6 | empfehlung: inputfelder generell überarbeiten für bessere accessibility und lesbarkeit. Labels außerhalb des inputfeldes lassen | Labels außerhalb des Feldes platzieren; Felder barrierefrei gestalten. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 6 | Pflichtfelder sollten besser sichtbar gekennzeichnet werden | Pflichtfelder deutlich markieren (z. B. *). | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 6 | Warum wird dieses Feld nicht im Formular abgefragt? | Fehlendes Pflichtfeld im Formular ergänzen. | Öffnen ↗ |
| Mittel | Formularfelder & Eingabe | Schritt 8 | Drag and Drop Inputs sollten redesigned werden. | Drag-&-Drop-Upload neu gestalten (klare Zonen + Fallback-Button). | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 4 | Es wird erst durch die Fehlermeldung klar, was man hier hochladen soll. Empfehlung: Beschreibungstext hinzufügen: Scan oder Foto einer Bankkarte hochladen | Beschreibungstext ergänzen: „Scan oder Foto einer Bankkarte hochladen“. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 5 | Der Hilfetext gibt nur noch eine Regel an, bietet aber keine Hilfe zum Ausfüllen des Input-Feldes. | Hilfetext um konkrete Ausfüllhilfe/Beispiel ergänzen, nicht nur Regel nennen. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 5 | Generell: Das Eintragen der Stundenanzahl der Beschäftigungsarten wirkt sehr undurchschaubar und kompliziert. | Stunden-Eingabe vereinfachen + Inline-Hilfe/Beispiel ergänzen. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 5 | Was ist ein Vollzeitäquivalent – Wissen die Erhalter was hier auszufüllen ist? Dieses Wissen sollte nicht vorausgesetzt werden, es sollte klar erkennbar sein was hier eingetragen werden soll. | Inline-Erklärung/Tooltip zu „Vollzeitäquivalent“ ergänzen. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 5 | Was bedeutet 4000% in dem Zusammenhang? Die Person hat 40 Wochenstunden, warum steht hier 4000% | Wert/Einheit korrigieren oder erklären (40 Std ≠ 4000 %). | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 5 | Das Verständnis zu Vollzeitäquivalent ist schwierig zu erfassen, es sollten Hilfestellungen zur Verfügung gestellt werden wie: 20 Stunden = 0,5 Vollzeitäquivalent | Umrechnungshilfe ergänzen (z. B. „20 Std = 0,5 VZÄ“). | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 6 | Der Wert ist vorausgefüllt, woraus ergibt er sich? Das wird nirgends beschrieben | Herkunft des vorbefüllten Werts anzeigen/erklären. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 6 | Bezieht sich das "Wirksam ab" wirklich nur auf das Familien-Netto Einkommen? Hier scheint es so. | Bezug von „Wirksam ab“ eindeutig kennzeichnen. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 6 | Betreuungsstunden - Woraus ergeben sie sich? Ist ein Minuswert schlecht? | Herkunft der Betreuungsstunden erklären; Minuswerte validieren. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 7 | Bei Gruppenverwaltung kann man keine Gruppe anlegen – aus Sicht der Nutzer ist dies unverständlich. Vorschlag: Wenn hier kein Anlegen möglich ist ein Hinweisfeld wie man Gruppen anlegen kann hinzufügen | Hinweisfeld ergänzen, das erklärt, wo/wie Gruppen angelegt werden können. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 7 | Wie ist das möglich? Hinweis dazu und Quicklink zur Verfügung stellen | Kontext-Hinweis + Quicklink zur Erklärung/Zielseite ergänzen. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 8 | Inhaltsverständnis fehlt: Wo wird eine Ganztagsförderung beantragt? Das Wording findet sich nirgends wieder. | Wording „Ganztagsförderung“ konsistent einführen und Antragsweg klar benennen. | Öffnen ↗ |
| Mittel | Hilfe & Anleitung | Schritt 9 | Wie sollen Förderungsanträge bearbeitet werden? | Bearbeitungsweg für Förderungsanträge klar aufzeigen. | Öffnen ↗ |
| Mittel | Layout & Abstände | Schritt 2 | Zentrierte Headline/Subheadline durchbricht linksbündiges Layout * Ort: „Anträge"-Abschnitt, Headline „Anträge" und Subheadline „Förderanträge, Betriebsdatenmeldung und Meldung betriebsfremder Personen" * Beobachtung: Headline und Subheadline sind zentriert dargestellt, während der übrige Content der Seite (Titelblock, Kacheln, Buttons) linksbündig gestaltet ist. Das durchbricht die sonst etablierte Ausrichtungslogik des Interfaces. * Verletztes Prinzip: Nielsen #2 – Übereinstimmung von System und Wirklichkeit (linksbündige Anordnung folgt der natürlichen Lesart) und Nielsen #7 – Flexibilität und Effizienz (wie benannt: schnellere Erfassbarkeit der Information); ergänzend Nielsen #4 – Beständigkeit und Standards (zentrierte Headline bricht mit der sonst linksbündigen Ausrichtung der Seite) * Auswirkung auf den Nutzer: Beim Scannen der Seite muss der Blick zwischen linksbündigem und zentriertem Content neu ausgerichtet werden, was den Lesefluss unterbricht und die Erfassung verlangsamt. * Schweregrad: 2 Tritt systemweit auf („in weiterer Folge"), beeinträchtigt aber nicht die Aufgabenerledigung. * Empfehlung: Headlines und Subheadlines konsequent linksbündig ausrichten, analog zum übrigen Content, um eine einheitliche Lesrichtung/Scan-Pattern über die gesamte Anwendung beizubehalten. | Headline/Subheadline linksbündig ausrichten. | Öffnen ↗ |
| Mittel | Layout & Abstände | Schritt 2 | Zu geringer Abstand zwischen Header und „+ Neuer Antrag" * Ort: Titelblock-Bereich, Button „+ Neuer Antrag" * Beobachtung: Der Abstand zwischen dem Header (oberste Navigationsleiste) und dem Button „+ Neuer Antrag" ist zu gering – der Button wirkt optisch am Header angeklebt statt als eigenständige Handlungsmöglichkeit klar abgesetzt. * Verletztes Prinzip: Gestaltgesetz der Nähe; ergänzend Informationsdarstellung – Unterscheidbarkeit * Auswirkung auf den Nutzer: Die primäre Handlungsmöglichkeit der Seite wird nicht auf den ersten Blick als eigenständige Ebene wahrgenommen, sondern wirkt an die Navigationsleiste gekoppelt. * Schweregrad: 2 * Empfehlung: Abstand zwischen Header und Button vergrößern, damit „+ Neuer Antrag" klar als eigenständiges, primäres Handlungselement abgesetzt ist. | Abstand Header ↔ „+ Neuer Antrag“ erhöhen. | Öffnen ↗ |
| Mittel | Layout & Abstände | Schritt 4 | Antrag erstellen klebt zu sehr am Titel. Empfehlung Titelbereich generell überarbeiten. Dazu gehören Breadcrumb, Einrichtungsname, Adresse, Tag, Adresse, Button Stammdaten bearbeiten, Button Neuer Antrag | Titelbereich neu strukturieren; Abstand „Antrag erstellen“ zum Titel erhöhen. | Öffnen ↗ |
| Mittel | Layout & Abstände | Schritt 4 | Titelbereich wirkt unaufgeräumt und undurchdacht. Empfehlung Titelbereich überarbeiten. Es ist durch das System nicht ersichtlich, ob es Änderungen an der Seite gab die gespeichert werden sollten | Titelbereich aufräumen; ungespeicherte Änderungen sichtbar machen. | Öffnen ↗ |
| Mittel | Layout & Abstände | Schritt 6 | button fliegt herum, kein anker, hängt zwischen kinder (Headline) und Periode (Headline) | Button eindeutig verankern (feste Position/Zuordnung). | Öffnen ↗ |
| Mittel | Layout & Abstände | Schritt 7 | zu viele Tags -> fehlt eine Ebene? ist hier nicht ersichtlich | Tag-Anzahl reduzieren bzw. übergeordnete Ebene/Hierarchie einführen. | Öffnen ↗ |
| Mittel | Modals & Dialoge | Schritt 5 | Tabs sind schwer als solche erkennbar, hier sollte innerhalb vom Modal eine andere Gestaltung gewählt werden um Navigationselemente vom Content klarer zu trennen. | Tabs im Modal visuell klar vom Content trennen. | Öffnen ↗ |
| Mittel | Modals & Dialoge | Schritt 6 | Persönliche Daten wieder sehr klein - warum 2 headlines in modal? Persönliche Daten - titel irritiert, habe ja gerade "Kind hinzufügen" geklickt | Doppelte Modal-Headline entfernen; eine klare Überschrift. | Öffnen ↗ |
| Mittel | Modals & Dialoge | Schritt 6 | generell - kein modal - dafür eine eigene seite zum erstellen des kindes vorteile: scrollen innerhalb der ganzen seite, geringere accessibility hürden uvm. | Kind-Erstellung auf eigene Seite statt Modal (Scroll/Accessibility). | Öffnen ↗ |
| Mittel | Modals & Dialoge | Schritt 6 | Woraus ergeben sich plötzlich 3 Steps? Hat einen unersichtlichen Grund. Inkonsistente Modal-Dialog Headline | Step-Anzahl konsistent & erklärt; Modal-Headline vereinheitlichen. | Öffnen ↗ |
| Mittel | Modals & Dialoge | Schritt 6 | Tab-Gestaltung: Content wird einfach abgeschnitten, keine Visuelle Trennung | Tab-Content nicht abschneiden; klare visuelle Trennung. | Öffnen ↗ |
| Mittel | Modals & Dialoge | Schritt 8 | modalsdialoge empfehlung: Neugestaltung - weißer Hintergrund macht den Inhalt leichter erfassbar | Modal-Hintergrund auf Weiß (bessere Lesbarkeit). | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 2 | Unzureichende Abgrenzung im Kopfbereich (Breadcrumb, Titel, Adresse) * Ort: Kopfbereich der Einrichtungsseite – Breadcrumb sowie Titel/Adresse/Kontaktdaten * Beobachtung: Breadcrumb, Titel der Einrichtung und Adresse/Kontaktmöglichkeiten stehen mit zu geringem Abstand zueinander. Titel, Adresse und Kontaktmöglichkeiten gehören inhaltlich zusammen, sind aber optisch nicht klarer gruppiert als die Breadcrumb – ein eigenständiges, interaktives Navigationselement. Zusätzlich hat die Breadcrumb dieselbe Farbe wie der informative Content, wodurch Navigation und Inhalt auch farblich nicht unterscheidbar sind. * Verletztes Prinzip: Informationsdarstellung – Unterscheidbarkeit (primär, wie benannt); ergänzend Gestaltgesetz der Nähe (zusammengehörige Elemente sollten räumlich näher beieinanderstehen als nicht zusammengehörige) sowie Nielsen #1 – Sichtbarkeit des Systemstatus und Nielsen #5 – Fehlervermeidung (klare Trennung von Navigation und Content verhindert Fehlinterpretation und unterstützt Orientierung) * Auswirkung auf den Nutzer: Nutzer:innen können Navigation (Breadcrumb) und Seiteninhalt (Titel/Adresse) nicht auf einen Blick unterscheiden. Das erschwert die Orientierung und erhöht das Risiko, ein Navigationselement mit Content zu verwechseln. * Schweregrad: 2 – Kleines Usability-Problem. Tritt bei jedem Seitenaufruf auf (persistent), blockiert aber nicht die Kernaufgabe. * Empfehlung: Abstand zwischen Breadcrumb und Titelblock vergrößern, damit die inhaltliche Gruppierung (Titel, Adresse, Kontakt) räumlich erkennbar wird. Zusätzlich farbliche Trennung einführen: Schwarz bzw. Dunkelgrau für Content, Dunkelgrün für interaktive Elemente wie die Breadcrumb – konsistent mit der Farbempfehlung aus den vorherigen Findings (Buttons, Tag). | Abstand Breadcrumb ↔ Titelblock erhöhen; Breadcrumb farblich (interaktiv) vom Content trennen. | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 3 | Hier würde ich keine Tabs verwenden, da der Inhalt darunter sich nicht austauscht, sondern hier nur eine Subnavigation mit Ankerpunkten gewollt ist. | Statt Tabs eine Subnavigation mit Ankerpunkten verwenden (Inhalt wechselt nicht). | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 3 | Erhalter - Breadcrumb ist nicht vorhanden oder nicht sichtbar | Breadcrumb für „Erhalter“ ergänzen bzw. sichtbar machen. | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 4 | In dieser Ansicht ist nicht sichtbar, für welches Jahr diese Stammdaten verändert werden. Die Förderdaten unterscheiden sich je nach Jahr | Bearbeitetes Förderjahr in dieser Ansicht klar anzeigen. | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 4 | Der Bereich der Förderdaten sollte gesondert dargestellt werden (entweder oberhalb der Tableiste oder komplett wo anders) Hier fehlt die Anzeige in welche Förderperiode hier bearbeitet wird. Aus dieser Ansicht ist dies nicht ersichtlich. | Förderperiode anzeigen und Förderdaten-Bereich abgesetzt darstellen. | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 6 | Man befindet sich in der Kinder-Sektion und es werden Infos über die Einrichtung angezeigt – dies verwirrt und sollte wenn dann übergeordnet angezeigt werden. | Einrichtungs-Infos übergeordnet anzeigen, nicht in Kinder-Sektion. | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 8 | Dieser Bereich ist nicht verlinkt - Erwartetes Verhalten: Verlinkung auf Kinder erfassen | Verlinkung auf „Kinder erfassen“ ergänzen. | Öffnen ↗ |
| Mittel | Navigation & Orientierung | Schritt 8 | Nach dem Speichern möchte ich schnell wieder zum Antragsentwurf zurückkehren, dies ist aber nicht möglich. | Direkten Zurück-Link zum Antragsentwurf ergänzen. | Öffnen ↗ |
| Mittel | Tabellen | Schritt 6 | Viele Tabellen die unnötig viel Platz verbrauchen da sie über den kompletten Contentbereich laufen | Tabellen-Layout kompakter, nicht über volle Breite. | Öffnen ↗ |
| Mittel | Tabellen | Schritt 6 | Unersichtlicher Grund warum diese Zeile gehighlightet ist | Zeilen-Hervorhebung erklären (Legende/Tooltip) oder entfernen. | Öffnen ↗ |
| Mittel | Typografie & Lesbarkeit | Schritt 3 | Text ist nicht sehr gut lesbar. Anders strukturieren, Text nicht so weit auslaufen lassen eventuell bisschen kompakter halten in der breite | Zeilenbreite begrenzen, Text kompakter strukturieren (Lesbarkeit). | Öffnen ↗ |
| Mittel | Typografie & Lesbarkeit | Schritt 5 | Typografie überschreibt nächste Zeile (VZA) | Zeilenhöhe/Umbruch fixen, Überlappung (VZÄ) entfernen. | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 5 | Fehlermeldung empfohlen: Bitte wählen Sie einen Personaltyp aus. | Fehlermeldung ergänzen: „Bitte wählen Sie einen Personaltyp aus.“ | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 5 | Empfehlung: Eingabe prüfen Bitte wählen Sie einen Personaltyp aus. | Validierungshinweis „Eingabe prüfen: Bitte wählen Sie einen Personaltyp aus.“ ergänzen. | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 5 | Fehlermeldung: Bitte geben Sie eine Zahl zwischen 0 und 1 ein, zum Beispiel 0,5 für eine halbe Vollzeitstelle. | Fehlermeldung: „Bitte geben Sie eine Zahl zwischen 0 und 1 ein, z. B. 0,5.“ | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 6 | Es ist durch diese Message nicht ersichtlich welche Altersspanne zulässig ist. Das System sollte hier den richtigen Hinweis geben. | Zulässige Altersspanne direkt in der Meldung nennen. | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 6 | fehlermeldung sollte gestaltet werden | Fehlermeldung nach Styleguide gestalten. | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 6 | Fehlermeldung hat eine andere Farbe als die Fehlermeldung unten - man weiß nicht dass sie zusammengehören | Fehlermeldungen einheitlich stylen (Zusammengehörigkeit erkennbar). | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 6 | Unnötige Fehlermeldungen die keinen Mehrwert bieten | Nicht-hilfreiche Fehlermeldungen entfernen. | Öffnen ↗ |
| Mittel | Validierung & Fehlermeldungen | Schritt 6 | Information zu Fehlern sollte keine Elemente im UI überlagern und auch nicht wegklickbar sein. Besser wäre inline Darstellung | Fehler inline darstellen statt überlagernd/wegklickbar. | Öffnen ↗ |
| Mittel | Wording & Labels | Schritt 5 | Achtung Wording: Überall wird von "Personal" gesprochen, hier wird eine "Person" hinzugefügt - Konsistentes Wording sollte bevorzugt werden -> Empfohlenes Wording: "Personal hinzufügen§ | Einheitlich „Personal hinzufügen“ verwenden. | Öffnen ↗ |
| Mittel | Wording & Labels | Schritt 7 | Ein neues Kind hinzufügen ist nicht möglich. Verwirrender Button-Name | Button umbenennen zu „Kinder zuordnen“ (kein neues Kind anlegbar). | Öffnen ↗ |
| Niedrig | Buttons & CTAs | Schritt 6 | Um konsistent zu bleiben, würde ich dem Button auch ein Label geben damit keine missverständnisse entstehen. | Button mit klarem Label versehen (Konsistenz, Missverständnisse vermeiden). | Öffnen ↗ |
| Niedrig | Fachlogik & Daten | Schritt 7 | Man kann Kinder der Gruppe zuordnen | Zuordnungs-Aktion eindeutig beschriften („Kinder zuordnen“). | Öffnen ↗ |
| Niedrig | Farbe, Kontrast & Barrierefreiheit | Schritt 3 | Label, Schrift und Input Field wirkt blasser als das von Standort. Angleichen wegen Konsistenz | Label/Feld-Styling an die übrigen Felder angleichen (Konsistenz, kein blasser Kontrast). | Öffnen ↗ |
| Niedrig | Farbe, Kontrast & Barrierefreiheit | Schritt 6 | unterschiedliche schriftfarben | Textfarben vereinheitlichen. | Öffnen ↗ |
| Niedrig | Farbe, Kontrast & Barrierefreiheit | Schritt 6 | Icon Farbe ist nicht konsistent mit anderen Erfolgsmeldungen. | Icon-Farbe an die übrigen Erfolgsmeldungen angleichen. | Öffnen ↗ |
| Niedrig | Farbe, Kontrast & Barrierefreiheit | Schritt 8 | Unterschiedliche Contentfarben in den Boxen (einmal schwarz und einmal interactive Farbe) | Content-Farbe in Boxen vereinheitlichen. | Öffnen ↗ |
| Niedrig | Feedback & Meldungen | Schritt 6 | Successmessage ist nicht passend und unnötig an dieser stelle | Unnötige Success-Message entfernen. | Öffnen ↗ |
| Niedrig | Feedback & Meldungen | Schritt 6 | Successmessage die stehen bleibt - unnötig an dieser stelle | Success-Message automatisch ausblenden. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 3 | Radio Optionen näher zusammen - Gesetz der Nähe | Radio-Optionen näher zusammen (Gesetz der Nähe). | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 3 | Layout der Radio-Buttons ist anders als bei allen anderen radio buttons | Radio-Button-Layout an die übrigen Radios angleichen. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 4 | Radio Buttons sind zu weit auseinander - Empfehlung für Ja/Nein States ist die Verwendung von Checkboxen. | Ja/Nein als Checkbox statt Radios; Radios näher gruppieren. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 5 | Suchfeld ist hier unnötig | Suchfeld entfernen. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | ein radio mit ja nein ist nicht nötig. eine checkbox reicht | Ja/Nein-Radio durch einzelne Checkbox ersetzen. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | lieber checkbox | Checkbox statt Radio verwenden. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | Kind einer Mitarbeiterin - stattdessen checkbox! | Ja/Nein durch Checkbox ersetzen. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | radios näher beieinander - gesetz der nähe | Zusammengehörige Radios näher gruppieren. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | checkbox statt ja nein | Checkbox statt Ja/Nein-Radio. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | checkbox statt ja nein | Checkbox statt Ja/Nein-Radio. | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 6 | Generell: Distanz bei Radio Groups optimieren. Mit dem grossen Abstand werden Radio Buttons nicht als Gruppe wahrgenommen | Abstände in Radio-Groups verringern (als Gruppe wahrnehmbar). | Öffnen ↗ |
| Niedrig | Formularfelder & Eingabe | Schritt 8 | Filterung bei dieser anzahl von Gruppen nicht notwendig - Vermutlich ist es das nie (Achtung Annahme) | Filter bei geringer Gruppenanzahl ausblenden/entfernen. | Öffnen ↗ |
| Niedrig | Hilfe & Anleitung | Schritt 6 | Hinweise klar in Hinweisboxen konsistent hervorheben. | Hinweise konsistent in Hinweisboxen darstellen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 1 | Buttons näher zusammen platzieren - gesetz der Nähe | Zusammengehörige Buttons näher gruppieren (Gesetz der Nähe). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 3 | Buttons näher zusammenbringen | Zusammengehörige Buttons näher gruppieren (Gesetz der Nähe). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 3 | Info Button sollte näher am Label sein, wie bei den anderen Labels. Gesetz der Nähe | Info-Button näher ans zugehörige Label rücken (Gesetz der Nähe). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 4 | Doppelte Headline ist unnötig | Doppelte Headline entfernen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 4 | Abstand zwischen Content "Datei auswählen oder ablegen" und Button "Datei auswählen" | Abstand zwischen Ablage-Text und Button „Datei auswählen“ anpassen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 4 | Das i ist zu weit vom eigentlichen Content entfernt, es wirkt als hätte die Nachmittagsbetreuung zwei i Gesetz der Nähe - wird als zusammengehörig wahrgenommen | Info-Icon näher an den zugehörigen Content rücken (Gesetz der Nähe). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 5 | Abstand zwischen Content und Stepper sollte höher sein, hier klebt das Inputfeld am Stepper | Abstand zwischen Stepper und erstem Inputfeld erhöhen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 5 | Weite Entfernung zwischen Beschreibung und Wert macht Zuordnung schwieriger. | Beschreibung und Wert näher zusammenrücken (Zuordnung erleichtern). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 5 | Alignment unterschiedlich - alle Tabellen haben einen unterschiedlichen Einzug | Tabellen-Einzug/Alignment anwendungsweit vereinheitlichen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 5 | Zu viel Abstand zwischen Label und Content | Abstand zwischen Label und Content verringern (Zuordnung). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 6 | positioniierung content: generell klebt alles zu sehr links | Content-Innenabstand links erhöhen / am Grid ausrichten. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 6 | ewig lange zeilen, content schwer erfassbar | Max. Zeilenbreite begrenzen (Lesbarkeit). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 6 | headline abstände - klebt zu sehr an der tabelle unterhalb | Abstand Headline ↔ Tabelle erhöhen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 6 | Geschlecht / Geburtsdatum kann in eine zeile | Geschlecht & Geburtsdatum in eine Zeile legen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 6 | plötzlich ist hier content mehr eingerückt, warum? | Einrückung an übriges Layout angleichen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 6 | Zu viel Abstand zwischen Zustimmung und Datenschutz und den Input Feldern | Abstand zwischen Zustimmung/Datenschutz und Eingabefeldern reduzieren. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 7 | Mehr Abstand zwischen Aktion und Informationstext notwendig | Vertikalen Abstand zwischen Aktions-Button und Infotext erhöhen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 7 | Abstand vergrößern unterhalb des Buttons | Abstand unterhalb des Buttons vergrößern. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 8 | Content klebt zu sehr am Rand | Seitenabstand (Padding) erhöhen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 8 | Doppelte Headlines | Doppelte Headline entfernen. | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 8 | Achtung Zeichen klebt zu sehr am Rand unst ist im Verhältnis zu anderen Icons auf der Seite zu klein verwendet. | Warn-Icon vergrößern und mit Randabstand versehen (konsistente Icon-Größe). | Öffnen ↗ |
| Niedrig | Layout & Abstände | Schritt 8 | Das i ist zu weit vom eigentlichen Content entfernt, es wirkt als hätte die Nachmittagsbetreuung zwei i Gesetz der Nähe - wird als zusammengehörig wahrgenommen | Info-Icon näher an den zugehörigen Content rücken (Gesetz der Nähe). | Öffnen ↗ |
| Niedrig | Modals & Dialoge | Schritt 3 | Es wäre sehr angenehm, wenn is bei einer reinen Information nicht auf den Button klicken müsste sondern z.b einfach daneben ins freie klicken kann damit der dialog sich schließt | Info-Dialog per Klick auf das Overlay/außerhalb schließbar machen. | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 2 | Ein Akkordion ist in einer Seite wo eine Tabelle angezeigt wird nicht nötig dass man dieses einklappen kann. | Akkordion-Einklappen hier entfernen (bei reiner Tabellenansicht unnötig). | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 3 | Breadcrumbs bisschen mehr Abstand nach oben geben. Grenzt sich visuell zu wenig ab | Abstand über den Breadcrumbs vergrößern (visuelle Abgrenzung). | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 3 | aktive Seite/Breadcrumb mehr hervorheben - sollte wieder anders visualisiert sein eventuell bold, damit man erkennt wo man gerade ist und dass dieser nicht klickbar ist | Aktiven Breadcrumb hervorheben (bold) und als nicht klickbar kennzeichnen. | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 5 | Breadcrumbs kleben zu sehr am Header | Abstand Breadcrumb ↔ Header vergrößern. | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 5 | Pagination ist hier unnötig | Pagination hier entfernen (bei geringer Anzahl unnötig). | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 5 | Pagnination unnötig | Pagination hier entfernen (unnötig). | Öffnen ↗ |
| Niedrig | Navigation & Orientierung | Schritt 6 | Breadcrumbs kleben in dieser Ansicht noch weiter am Header | Abstand Breadcrumb ↔ Header erhöhen (konsistent). | Öffnen ↗ |
| Niedrig | Tabellen | Schritt 6 | tabellendesign: alles auf hintergrundfarbe ist nicht passend, content sollte auf weiß gestellt werden | Tabellen-Content auf Weiß statt Hintergrundfarbe stellen. | Öffnen ↗ |
| Niedrig | Typografie & Lesbarkeit | Schritt 5 | Gleiches Styling Label und Content | Label und Content visuell unterscheiden (nicht identisches Styling). | Öffnen ↗ |
| Niedrig | Typografie & Lesbarkeit | Schritt 6 | Headline hierarchie Kinder & Periode haben unterschiedliche font-weights, dies irritiert. Empfehlung: klare headline hierarchie + weights etablieren | Einheitliche Headline-Hierarchie & -Gewichte definieren. | Öffnen ↗ |
| Niedrig | Typografie & Lesbarkeit | Schritt 6 | Headline extrem bold | Font-Weight der Headline reduzieren. | Öffnen ↗ |
| Niedrig | Wording & Labels | Schritt 5 | Titel vorangestellt (ausschreiben da genug Platz vorhanten) - Check ob Abkürzung so geläufigt ist = Empfehlung "Titel vorangestellt" | Label ausschreiben: „Titel vorangestellt“. | Öffnen ↗ |
| Niedrig | Wording & Labels | Schritt 5 | Empfohlenes Label: Titel Nachgestellt | Label „Titel nachgestellt“ verwenden. | Öffnen ↗ |
| Niedrig | Wording & Labels | Schritt 6 | Label unklar, nachdem Manuelle Adresse eine Option ist. Besser wäre: Adresse eingeben | Label auf „Adresse eingeben“ ändern (klarer, da manuelle Adresse eine Option ist). | Öffnen ↗ |
| Niedrig | Wording & Labels | Schritt 6 | Nicht Ort als Label statt Gemeinde? | Label „Gemeinde“ prüfen; ggf. „Ort“ verwenden. | Öffnen ↗ |
| Niedrig | Wording & Labels | Schritt 7 | Modal Titel anpassen an die anderen. Inkonsistent. Titel + Verb, wie: hinzufügen, verwalten, auswählen. | Modal-Titel vereinheitlichen (Titel + Verb, z. B. „… hinzufügen“). | Öffnen ↗ |
| Niedrig | Wording & Labels | Schritt 8 | Vermischung von Groß und Kleinschreibung in den Headlines | Einheitliche Groß-/Kleinschreibung in Headlines. | Öffnen ↗ |