10 regole per creare moduli Web intuitivi

Sep 11, 2025
Come si fa
Illustration of web forms on an iMac and tablet

Nonostante l'evoluzione dell'interazione umana-computer, le forme rimangono ancora uno dei tipi più importanti di interazione per gli utenti. Le persone che usano la tua applicazione o il tuo sito web hanno un obiettivo particolare, e spesso l'unica cosa in piedi tra l'utente e il loro obiettivo è una forma. Ogni giorno, li usiamo per le nostre attività essenziali - per completare gli acquisti, per iscriverti ai social network, per fornire feedback su un prodotto che abbiamo comprato, e altro - sono una parte enorme di esperienza utente .

Di conseguenza, è molto importante per noi essere in grado di completare rapidamente i moduli online e senza confusione. Lo sforzo minore dobbiamo spendere, più felice. Come progettisti e sviluppatori, dovremmo sforzarci di produrre esperienze di forma più veloci, più facili e produttive per i nostri utenti.

Nel secondo dei miei due articoli che esplorano come costruire forme migliori ( Trova il primo qui qui ), Ecco i miei 10 consigli per progettare forme che sono user-friendly. Non proprio quello che stai cercando? Potresti aver bisogno delle nostre guide in cima Builder del sito web o deposito cloud. servizio.

01. Chiedi solo cosa è richiesto

Tagliare la quantità di informazioni richieste rende il modulo più facile da compilare. Dovresti sempre mettere in discussione perché e come viene utilizzata le informazioni richieste. Prova a minimizzare il numero di campi il più possibile, perché ogni campo che aggiungi a un modulo influenzerà il suo tasso di conversione. Limitare il numero di domande e campi rendono il modulo meno caricato, specialmente quando richiedi molte informazioni dai tuoi utenti.

02. Ordina logicamente i campi

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically

Pensa alla tua forma come una conversazione; Volete raggruppare e ordinare i campi in un ordine che ha senso per l'utente

È utile pensare a una forma come simile a una conversazione. Come qualsiasi conversazione normale, dovrebbe essere rappresentata da una comunicazione logica tra due parti: una persona e la tua app. I dettagli dovrebbero essere pregati in un ordine che è logico dal punto di vista dell'utente, non quello dell'applicazione o del database. Ad esempio, è insolito chiedere l'indirizzo di qualcuno prima del loro nome.

È anche molto importante raggruppare domande correlate in blocchi, quindi il flusso da una serie di domande al prossimo assomiglierà meglio a una conversazione. Gruppo di campi correlati aiuta anche gli utenti a sensibilizzare le informazioni che devono compilare.

Nella foto sopra sono esempi di due moduli di registrazione. Le forme lunghe possono sentirsi travolgenti se non si raggruppano campi correlati - confrontare il modulo a sinistra fino alla versione migliorata a destra.

Raggruppamento deve essere effettuato visivamente così come nel codice. Ad esempio, potresti usare il & lt; fieldset & gt; e & lt; Legend & GT; Elementi per associare i controlli della forma correlati: 

 & lt; fieldset & gt;
  & lt; Legend & GT; Informazioni personali: & lt; / Legend & GT;
  & lt; div & gt;
    & lt; etichetta per = "first_name" & gt; nome & lt; / etichetta e gt;
    & lt; Input Type = "Testo" Nome = "First_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; etichetta per = "last_name" & gt; cognome & lt; / etichetta e gt;
    & lt; Input Type = "Testo" Nome = "Last_name" ID = "Last_name" & GT;
  & lt; / div & gt;
    & lt; etichetta per = "Genere" & GT; Professione & Lt; / Etichetta e GT;
    & lt; Input Type = "Testo" Nome = "Professione" ID = "Professione" e GT;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Tieni le etichette corte

Etichette di campo Dicono agli utenti quali significano i campi di input corrispondenti. Cancella il testo dell'etichetta è uno dei modi primari per rendere UIS più accessibile. Le etichette dicono all'utente lo scopo del campo, ma non sono aiutati i testi. Pertanto, assicurando che si scansiona facilmente è una priorità - dovresti progettare etichette succinte, brevi e descrittive (tenerle a una parola o due).

04. Non duplicare campi

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password

Non rendere i tuoi utenti digitano le informazioni due volte - li frustrano solo perdendo il loro tempo

Questo problema è particolarmente comune per i moduli di registrazione: quasi tutti hanno incontrato un modulo che richiede di digitare un indirizzo email o una password due volte. Storicamente, questo è stato progettato per prevenire errori di errore. Tuttavia, la maggior parte degli utenti ha semplicemente copiato, incollato il campo necessario ogni volta che l'app gli ha permesso. E se i dati del campo originale contenevano un errore, è stato duplicato.

05. Evidenziare i campi opzionali

Idealmente, è meglio non avere campi facoltativi. In linea con il numero 1 della regola, se non è richiesta un pezzo di informazione, non è possibile puntare nel tempo di sprecare l'ora di un utente. Ma se li usi, dovresti chiaramente distinguere quali campi di input non possono essere lasciati vuoti. Di solito un piccolo segno come un asterisco (*) o un'etichetta "opzionale" è sufficiente.

06. Stai attento con i valori predefiniti

Evitare di includere un valore predefinito statico a meno che non si rivolga una parte ampia dei tuoi utenti (ad esempio il 90%) selezionerà quel valore - in particolare se è un campo obbligatorio. Perché? Con questo approccio è probabile che tu introdisca errori perché le persone si esegue la scansione rapida online. Non dare per scontato che ci vorranno il tempo per analizzare attraverso tutte le scelte. Possono allegramente saltare da qualcosa che ha già un valore.

L'unica eccezione per questo punto è i predefiniti intelligenti, come quelli che prestieperali il paese dell'utente in base ai loro dati di geolocalizzazione, che possono effettuare il completamento del modulo più veloce e più preciso. Ma dovresti ancora usarli con cautela, perché gli utenti tendono a lasciare i campi preselezionati come sono.

07. Riduci al minimo la necessità di digitare

La digitazione è un processo lento e soggetto ad errori, ed è particolarmente doloroso su un cellulare, dove gli utenti affrontano i vincoli della proprietà limitata. E con sempre più persone che utilizzano piccoli schermi, tutto ciò che può essere fatto per evitare che la digitazione non necessaria migliorerà l'esperienza dell'utente. Se del caso, è possibile utilizzare funzioni come il completamento automatico e prefill per i dati, quindi gli utenti devono solo digitare la quantità minima di informazioni nuda.

Compilare la tua informazione dell'indirizzo è spesso la parte più ingombrante di qualsiasi modulo di registrazione online, grazie a più campi, nomi lunghi e così via. Salva i tuoi utenti da dover digitare nell'intero indirizzo implementando i prefills per questi campi. Biblioteche come Google Maps offrire un semplice API JavaScript Per realizzare questo. Puoi Trova una soluzione funzionante qui .

08. Utilizzare la convalida in tempo reale

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it

Avviso immediatamente gli utenti se effettuano un errore - non farli aspettare fino a quando non hanno completato l'intera forma

In un mondo ideale, gli utenti compilano moduli con informazioni necessarie e finiscono con successo il loro lavoro, ma nel mondo reale, le persone spesso commettono errori. È frustrante passare attraverso il processo di compilazione di un'intera forma solo per scoprire nel punto di presentazione che hai commesso un errore.

Il momento giusto per informare qualcuno del successo o del fallimento dei dati che hanno fornito è subito dopo aver inviato le informazioni. È qui che entra in gioco la convalida in tempo reale. Avvia gli utenti di errori subito e rende possibile per loro di correggerli più velocemente, senza dover attendere fino a quando non premono il pulsante "Invia".

E ricorda, la convalida non dovrebbe solo dire agli utenti ciò che hanno fatto male; Dovrebbe anche dire loro cosa stanno facendo bene. Questo dà agli utenti una maggiore sicurezza per muoversi attraverso il modulo.

Prezzemolo è un'eccellente libreria di convalida del modulo JavaScript. È open source e focalizzato UX, in modo da poter ignorare quasi tutti i comportamenti predefiniti per adattarsi alle esigenze esatte. Nel seguente codice è un semplice esempio di convalida del prezzemolo per un campo "Messaggio". Il campo dovrebbe essere di almeno 20 caratteri, ma non più di 100. 

 & lt; etichetta per = "Messaggio" e GT; Messaggio (20 caratteri min, 100 max): & lt; / etichetta e GT;
& lt; textarea id = "Message" Class = "Modum-Control" Nome = "Messaggio" DATA-PARRYLEY-TRIGGER = "Keyup" DATA-PARRYLEY-MINLUNGHINGHTH = "20" Data-prezzeley-maxLength = "100" Data-prezzemolo -Minlength-messaggio = "Dai! È necessario inserire almeno un commento di 20 caratteri." dati-prezzemolo-validazione-soglia = "10" e GT; & lt; / textarea & gt;

Puoi Trova il campione completo del codice qui .

09. Evitare i formati di input fissi

Il motivo più comune per forzare un formato fisso è la limitazione dello script di convalida (il back-end non può determinare il formato che ha bisogno di esigenze), che nella maggior parte dei casi è un problema di implementazione. Piuttosto che costringere il formato di qualcosa come un numero di telefono durante l'ingresso dell'utente, è necessario renderlo possibile trasformare qualunque sia l'utente inserisce nel formato che si desidera visualizzare o archiviare.

10. Non utilizzare i pulsanti di ripristino

Illustration shows Reset button next to a Save button below a form, with a red cross through it

Piccolo bene è mai venuto da un pulsante di reset proprio accanto all'opzione di invio

Un pulsante di reset quasi non aiuta mai gli utenti. È difficile immaginare che qualcuno vorrebbe un pulsante che annulla tutto il loro lavoro, per non parlare di volere che quel pulsante sia seduto accanto al pulsante che lo salva. Il Web sarebbe un posto più felice se virtualmente tutti i pulsanti di ripristino sono stati rimossi.

Vuoi sapere come i tuoi utenti rispondono al tuo sito web? Un decente web hosting Il servizio ti darà l'analisi di cui hai bisogno.

Questo articolo è originariamente apparso in netto , la rivista per web designer e sviluppatori professionisti. Iscriviti alla rete qui .

Articoli Correlati:

  • 29 Strumenti di progettazione Web per accelerare il flusso di lavoro
  • I 41 font web gratuiti gratuiti
  • 13 migliori pezzi di software di test dell'utente

Come si fa - Articoli più popolari

10 modi per creare animazioni di carattere migliori

Come si fa Sep 11, 2025

Con la dimensione del settore 3D che cresce anno in anno, è più importante che mai assicurarsi che il tuo lavoro si distingue dalla folla. Qualunque sia il tuo livello di abilità come arti..

Inizia con Express.js

Come si fa Sep 11, 2025

Creazione di applicazioni rivolte a browser con nodo.js diventa noioso. Espresso.js. è un Quadro JavaScri..

Vernice Acqua increspata in oli

Come si fa Sep 11, 2025

Quando stai dipingendo l'acqua increspata con qualcosa in esso, stai prendendo il compito di dipingere una riflessione interrotta. Questo può essere complicato da immaginare, quindi mi piace..

Come utilizzare Adobe Capture CC

Come si fa Sep 11, 2025

Adobe Capture CC è un'app fantastica che consente di trovare caratteri e colori semplicemente scattando una foto. Potresti chiederti cosa siano stati usati i caratteri nella tua rivista pref..

Simula una trasformazione di Ghost Rider

Come si fa Sep 11, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Crea un dashboard reattivo con Figma

Come si fa Sep 11, 2025

Figma è uno strumento grafico per i progettisti dell'interfaccia utente. Ha un'interfaccia semplice e ti consente di collaborare al lavoro con i tuoi compagni di squadra. Se vuoi lavorare of..

Il segreto per dipingere come monet

Come si fa Sep 11, 2025

Con questa masterclass tenteremo di entrare nel capo del monet un po ', quindi possiamo pensare e dipingere nel suo stile. Ma, no..

Come creare un rigabbon flessibile

Come si fa Sep 11, 2025

I piattaforme del nastro sono abbastanza comuni in 3D Art. I piattaforme di produzione in questi giorni. Hanno un ..

Categorie