---
title: "UI-Guideline — ai-control Panel"
project: ai-control
created: 2026-07-23T17:15:08Z
source: ai-control
description: "Maßstab für den Panel-/Navigator-Umbau: Schriftgrößen, Dichte, 4-px-Spacing, Dialoge statt In-situ, sichtbare Aktionen"
tags: ["ui", "design", "guideline", "panel"]
---

# UI-Guideline — ai-control Panel

Grundlage: Recherche 2026-07-23 (Learn UI Design, Fluent 2, WCAG, Baymard, NN/g, Notebook Navigator). Maßstab für den anstehenden UI-Umbau von Panel und Navigator.

## Schrift

- Basisgröße interaktiver Flächen: **13–14 px**; Fließtext im Dokument 14–16 px.
- Unter 12 px nur Meta-Zeilen (Datum, Pfad, Zähler) — nie für klickbare Labels.
- Zeilenhöhe 1.4–1.6; Überschriften ~1.3.

## Dichte und Maße

- Interaktive Listenzeilen: Zielhöhe **28–32 px** (Fluent Compact: 32 px; Standard: 40 px).
- Alles Klickbare mindestens **24×24 px** (WCAG); kleinere Icons bekommen entsprechend Padding/Hit-Area.
- Dichte entsteht über eine konsequente Spacing-Skala, nicht über kleinere Schrift.

## Spacing

- Durchgängige **4-px-Skala**: 4 / 8 / 12 / 16 / 24. Keine Zwischenwerte (2, 3, 6, 7 px).
- Innenabstand von Karten/Formularen: 12–16 px; Abstand zwischen Zeilen: 4–8 px.

## Navigator (Wiki-Tab)

- Zwei-Spalten-Muster beibehalten (Ordnerbaum links, flache Liste rechts) — entspricht dem etablierten Notebook-Navigator-Muster.
- Listenzeilen großzügig: Titel + Meta-/Vorschauzeile, klare Trennung.
- Tastatur-Navigation: Tab wechselt die Spalte, Pfeiltasten in Baum und Liste.
- Klick wechselt Inhalt, erhält aber Auswahl und Kontext.

## Dialoge statt In-situ

- Abgeschlossene Aufgaben mit eigener Entscheidung (Anlegen, Umbenennen, Verschieben) laufen in einem **modalen Dialog** mit Platz: Titel, beschriftetes Feld, Bestätigen/Abbrechen, Enter/Escape.
- In-situ nur für triviale, sofort reversible Einzelfeld-Edits.

## Aktionen sichtbar

- „Hide and hover" ist ein Anti-Pattern: Zeilen-Aktionen nicht erst bei Hover einblenden.
- Aktionen dauerhaft sichtbar (gedämpft statt versteckt) oder als Kontextmenü pro Zeile.

## Quellen

- https://www.learnui.design/blog/font-size-principles-resources.html
- https://developerux.com/2025/02/12/typography-in-ux-best-practices-guide/
- https://fluent2.microsoft.design/layout
- https://mantlr.com/blog/spacing-system-cheat-sheet
- https://blog.logrocket.com/ux-design/all-accessible-touch-target-sizes/
- https://blog.logrocket.com/ux-design/modal-ux-best-practices/
- https://www.eleken.co/blog-posts/modal-ux
- https://notebooknavigator.com/
- https://baymard.com/blog/list-items-hover-and-hit-area