marcus hinz
2.6 KiB
2.6 KiB
title, project, created, source, description, tags
| title | project | created | source | description | tags | ||||
|---|---|---|---|---|---|---|---|---|---|
| UI-Guideline — ai-control Panel | ai-control | 2026-07-23T17:15:08Z | ai-control | Maßstab für den Panel-/Navigator-Umbau: Schriftgrößen, Dichte, 4-px-Spacing, Dialoge statt In-situ, sichtbare Aktionen |
|
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