Form Designvon Owl-Listener

Form Design Skill.

Legen Sie den Weg vom ersten Feld bis zum erfolgreichen Absenden fest, einschließlich Korrekturen und erneuter Besuche.

UX
Design-Leitfaden

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Form DesignSKILL.md

Aufgabe UX Ergebnis • Eine Feldreihenfolge mit Gruppierung und Eingabetypen • Beschriftungen, Hinweise und Validierungsverhalten • Regeln für mehrstufige Formulare, Fokus, Fehlerübersicht und Fortschritt Vor dem Start Ein Agent, der das Formular-Briefing, die Pflichtfelder und Validierungsregeln sowie vorhandene Formularansichten lesen kann.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Form Design: Dateneingabe klar gestalten

Legt Feldreihenfolge, Beschriftungen, Eingabetypen, Validierung und Korrektur für ein vollständiges Formular fest.

Auf der Quelle basierender AblaufKein Ausführungs-Benchmark

Die Arbeitsweise

Form Design deckt ein Formular von Anfang bis Ende ab. Es behandelt Layout, Beschriftungen, Hilfetexte, Eingabetypen, Validierung, Fortschritt in mehrstufigen Formularen und Barrierefreiheit. Die Quelle bevorzugt eine klare Lesereihenfolge und Feldbreiten, die die erwartete Eingabe vermitteln.

Die detaillierten Verhaltensvorgaben umfassen Validierung beim Verlassen des Felds (Blur), mit Feldern verbundene Fehlermeldungen, erhalten bleibende Eingaben bei Rücknavigation und einen Prüfschritt bei folgenreichen Übermittlungen. Das sind Gestaltungsentscheidungen, die an die tatsächlichen Daten und Nutzenden anzupassen sind; sie belegen nicht, dass ein ungetestetes Formular häufiger abgeschlossen wird.

Erwartete Ergebnisse

Eine Feldreihenfolge mit Gruppierung und Eingabetypen
Beschriftungen, Hinweise und Validierungsverhalten
Regeln für mehrstufige Formulare, Fokus, Fehlerübersicht und Fortschritt

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Felder reduzieren und ordnen
Notwendige Informationen identifizieren und zusammengehörige Fragen in einer klaren Lesereihenfolge gruppieren.
02
Eingabeverhalten festlegen
Eingabearten, dauerhafte Beschriftungen, Hilfetexte und den Zeitpunkt der Validierung wählen.
03
Abschluss und Korrektur behandeln
Erhaltene Daten, Rücknavigation, Fokus bei Fehlern und eine Prüfung vor folgenreichem Absenden definieren.

02 Einsatzbereiche

Wann es sich eignet

Nutzen Sie es, um ein neues Formular zu gestalten oder verwirrende Felder, Validierung und Fortschritt in einem bestehenden Formular zu verbessern.

Gut geeignet

Lange AntragsformulareZusammengehörige Fragen in stimmige Schritte gliedern, ohne Fortschritt zu verlieren.
Reibung auf FeldebeneVerwirrende Hinweise, Eingabeformate und Validierungsmeldungen klären.

Grenzen, die Sie prüfen sollten

Keine garantierte Steigerung der ConversionVerbesserungen beim Abschluss erfordern Beobachtung und Messung.
Nicht alle ProduktfehlerNetzwerk- und Berechtigungsstrategien, die mehrere Abläufe übergreifen, gehen über ein einzelnes Formular hinaus.

Diese Eingaben mitbringen

Erforderliche DatenFelder, Formate und die Gründe auflisten, warum sie benötigt werden.
ValidierungsregelnTatsächliche Client- und Server-Beschränkungen angeben.
Kontext des AbschlussesFolgen, Gerätenutzung und die Frage erläutern, ob Personen später zurückkehren.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

Korrektur ist gestaltet
Fokussierbare Übersichten und mit Feldern verknüpfte Meldungen helfen, Fehler effizient zu beheben.
Fortschritt bleibt erhalten
Rücknavigation und teilweises Ausfüllen erfordern ein ausdrücklich definiertes Zustandsverhalten.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie die SKILL.md dieser Aufgabe aus dem designer-skills-Repository an den von Ihrem Agenten unterstützten Skill-Speicherort. Die Eingangsdatei legt keinen allgemeingültigen Installationsbefehl fest.

Quelldatei im Upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md

Geben Sie die erforderlichen Felder und die tatsächlichen Validierungsregeln an. Das Ergebnis ist eine Formularspezifikation; Umsetzung und Nutzertests bleiben getrennte Schritte.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Nutze form-design, um dieses mehrstufige Projekt-Briefing neu zu gestalten. Entferne nicht begründete Felder, gruppiere zusammengehörige Fragen, definiere dauerhafte Beschriftungen und Validierung beim Verlassen des Felds und erhalte Eingaben bei der Rücknavigation. Spezifiziere eine barrierefreie, verlinkte Fehlerübersicht und einen abschließenden Prüfschritt.

Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

Jedes Feld hat eine dauerhafte, programmatisch zugeordnete Beschriftung.
Fehlermeldungen erklären die Korrektur und sind mit dem Feld verbunden.
Die Rücknavigation erhält eingegebene Daten.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt den unten verlinkten, festgelegten Quellstand. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: interaction-design/skills/form-design/SKILL.md
Lizenz: MIT
Geprüfter Snapshot: 2026-10-07 · 9a6930cf84a8

Redaktionelle Zusammenfassung der Quelle

Legt Feldreihenfolge, Beschriftungen, Eingabetypen, Validierung und Korrektur für ein vollständiges Formular fest.

Eigene Zusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Die Sterne des Repositorys sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann Platzhaltertext eine Beschriftung ersetzen?

Laut Quelle nein; Beschriftungen müssen auch nach der Eingabe sichtbar bleiben.

Wann sollte die Feldvalidierung erfolgen?

Die Quelle empfiehlt die Validierung beim Verlassen des Felds (Blur) statt bei jedem Tastendruck; Ausnahmen sind an reale Interaktionsbedürfnisse anzupassen.

Braucht ein mehrstufiges Formular gespeicherten Fortschritt?

Die Quelle empfiehlt für längere Abläufe erhaltene Daten und ein Verhalten zum Speichern des Fortschritts.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchstöbern