UI-Justiz

Meldungskachel (Asynchrone Meldungen)

Meldungen, die nicht unbedingt mit der offenen Seite zusammenhängen, und die keine Aktion vom Nutzenden erfordern.

Aufbau

  1. Titel
  2. Inhaltstext
  3. Button
  4. Icon-Button mit Schließen-Funktion 
  5. Meldungs-Region
  1. Titel
  2. Inhaltstext
  3. Button
  4. Archivieren-Button
  5. Neu-Indikator

Verhalten

Über das Meldungscenter werden Nutzende über Hintergrundaktionen informiert, die, anders als beispielsweise Fehlermeldungen, nicht direkt auf eine Nutzeraktion folgen und somit nicht unbedingt mit Elementen auf der gerade geöffneten Seite zusammenhängen.

Ablauf

  1. Eine gerade neu eingegangene Meldung erscheint als Fly-in an der oberen rechten Kante innerhalb des Browserfensters (Animation: Einfahren von rechts). Gleichzeitig wird der Zähler am Button für die Benachrichtigungen in der Hauptnavigationsleiste automatisch nach oben gezählt und falls nicht bereits vorhanden erscheint der orangene Hinweispunkt (siehe Headerleiste).
Nach 5 Sekunden verschwindet das Fly-In wieder (Animation: Ausfahren nach rechts). Die Fly-In-Kachel kann von Nutzenden auch vor Ablauf der 5 Sekunden durch Klick auf das X-Symbol ausgeblendet werden. 
Hinweis: Nutzende können in ihren persönlichen Nutzereinstellungen konfigurieren, wie lange die Fly-In-Meldungen angezeigt werden sollen.
 Falls vor Ablauf der Zeit eine oder mehrere weitere Meldungen erscheinen, so schieben sich diese ebenfalls von rechts oben ins Fenster und die bereits sichtbaren Meldungen rutschen gleichzeitig nach unten, so dass die neuste Meldung immer ganz oben angezeigt wird. Der Stapel an Meldunges-Fly-Ins ist als Liste umgesetzt.
  2. Nach Ausblenden des Fly-Ins sind die Meldungen im Bereich “Meldungen” (siehe Headerleiste und Overlay-Menu) sichtbar, bis sie vom System als “erledigt” erkannt wurde oder von Nutzenden manuell archiviert wurde.
 Die Kacheln sind in diesem Bereich als Liste umgesetzt.
  3. Bereits archivierte oder vom System automatisch als erledigt erkannte Meldungen können im Bereich “Alle Meldungen” (neue Seite) noch eingesehen werden. Hier sind alle Meldungen (ungelesen/gelesen/offen/erledigt/..) tabellarisch aufgelistet, im Standardfall chrononlogisch sortiert (neueste zuerst). Nutzer können auf der Seite nach bestimmten Kriterien (z. B. Eingangsdatum, Status offen/archiviert) sortieren und Filtern. Die Seite “Alle Meldungen” kann entweder aus dem Meldungs-Overlay oder aus dem Hauptmenü heraus geöffnet werden.


Noch ungelesene Meldungen werden im Meldungs-Overlay sowie auf der Seite “Alle Meldungen” mit einem orangenem Punkt markiert. Wird das Overlay bzw. die Seite geschlossen und erneut geöffnet verschwindet die Markierung.

Responsives Verhalten

Ab Fensterbreiten unter 720 Pixel oder Fensterhöhen unter 720 Pixel werden Meldungen nicht mehr als Fly-in angezeigt. Dies stellt sicher, dass der Arbeitsprozess der Nutzenden durch die Meldung nicht zu stark unterbrochen wird. Das akustische Feedback (Ton und Screenreader-ausgabe; siehe unten) findet jedoch weiterhin statt.

Meldungskacheln (Generell)

Meldungen werden (als Fly-In oder im Meldungsoverlay) als Kacheln angezeigt. Eine Meldungskachel zeigt jeweils den gesamten Inhalt einer Meldung, sowie Aktionen an und kann unterschiedlich zusammengestellt sein.

Kategorien

Es gibt zwei Kategorien von Meldungskacheln: 

  • Informative Meldungen
  • Kritische Meldungen.

Abhängig von der Kategorie der Meldung ist die Hintergrundfläche von Fly-In bzw. Meldungskachel unterschiedlich gefärbt:

  • Hinweise/Erinnerungen = Nachtblau
  • Warnung/Fehler und kritische Systemnachrichten = Rot

Welche Fehlerkategorie verwendet wird, ist fachlich im Einzelfall von der auslösenden Instanz (entsprechendes Teilprojekt) zu definieren.

Details zum Inhalt der Meldungskacheln s. Meldungskonzept: Benachrichtigung über das Meldungscenter.

Abhängig davon, ob die Kachel gerade als Fly-In oder im Meldungs-Overlay angezeigt wird kommen folgende Elemente hinzu.

Im Fly-In

  • Icon-Button zum Schließen: Ausführen der Aktion blendet das Fly-In aus. Beschriftung und Tooltip des Buttons lauten “Meldung schließen”.
  • Die gesamte Fly-In-Meldung muss als “Region” mit der Beschriftung “Meldungen” ausgezeichnet sein.

Im Meldungs-Overlay

  • Archivieren-Button: Dies ist ein tertiärer Button mit dem Text “Archivieren” und Symbol, welches als Layoutgrafik zu deklarieren ist. Wird diese Aktion ausgeführt, so verschwindet die Meldung aus dem Overlay und wird nur noch auf der Seite “Alle Meldungen” im Status “archiviert” angezeigt.
  • Neu-Indikator: Bei neuen Meldungen wird ein orangener Punkt als Hinweis vor der jeweiligen Kachel angezeigt. Dieser Hinweis verschwindet, sobald Nutzende den Bereich Meldungen wieder schließen. Der Alternativtext des Punkts lautet “Neu:”.

Archivierung von Meldungen

Es gibt zwei Möglichkeiten zur Archivierung von Meldungen: 

  1. Manuell: Durch das Ausführen der Aktion “Archivieren” im Meldungs-Overlaymenü
  2. Automatisiert: Handelt es sich um eine Meldung, bei der systemseitig geprüft werden kann, ob die Quelle der Meldung behoben wurde und die Meldung somit für Nutzende nicht mehr relevant ist, so kann diese vom System automatisch archiviert werden. Auf der Seite “Alle Meldungen” erhält diese dann den Status “automatisch archiviert”. Beispiel: Meldung “Monatsstatistik am [Datum] fällig”. Wurde die Monatsstatistik erstellt, so verschwindet auch die entsprechende Meldung.

Wurde eine Meldung von Nutzenden manuell archiviert, die Quelle der Meldung wurde aber weiterhin nicht behoben, so kann von den Projekten, falls gewünscht, ein Zeitintervall definiert werden, nach dem die Meldung erneut im Meldungscenter erscheint. Beispiel: Meldung “Monatsstatistik am [Datum] fällig”. Wurde die Meldung vom Nutzer archiviert und zwei Tage später wurde immer noch keine Monatsstatistik erstellt, so erscheint eine neue Meldung “Monatsstatistik am [Datum] fällig.”

(Alternative wäre: Die Meldung kann nicht manuell archiviert werden, wenn eine Erledigungsprüfung automatisiert stattfinden kann. Dies ist noch zu definieren)

Zustände

Barrierefreiheit

Akustisches Feedback

Ein akustischen Signal vom Typ ”Hinweis: Neue Meldung” (siehe Akustische Signale) kann auf das Erscheinen einer neuen Meldung (1.) hinweisen. 
Es kann ggf. in den Nutzereinstellungen konfiguriert werden, ob und bei welchen Meldungstypen Töne abgespielt werden. 

Bei Screenreadernutzenden sollte für die akkustische Ausgabe der Meldung die Einstellung “Polite” gewählt sein. Von Screenreadern wird nach dem Meldungston die Kategorie und der Meldungstext ausgegeben.

Bedienung

Tastaturbedienung

Tastaturbedienung der Meldungskacheln als “Fly-In”

  • Tab fokussiert das erste interaktive Element
  • Mit Tab-Taste kann zum nächsten Interaktiven Element navigiert werden
  • Enter oder Leertaste führt die jeweilige Aktion aus 
    • Nach Ausführen der Aktion “Meldung schließen” im Fly-In schließt sich die Meldung (Animation: Ausfahren nach rechts) und der Tastaturfokus liegt wieder auf dem Element auf der Seite, welches vor dem Klick auf “Schließen” aktiviert war.
    • Nach Ausführen des primären Meldungsbuttons öffnet sich die neue Seite bzw. das neue Modal, das vom entsprechenden Projekt definiert wurde. Der Tastaturfokus befindet sich anschließend auf dem ersten interaktiven Element auf der neu geöffneten Seite/des geöffneten Modals.

Tastaturbedienung des Overlay-Menüs mit allen aktiven Meldungen

  • Tab fokussiert das erste interaktive Element
  • Mit Tab-Taste kann zum nächsten Interaktiven Element navigiert werden
  • Enter oder Leertaste führt die jeweilige Aktion aus 
    • Nach Ausführen des primären Meldungsbuttons öffnet sich die neue Seite bzw. das neue Modal, das vom entsprechenden Projekt definiert wurde. Der Tastaturfokus befindet sich anschließend auf dem ersten interaktiven Element auf der neu geöffneten Seite/des geöffneten Modals.
    • Nach Ausführen der Aktion archivieren verschwindet die Meldung und der Fokus liegt auf dem nächsten interaktiven Element im Overlay (nächste Meldung oder “Menü schließen” Button, falls es sich um die einzige bzw. letzte Meldung gehandelt hat).

Mausbedienung

  • Klick mit linker Maustaste auf eine Aktion führt diese aus

Weitere Themen: