nova Handbuch

1.1 Einstieg / UI-Elemente

Badges, Buttons, Status-Farben und interaktive Elemente der Oberfläche.

Was sind UI-Elemente?

nova nutzt eine einheitliche Oberfläche, die auf wiederkehrenden Bedienelementen aufbaut. Dieses Kapitel stellt die wichtigsten visuellen Bausteine vor, damit Sie sie im Handbuch und in der Anwendung sofort wiedererkennen.

Status-Badges

Badges sind kleine farbige Etiketten, die den Zustand eines Datensatzes auf einen Blick anzeigen. Sie tauchen in Tabellen, in Detailansichten und in manchen Widgets auf.

Aktiv Inaktiv Entwurf In Bearbeitung Archiviert

Die Farben haben in nova immer dieselbe Bedeutung:

  • Grün (success) – alles in Ordnung, aktiv, abgeschlossen
  • Rot (danger) – Fehler, inaktiv, abgelehnt, storniert
  • Gelb/Orange (warning) – Hinweis, Entwurf, ausstehend
  • Blau (info) – neutral, in Bearbeitung, Information
  • Grau (gray) – archiviert, nicht relevant, optional

Buttons und Aktionen

Aktionen werden in nova als Buttons dargestellt. Es gibt verschiedene Stile:

  • Gefüllter Button (primary) – Hauptaktion der aktuellen Seite, z. B. „Speichern" oder „Erstellen"
  • Roter Button (danger) – irreversible Aktion, z. B. „Löschen" oder „Stornieren". Immer mit Bestätigungsdialog!
  • Grauer Button (gray) – Nebenaktionen, z. B. „Abbrechen" oder „Schließen"
  • Umrandeter Button (outlined) – weniger betonte Alternative zum gefüllten Button

Icon-Buttons in Tabellenzeilen

In Tabellen sehen Sie am rechten Rand jeder Zeile kleine Symbol-Buttons oder ein Drei-Punkte-Menü (⋮). Dahinter verbergen sich die Zeilenaktionen wie „Anzeigen", „Bearbeiten" oder „Löschen".

Formularfelder

Formulare in nova bestehen aus verschiedenen Feldtypen:

  • Textfeld – Freitext, z. B. für Name oder Beschreibung
  • Datumsfeld – Datum über einen Kalender auswählen
  • Dropdown / Auswahlfeld – eine Option aus einer vordefinierten Liste wählen
  • Mehrfachauswahl – mehrere Optionen gleichzeitig auswählen
  • Umschalter (Toggle) – An/Aus für boolesche Einstellungen
  • Richtext-Editor – formatierter Text mit Überschriften, Listen und Fettschrift
  • Datei-Upload – Dokumente oder Bilder hochladen

Pflichtfelder sind mit einem roten Sternchen * gekennzeichnet. Wenn Sie ein Pflichtfeld übersehen haben, markiert nova es rot und zeigt eine Fehlermeldung an.

Modale Dialoge

Manche Aktionen öffnen ein modales Fenster (ein Overlay, das sich über die aktuelle Seite legt). Das passiert zum Beispiel bei:

  • Bestätigungsabfragen vor dem Löschen
  • Schnellerfassungs-Formularen (ohne die Seite zu verlassen)
  • Datei-Vorschauen und Downloads

Modale können über den „Abbrechen"-Button, das X oben rechts oder die Escape-Taste geschlossen werden.

Tabs (Reiter)

Viele Detailansichten, besonders das Teilnehmendenprofil, sind in Tabs aufgeteilt. Jeder Reiter bündelt thematisch zusammengehörige Informationen, z. B. „Stammdaten", „Krankheitsbild" oder „Kostenträger". Klicken Sie auf einen Tab, um ihn anzuzeigen.

Infoboxen und Hinweise

In manchen Bereichen erscheinen farbige Infoboxen mit zusätzlichen Hinweisen:

💡 Tipp: Informationen und Hinweise für die tägliche Arbeit erscheinen in blauen Boxen.
⚠️ Hinweis: Wichtige Warnungen und Dinge, die besondere Aufmerksamkeit erfordern, erscheinen in gelben Boxen.
🚫 Achtung: Kritische Hinweise, die nicht übersehen werden dürfen, erscheinen in roten Boxen.

Nummerierung im Handbuch

Im Inhaltsverzeichnis links sind die Kapitel nummeriert (z. B. 1.1, 2.3). Diese Nummerierung hilft bei der Orientierung und beim gezielten Verweisen auf Kapitel. Die gleiche Nummerierung finden Sie in den Überschriften jedes Kapitels.

webentwicklung igor clauss nova