Aller au guide d’utilisation
Form Designpar Owl-Listener

Form Design Skill.

Définissez le parcours depuis le premier champ jusqu'à une soumission réussie, y compris les corrections et les retours ultérieurs.

  • UX
  • Conseils de conception
Revue de la source · Form DesignSKILL.md
Tâche UX Produit • Une séquence de champs avec regroupement et types de saisie • Des libellés, des instructions et un comportement de validation • Des règles pour les formulaires multi-étapes, le focus, le récapitulatif des erreurs et la progression Avant de commencer Un agent capable de lire le brief du formulaire, les champs obligatoires et les règles de validation, ainsi que les écrans de formulaire existants.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Form Design : rendre la saisie de données claire

Précisez l'ordre des champs, les libellés, les types de saisie, la validation et la correction pour un formulaire complet.

Workflow fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Form Design couvre un formulaire de bout en bout. Il traite la mise en page, les libellés, les textes d'aide, les types de saisie, la validation, la progression multi-étapes et l'accessibilité. La source privilégie un ordre de lecture clair et des largeurs de champ qui indiquent la saisie attendue.

Ses consignes détaillées de comportement incluent la validation au blur, des erreurs liées aux champs, la conservation de la saisie lors de la navigation arrière et une étape de relecture pour les soumissions à enjeux élevés. Ce sont des décisions de conception à adapter aux données et aux utilisateurs réels, et non la preuve qu'un formulaire non testé améliorera le taux de complétion.

Livrables attendus

  • Une séquence de champs avec regroupement et types de saisie
  • Des libellés, des instructions et un comportement de validation
  • Des règles pour les formulaires multi-étapes, le focus, le récapitulatif des erreurs et la progression
Voir le brief d'exemple

Du brief à la revue

  1. 01
    Réduire et ordonner les champs

    Identifiez les informations nécessaires et regroupez les questions liées dans une séquence de lecture claire.

  2. 02
    Définir le comportement de saisie

    Choisissez les saisies, les libellés persistants, les textes d'aide et le moment de la validation.

  3. 03
    Gérer la finalisation et la correction

    Définissez les données conservées, la navigation arrière, le focus sur les erreurs et la relecture avant une soumission importante.

02 Cas d’usage

Quand l'utiliser

Utilisez-le pour concevoir un nouveau formulaire ou pour traiter des champs, une validation et une progression déroutants dans un formulaire existant.

Un bon choix

  • Longs formulaires de candidatureRépartissez les questions liées en étapes cohérentes sans perdre la progression.
  • Friction au niveau des champsClarifiez les instructions, les formats de saisie et les messages de validation qui prêtent à confusion.

Limites à vérifier

  • Aucune garantie d'augmentation des conversionsLes améliorations du taux de complétion exigent observation et mesure.
  • Pas toutes les erreurs du produitLa stratégie réseau et permissions à l'échelle de plusieurs parcours dépasse le cadre d'un seul formulaire.

Fournissez ces éléments

  • Données requisesListez les champs, les formats et les raisons pour lesquelles ils sont nécessaires.
  • Règles de validationFournissez les contraintes réelles côté client et côté serveur.
  • Contexte de finalisationExpliquez les conséquences, l'usage selon l'appareil et si les personnes reviennent plus tard.

03 Décisions importantes

Les décisions qui comptent

  1. La correction est conçue

    Des récapitulatifs pouvant recevoir le focus et des messages liés aux champs aident les personnes à corriger efficacement.

  2. La progression est conservée

    La navigation arrière et la saisie partielle exigent un comportement d'état explicite.

04 Exemple de brief

Essayer un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Chargez le SKILL.md de cette tâche depuis le dépôt designer-skills dans l'emplacement de skills pris en charge par votre agent. Le fichier d'entrée n'établit aucune commande d'installation universelle.

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

Fournissez les champs obligatoires et les règles de validation réelles. Le résultat est une spécification de formulaire ; l'implémentation et les tests utilisateurs restent distincts.

Commencer par un livrable

Adaptez le périmètre, le matériel source et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple
Utilisez form-design pour repenser ce brief de projet en plusieurs étapes. Supprimez les champs injustifiés, regroupez les questions liées, définissez des libellés persistants et une validation au blur, et conservez la saisie lors du retour en arrière. Précisez un récapitulatif d'erreurs accessible avec liens vers les champs et une étape de relecture finale.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque champ possède un libellé persistant associé par programmation.
  • Les erreurs expliquent comment corriger et sont liées au champ.
  • La navigation arrière conserve les données saisies.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

05 Source et licence

Source et licence

Cette page décrit la révision figée de la source liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Précisez l'ordre des champs, les libellés, les types de saisie, la validation et la correction pour un formulaire complet.

Résumé original par OpenDesign, d'après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Un texte indicatif peut-il remplacer un libellé ?

La source dit que non ; les libellés doivent rester disponibles après la saisie.

Quand la validation des champs doit-elle avoir lieu ?

La source recommande le blur plutôt qu'une validation à chaque frappe ; adaptez les exceptions aux besoins d'interaction réels.

Un formulaire multi-étapes doit-il sauvegarder la progression ?

La source recommande la conservation des données et la sauvegarde de la progression pour les parcours plus longs.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre workflow.

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