Diese Seite dokumentiert grundlegende UI/UX-Designentscheidungen der SELF-le@rn Plattform.

Farben

Farbbezeichnung	Bild	Einsatz
emerald-500		Hintergrundfarbe von Aktions-Buttons (Erstellen, Speichern, Hinzufügen) und Textfarbe mancher Überschriften.
purple-500
slate-500
slate-200

Aktionen

Zur Manipulation von Inhalten der SELF-le@rn Plattform stehen eine Reihe von Aktionen zur Verfügung:

Aktion	Beschreibung
Erstellen	Eine neue Instanz eines Objekts wird angelegt.
Hinzufügen	Eine bereits existierende Instanz eines Objekts wird einer Instanz eines anderen Objekts zugeordnet.
Löschen	Eine bereits existierende Instanz eines Objekts wird dauerhaft gelöscht.
Entfernen	Die Zuordnung einer bereits existierenden Instanz eines Objekts zu einer Instanz eines anderen Objekts wird aufgelöst. Die entfernte Instanz bleibt bestehen. Lediglich die Zuordnung wird gelöscht.
Bearbeiten	Die Eigenschaften einer bereits existierenden Instanz eines Objekts wird bearbeitet.
Speichern	Änderungen an einer Instanz eines Objekts werden gespeichert.
Abbrechen	Änderungen an einer Instanz eines Objekts werden verworfen und nicht gespeichert.
Hochladen	Eine Datei hochladen.
Mehr anzeigen	Eine minimierte Ansicht ausklappen.

Beispiele:

Hinzufügen:

• Ein Skill wird den vermittelten Skills einer Lerneinheit hinzugefügt.
• Ein Modul wird einer Lerneinheit hinzugefügt um ein Verbundmodul zu bilden.

Der Skill und das Modul existierten bereits im Voraus.

Entfernen:

• Ein vermittelter Skill einer Lerneinheit wird entfernt.
• Die Lizenz einer Lerneinheit wird entfernt.

Der Skill und die Lizenz bleiben weiterhin bestehen.

Bearbeiten:

• Die Eigenschaften einer Lerneinheit werden bearbeitet.
• Die Eigenschaften eines Skills werden bearbeitet.

Die Lerneinheit und der Skill wurden bereits angelegt und werden verändert.

Icons

Wir verwenden heroicons für Icons in der Benutzeroberfläche. Spezifisch verwenden wir die heroicons/react/24/solid Variante. Die Dokumentation liegt hier vor: https://github.com/tailwindlabs/heroicons.

Aktionen

Beinaher jeder Aktion ist ein Icon zugeordnet:

Aktion	Icon	Bild
Hinzufügen	PlusIcon
Löschen	TrashIcon
Entfernen	XMarkIcon
Bearbeiten	PencilIcon
Hochladen	CloudArrowUpIcon

Sonstige

Bezeichnung	Icon	Bild
Spezialisierungen	SparklesIcon
Kurse	Square3Stack3DIcon
Skill	PuzzlePieceIcon
Profil	UserIcon (outline variant)
Einstellungen	AdjustmentsHorizontalIcon
Autorenbereich	PencilSquareIcon
Logout	ArrowLeftOnRectangleIcon
Hochgeladene Dateien	CloudArrowUpIcon
Bild einfügen	PhotoIcon
Link einfügen	LinkIcon

Buttons

Unterhalb wird zwischen Full Buttons und Hover Buttons differenziert:

Typ	Beschreibung
Full Button	Sind dauerhaft auf der Benutzeroberfläche sichtbar.
Hover Button	Erscheinen beim hovern über einen bestimmten Bereich der Benutzeroberfläche.

Full Buttons

Handlungskritische Buttons

• Anwendung: Erstellen, Speichern, Hochladen
• Gestaltung: Voller grüner Hintergrund (emerald-500) mit weißer Schrift
• Typografie: Halbfett (font-semibold)
• Position: s.u.
• Inhalt: s.u.
• Beschreibung: Diese Aktionen schließen wichtige Prozesse ab, starten neue Objekte oder fügen signifikante neue Inhalte hinzu

Position

• Erstellen: Rechts neben der Überschrift, welche angibt, welches Objekt (z.B. Lerneinheit) angelegt wird.
• Speichern: In der unteren rechten Ecke des Dialogs / des Fensters.

Inhalt

• Erstellen: Objektbezeichnung + Aktionsbezeichnung (z.B. Kurs erstellen)
• Speichern, Hochladen: Nur Aktionsbezeichnung

Ergänzungs-Buttons

• Anwendung: Hinzufügen (von bestehenden Objekten)
• Gestaltung: Weißer Hintergrund mit grüner Outline, grünem Text und Icon
• Typografie: Halbfett (font-semibold)
• Inhalt: Icon + Aktionsbezeichnung
• Position: Konsistent rechts neben der Überschrift, welche angibt, welches Objekt (z.B. Lerneinheit) hinzugefügt wird
• Beschreibung: Diese Aktionen erweitern bestehende Strukturen, sind wichtig aber weniger kritisch als primäre Handlungen

Modifikations-Buttons

• Anwendung: Bearbeiten
• Gestaltung: Transparenter Hintergrund, hellgraues oder schwarzes Icon
• Inhalt: Immer mit Icon (PencilIcon), je nach Kontext mit zusätzlicher Aktionsbezeichnung
• Position: Konsistent rechts neben der Überschrift, welche angibt, welches Objekt (z.B. Lerneinheit) bearbeitet wird
• Beschreibung: Diese Aktionen leiten Änderungsprozesse ein, sollen visuell präsent aber nicht dominant sein

Navigation und Darstellung

• Anwendung: Mehr anzeigen, Ein-/Ausklappen
• Gestaltung: Transparenter Hintergrund, hellgraues oder schwarzes Icon/Text
• Inhalt: Je nach Kontext Icon oder Text oder beides
• Beschreibung: Diese Aktionen verändern nur die Darstellung, nicht die Daten selbst

Rücknahme-Buttons

• Abbrechen von Prozessen

  • Anwendung: Abbrechen von Formularen, Workflows
  • Gestaltung: Weißer Hintergrund, schwarze/dunkelgraue Schrift
  • Typografie: Halbfett (font-semibold)
  • Inhalt: Nur Aktionsbezeichnung "Abbrechen"
  • Position: Konsistent in der unteren rechten Ecke des Dialogs / des Fensters
  • Beschreibung: Klare Kommunikation der Handlung beim Verwerfen von Änderungen

• Entfernen von Zuordnungen

  • Anwendung: Lösen von Beziehungen zwischen Objekten (z.B. Autor von Lerneinheit entfernen)
  • Gestaltung: Icon (XMarkIcon) in hellgrau/schwarz
  • Inhalt: Nur Icon
  • Position: Konsistent rechts neben dem zu entfernenden Element
  • Beschreibung: Räumliche Nähe verdeutlicht, dass nur diese spezifische Zuordnung entfernt wird

• Schließen von Dialogen

  • Anwendung: Schließen/Ausblenden von Overlay-Elementen
  • Gestaltung: Icon (XMarkIcon) in hellgrau/schwarz
  • Inhalt: Nur Icon
  • Position: Konsistent in der oberen rechten Ecke des Dialogs
  • Beschreibung: Durch die konsistente Positionierung wird die Bedeutung "Schließen" klar

Lösch-Buttons

• Anwendung: Löschen
• Gestaltung: Rotes Icon (TrashIcon)
• Inhalt: Nur Icon
• Position: Konsistent rechts neben dem zu entfernenden Element
• Beschreibung: Diese Aktionen entfernen Daten permanent und sollten besonders gekennzeichnet sein

Zusammenfassung der visuellen Hierarchie

Buttontyp	Hintergrund	Text/Icon	Inhalt	Beispielaktionen
Handlungskritisch	emerald-500	weiß	Text (+ optional Icon)	Erstellen, Speichern, Hochladen
Ergänzung	weiß mit grüner Outline	grün	Icon + Text	Hinzufügen
Modifikation	transparent	hellgrau/schwarz	Icon (+ optional Text)	Bearbeiten
Navigation	transparent	hellgrau/schwarz	Icon oder Text	Mehr anzeigen
Rücknahme (Abbrechen)	weiß	schwarz/dunkelgrau	Text	Abbrechen
Rücknahme (Entfernen)	transparent	hellgrau/schwarz	Icon	Entfernen von Zuordnungen
Löschen	transparent	rot	Icon	Löschen

Weitere Regeln

• Singular verwenden (z.B. Skillkarte anstatt Skillkarten)
• Keine Synonyme verwenden (z.B. Anlegen anstatt Erstellen)

Hover Buttons

Im tabellarischen Skilleditor der Skillansicht des Kompetenzerwerbseditors werden Aktions-Buttons aus Platzgründen anders dargestellt. Buttons für die Aktionen Erstellen, Bearbeiten und Löschen erscheinen erst beim Hovern über eine Tabellenzeile. Dabei werden lediglich die Icons verwendet. Beim Hovern über diese Icons werden diese in emerald-500 umgefärbt.

Beispiel:

Bild	Beschreibung
	Default-Ansicht eines Skills, wenn sich der Mauszeiger außerhalb der Tabellenzeile befindet.
	Ansicht eines Skills, wenn sich der Mauszeiger auf der Tabellenzeile befindet.
	Ansicht eines Buttons, wenn sich der Mauszeiger auf diesem befindet.

Dialoge

Nachfolgend werden Varianten, Verwendung, Inhalte und das Layout von Dialog-Komponenten beschrieben.

Varianten

Hinweis

Verwendung:

• Beim Klicken auf einen „Löschen“-Button
• Beim Löschen von Elementen (z. B. Daten)

Inhalte:

• Titel
• Text
• Optional: Eingabefeld (z.B. um PROFILNAME als Bestätigung beim Löschen von Daten einzugeben)
• Buttons: Abbrechen, Bestätigen

Formular

Verwendung:

• Beim Klicken auf „Bearbeiten“- oder „Erstellen“-Button
• Zum Erstellen oder Bearbeiten von Elementen (z. B. Kapitel erstellen)

Inhalte:

• Titel
• Optional: Beschreibung
• Label + Eingabefeld
• Optional: Weitere Label-Eingabefeld-Paare
• Buttons: Abbrechen, Erstellen/Bearbeiten

Auswahl

Verwendung:

• Beim Klicken auf einen „Hinzufügen“-Button
• Zum Hinzufügen von Elementen (z. B. Autor:in hinzufügen)

Inhalte:

• Titel
• Suchleiste
• Tabelle
• Buttons: Abbrechen, Speichern

Information

Verwendung:

• Beim Klicken auf ein Informations-Icon
• Zum Anzeigen zusätzlicher Informationen

Inhalte:

• Titel
• Text
• Optional: Bearbeiten-Button (rollenabhängig)

Positionierung

• Dialog erscheint zentriert auf dem Bildschirm.
• Dialog hat eine definierte Maximalgröße. Es sollen nicht statische Werte wie w-50 oder h-50 verwendet werden.

Layout

• Elemente werden vertikal untereinander dargestellt.
• Buttons sind unten rechts im Dialog gruppiert.

Schließen

• Jeder Dialog enthält oben rechts ein Schließen-Icon (XIcon).

Hinweise zur Umsetzung

• Alle Texte, Labels und Buttons sollten kontextabhängig benannt werden (z. B. "Kapitel erstellen" statt nur "Erstellen").