102.3K+Scarica
Vai alla guida all’uso
Form Designdi Owl-Listener

Form Design Skill.

Specifica il percorso dal primo campo all'invio andato a buon fine, comprese le correzioni e i ritorni successivi.

  • UX
  • Linee guida di design
Scarica OpenDesignVedi la guida all'uso
Revisione della fonte · Form DesignSKILL.md
Attività UX Produce • Una sequenza di campi con raggruppamenti e tipi di input • Etichette, istruzioni e comportamento della validazione • Regole per passaggi multipli, focus, riepilogo degli errori e avanzamento Prima di iniziare Un agente in grado di leggere il brief del modulo, i campi obbligatori e le regole di validazione, e le eventuali schermate del modulo esistenti.
Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Form Design: rendere chiaro l'inserimento dei dati

Specifica ordine dei campi, etichette, tipi di input, validazione e correzione per un modulo completo.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Form Design copre un modulo dall'inizio alla fine. Riguarda layout, etichette, testo di aiuto, tipi di input, validazione, avanzamento a più passaggi e accessibilità. La fonte privilegia un ordine di lettura chiaro e larghezze dei campi che comunichino l'input atteso.

Le indicazioni dettagliate sul comportamento includono validazione al blur, errori collegati ai campi, conservazione dell'input durante la navigazione indietro e un passaggio di revisione per gli invii ad alto rischio. Sono decisioni di design da adattare ai dati e agli utenti reali, non prove che un modulo non testato migliorerà i completamenti.

Risultati attesi

  • Una sequenza di campi con raggruppamenti e tipi di input
  • Etichette, istruzioni e comportamento della validazione
  • Regole per passaggi multipli, focus, riepilogo degli errori e avanzamento
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Ridurre e ordinare i campi

    Individua le informazioni necessarie e raggruppa le domande correlate in una sequenza di lettura chiara.

  2. 02
    Specificare il comportamento di inserimento

    Scegli input, etichette persistenti, testo di aiuto e tempistica della validazione.

  3. 03
    Gestire completamento e correzione

    Definisci i dati conservati, la navigazione indietro, il focus sugli errori e la revisione prima di un invio importante.

02 Quando usarlo

Quando usarla

Usala per progettare un nuovo modulo o per risolvere campi poco chiari, problemi di validazione e di avanzamento in un modulo esistente.

Casi in cui è adatta

  • Moduli di candidatura lunghiSuddividi le domande correlate in passaggi coerenti senza perdere l'avanzamento.
  • Attrito sui singoli campiChiarisci istruzioni confuse, formati di input e messaggi di validazione.

Limiti da verificare

  • Nessuna garanzia di aumento delle conversioniI miglioramenti nei completamenti richiedono osservazione e misurazione.
  • Non tutti gli errori di prodottoLa strategia di rete e permessi che attraversa più flussi va oltre un singolo modulo.

Cosa portare

  • Dati richiestiElenca campi, formati e motivi per cui servono.
  • Regole di validazioneFornisci i vincoli reali lato client e lato server.
  • Contesto di completamentoSpiega le conseguenze, l'uso dei dispositivi e se le persone tornano in seguito.

03 Decisioni importanti

Decisioni che contano

  1. La correzione è progettata

    Riepiloghi con focus e messaggi collegati ai campi aiutano le persone a recuperare in modo efficiente.

  2. L'avanzamento viene conservato

    La navigazione indietro e il completamento parziale richiedono un comportamento di stato esplicito.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Carica il SKILL.md di questa attività dal repository designer-skills nella posizione delle skill supportata dal tuo agente. Il file di ingresso non stabilisce alcun comando di installazione universale.

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

Fornisci i campi richiesti e le regole di validazione reali. Il risultato è una specifica del modulo; implementazione e test con gli utenti restano separati.

Inizia con un solo risultato

Adatta ambito, materiali di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa form-design per riprogettare questo brief di progetto a più passaggi. Rimuovi i campi non giustificati, raggruppa le domande correlate, definisci etichette persistenti e validazione al blur, e conserva l'input quando si torna indietro. Specifica un riepilogo errori accessibile con collegamenti ai campi e un passaggio finale di revisione.

Controlla il risultato

Verifica l'output effettivo rispetto a questi criteri osservabili.

  • Ogni campo ha un'etichetta persistente associata a livello di programmazione.
  • Gli errori spiegano come correggere e sono collegati al campo.
  • La navigazione indietro conserva i dati inseriti.

OpenDesign offre uno spazio di lavoro locale di design per gli agenti di programmazione. Questo elenco non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione fissata della fonte collegata sotto. Il comportamento e i requisiti upstream possono cambiare.

Proprietario della fonte
Owl-Listener
Repository
Owl-Listener/designer-skills
File della skill
interaction-design/skills/form-design/SKILL.md
Licenza
MIT
Snapshot esaminato
2026-10-07 · 9a6930cf84a8
Sintesi editoriale della fonte
Specifica ordine dei campi, etichette, tipi di input, validazione e correzione per un modulo completo.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non misurano l'uso della skill né ne indicano la qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Il testo segnaposto può sostituire un'etichetta?

La fonte dice di no: le etichette devono restare disponibili dopo che l'utente ha digitato.

Quando deve avvenire la validazione dei campi?

La fonte consiglia il blur anziché validare a ogni tasto premuto; adatta le eccezioni alle reali esigenze di interazione.

Un modulo a più passaggi richiede il salvataggio dell'avanzamento?

La fonte consiglia la conservazione dei dati e il salvataggio dell'avanzamento per i flussi più lunghi.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md