Readiz Web-UI-Design
Benutzer mögen keine Konfigurationen, bei denen Buttons und Erklärungen den Bildschirm dominieren. Gestalte mit kleinen Bedienelementen und klaren Hierarchien, damit der tatsächliche Inhalt auf einen Blick lesbar und navigierbar ist. Wende diese Richtlinien auf neue und bestehende Web-UIs an. Falls der Benutzer spezifische Marken-, Plattform- oder Barrierefreiheitsanforderungen festgelegt hat, befolge diese zuerst.
Grundlegende Dichte
Die folgenden Werte gelten als Ausgangspunkt für Web-Tools ohne separate Designvorgaben. Reduziere unnötige Leerräume und Bedienelemente, anstatt den Text übermäßig zu verkleinern.
| Element | Standardwert |
|---|---|
| Allgemeine Buttons, Filter, Selects | Höhe 28px, Schrift 12px, horizontaler Padding 6–8px |
| Symbol-Buttons | 26×26px, Symbol 14–16px |
| Hilfs-/Tabellen-Bedienelemente | 24–26px |
| Abstand zwischen Buttons | 4–6px |
| Innenabstand von Karten | 12–16px |
| Tabellenzellen | Vertikal 5–7px, Horizontal 6–10px |
| Fließtext | 13–14px, Zeilenhöhe 1.5–1.7 |
- Kurze Buttons passen sich der Textbreite an. Erstelle keine großen oder breiten Buttons nur, weil es sich um eine primäre Aktion handelt.
- Behalte auch auf mobilen Geräten eine kompakte visuelle Größe bei. Vergrößere nicht alle Buttons über eine gemeinsame Media Query auf 38–48px. Falls tatsächliche Berührungsfehler auftreten, passe den Abstand und die Trefferfläche des betreffenden Bedienelements an und stelle sicher, dass es nicht mit benachbarten Bedienelementen kollidiert. Befolge explizit angegebene Plattformspezifikationen separat.
- Lange Multiple-Choice- oder Listeneinträge dehnen sich natürlich auf die Länge des Textes aus. Schneide lesbaren Inhalt nicht durch feste Höhen oder Textauslassungen ab. Falls die aktuelle Überschrift separat angezeigt werden kann (z. B. bei Nummernnavigation), trenne kleine Navigationsbedienelemente vom Inhaltstitel.
- Bevorzuge Blautöne als primäre Akzentfarbe. Verwende helle, ruhige Hintergründe, dünne Grenzen und kleine Ecken.
Bildschirmaufbau
- Platziere tatsächliche Diagramme, Tabellen und Kerninhalte im sichtbaren Bereich. Dränge den Arbeitsbereich nicht durch große Einleitungstitel, lange Untertitel oder doppelte Badges aus dem sichtbaren Bereich.
- Verwende Tabellen für wiederholte Zahlen und Vergleiche, sortierte Listen oder kurze Tabs für die Navigation, und kleine Symbolleisten für Diagramm-Bedienelemente. Liste einzelne Buttons nicht als große Karten auf.
- Verwende für vertraute Aktionen das vorhandene SVG-/Symbolsystem des Projekts. Gib Symbolen zugängliche Namen und Tooltips/kurze Labels, falls erforderlich. Verwende nicht nur Farben, um Auswahl, Erfolg oder Fehler zu unterscheiden.
- Behalte Kernzusammenfassungen und häufig verwendete Bedienelemente sichtbar; platziere detaillierte Erklärungen, Quellen, Verwendungshinweise und Speicherkriterien hinter ⓘ oder in standardmäßig eingeklappten Details. Zeige Fehler, fehlgeschlagene Speicherungen, Ausführungsergebnisse und wichtige Entscheidungsbedingungen nur zum erforderlichen Zeitpunkt an.
- Wiederhole denselben Status nicht in Titeln, Karten, Badges und Beschreibungen. Zwinge Benutzer nicht, lange Texte zu lesen, um Funktionen zu finden.
- Halte Abstände und Ausrichtungen von Aktionsbuttons, Tabellen und Diagrammen konsistent. Für Desktop-Inhaltsverzeichnisse eignet sich eine schmale Leiste; für mobile Geräte sind einklappbare Layouts geeignet, die die aktuelle Position anzeigen.
Überprüfung mit tatsächlichem Bildschirm
- Überprüfe vor Änderungen die tatsächlichen computed height, padding, line-height der Buttons und die Position des ersten Inhalts. Verlasse dich nicht nur auf geänderte CSS-Deklarationen, um zu beurteilen, ob etwas kleiner geworden ist.
- Ändere zunächst vorhandene Komponenten-Varianten und -Token. Überprüfe, ob gemeinsames CSS, hohe Spezifität, mobile Overrides oder dynamische Styles die Größe wieder vergrößern. Sammle keine Überschreibungsregeln an, sondern bereinige die Ursache der entsprechenden Größe.
- Betrachte die Oberfläche auf repräsentativen Desktop-, Tablet- und 360–390px Mobilgeräten direkt. Stelle sicher, dass allgemeine Bedienelemente die obigen Standardwerte einhalten, dass lange Texte nicht abgeschnitten werden und dass keine horizontalen Überläufe oder Überlappungen von Tools und Diagrammen auftreten.
- Überprüfe Aufklapp-, Auswahl-, Tastaturfokus- und Berührungsfunktionen sowie erforderliche Speicher-/Wiederherstellungsvorgänge. Ändere keine vorhandenen Daten, Speicherschlüssel oder Diagrammkoordinaten aufgrund von Designänderungen.
- Implementiere und verifiziere die Ergebnisse im geforderten Umfang. Bei Aufgaben, die eine Bereitstellung umfassen, überprüfe auch die tatsächliche veröffentlichte Oberfläche. Dieser Skill selbst fügt keine Berechtigungen zum Veröffentlichen oder Senden von Nachrichten hinzu.