Form Design: ecco le 10 best practices per aumentare le conversioni dei tuoi forms

[tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 90px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BJ-hXms7-F"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "S1gh7XiXWY"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "BJhXXom-t"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkoV7iXbK"]

I forms non sono morti. Il 74% dei marketer usa i forms per la generazione di lead, e il 49,7% dei marketer dice che form online è il loro strumento di generazione di lead a più alta conversione.
HUBSPOT

[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r1EQNj7bK"]

I forms online sono diventati parte integrante della maggior parte dei siti web e di internet in generale. Il loro scopo principale è quello di aiutare sia gli utenti che le aziende a raggiungere i loro obiettivi, stabilendo una relazione o iniziando una conversazione.
I forms di registrazione sono ciò che permette alle persone di diventare membri di comunità o servizi online. Pensate a Facebook - i suoi oltre 1 miliardo di utenti si sono tutti uniti attraverso un form di registrazione;
I forms di checkout permettono alle transazioni di avvenire attraverso il web. L'iscrizione a un servizio a pagamento e l'acquisto di prodotti sono un paio di esempi che avvengono attraverso un form di checkout.
I forms di presentazione dei dati sono il modo in cui le persone condividono la conoscenza, pubblicano informazioni e comunicano online. Forum, blog e comunità sociali fanno tutti affidamento sugli utenti che pubblicano questi forms per far crescere i loro siti web.
I visitatori decideranno sistematicamente se completare o meno il tuo form in base a una serie di fattori, tra cui il beneficio atteso e lo sforzo percepito per compilare quel form insieme alle informazioni che dovranno darti.

Esploriamo gli elementi che compongono un form

[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/08/42.1-Form-Design-ecco-le-10-best-practices-per-aumentare-le-conversioni-dei-tuoi-forms.jpg" image_varying_size_src= "https://irbox.it/wp-content/uploads/2021/08/42.1-Form-Design-ecco-le-10-best-practices-per-aumentare-le-conversioni-dei-tuoi-forms-284x300.jpg" alignment= "center" border_width= "0" border_color= "" id= "4952" size= "medium" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "1" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "HJFr5Am-K"][/tatsu_image][tatsu_animated_heading text= "Etichette" tag_to_use= "h3" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "B1glT0QWF"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Hknbk1E-t"]

Queste etichettano letteralmente i vostri campi di input e dicono agli utenti quali informazioni devono fornire in ciascuno di essi.

Le etichette allineate in alto sono generalmente una scommessa sicura e rendono più facile per le etichette di diverse dimensioni di adattarsi più facilmente all'interno dell'interfaccia utente;
Le etichette allineate a sinistra sono migliori quando il form è breve e pone domande molto simili, come gli intervalli di date;
Le etichette non sono testi di aiuto. Usa etichette succinte, brevi e descrittive in modo che gli utenti possano scansionare rapidamente il tuo form;

[/tatsu_text][tatsu_animated_heading text= "Campi di inserimento" tag_to_use= "h3" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "ryrSJyEbY"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BkA81yEZt"]

I campi di inserimento sono ciò che permette ai vostri utenti di riempire il form. A seconda delle informazioni che chiedi, ci sono vari tipi che puoi usare - campi di testo, campi password, drop-down, caselle di controllo, selezionatori di date e altri.

Evita i menu a discesa con meno di 4 opzioni.
Raggruppa visivamente i dettagli correlati, come il nome e il cognome (ancora meglio: combinali in un unico campo 'Nome e cognome');
La data di nascita può essere un singolo selezionatore di date, non tre menu a tendina separati;
Cerca di evitare i campi opzionali del form. Se non puoi, un semplice '(opzionale)' nell'etichetta è sufficiente per differenziarlo dagli altri campi.

[/tatsu_text][tatsu_animated_heading text= "Call To Action" tag_to_use= "h3" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HknuUk4WY"][/tatsu_animated_heading][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/08/42.2-Form-Design-ecco-le-10-best-practices-per-aumentare-le-conversioni-dei-tuoi-forms.jpg" image_varying_size_src= "https://irbox.it/wp-content/uploads/2021/08/42.2-Form-Design-ecco-le-10-best-practices-per-aumentare-le-conversioni-dei-tuoi-forms-300x200.jpg" alignment= "center" border_width= "0" border_color= "" id= "4953" size= "medium" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "1" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "S1TYUJVWF"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJb0LJ4bY"]

Quando vengono cliccati, questi pulsanti attivano una CTA come l'invio del form.

Evita istruzioni generiche come 'Clicca qui'. Invece, dichiara quali azioni fanno i pulsanti quando vengono cliccati, come 'Crea il mio account GRATUITO' o 'Inviami offerte settimanali';
Evita i pulsanti di CTA’s multiple perché potrebbero distrarre gli utenti dall'obiettivo a portata di mano - in questo caso, l'invio del form;
Il pulsante Reset è da evitare;
Assicurati che i pulsanti di CTA abbiano l'aspetto di pulsanti;
I pulsanti di CTA non allineati ai campi di input tendono ad essere poco estetici;
Indicare chiaramente che il form è in fase di elaborazione dopo che l'utente lo ha inviato (e disabilitare il pulsante di invio a quel punto). Questo fornisce un feedback all'utente e allo stesso tempo evita i doppi invii.

I PULSANTI SONO DISPONIBILI IN DIVERSE FORME, DIMENSIONI E COLORI. SCEGLIETE LO STILE CHE MEGLIO SI ADATTA AL VOSTRO SITO E RICORDATEVI SEMPRE DI ETICHETTARE I VOSTRI PULSANTI IN BASE ALLA AZIONE CHE COMPIONO. QUESTO RENDERÀ ESTREMAMENTE SEMPLICE CAPIRE COSA FA IL FORM.

Qui puoi leggere questo articolo sulla call to action che ho scritto recentemente.

[/tatsu_text][tatsu_interactive_box style= "stacked" alignment= "center" url= "https://irbox.it/web-design/8-regole-essenziali-per-creare-call-to-action" bg_image= "https://irbox.it/wp-content/uploads/2021/07/32.-Le_8_regole_essenziali_per_creare_un_efficace_Call_To_Action_nel_2021.jpg" new_tab= "1" overlay_blend_mode= "normal" overlay_color= "" bg_color= "" hover_bg_color= '{"id":"palette:0","color":"#000000"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "4" height= "350" vertical_alignment= '{"d":"center"}' icon= "icon-arrow_carrot-2down" svg_icon= "linea:basic_paperplane" icon_size= "80" icon_color= '{"id":"palette:0","color":"#000000"}' icon_hover_color= '{"id":"palette:1","color":"#ffffff"}' title= "" title_font= "h5" title_color= "" title_hover_color= '{"id":"palette:1","color":"#ffffff"}' content_color= "" content_hover_color= '{"id":"palette:1","color":"#ffffff"}' arrow_color= "#fff" box_shadow= "0 1px 6px 0 rgba(0,0,0,0.1)" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' svg_icon_color= '{"id":"palette:0","color":"#000000"}' key= "B1pl_1NWF"][/tatsu_interactive_box][tatsu_animated_heading text= "Aiuto" tag_to_use= "h3" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "S135d14bY"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "H1PsO1EZt"]

Fornisce assistenza su come compilare i campi di input quando le etichette dei campi da sole non sono sufficienti.

I campi di input che richiedono aiuto dovrebbero essere tenuti al minimo o evitati completamente - specialmente sui dispositivi mobili;
Un modo pulito di integrare l'aiuto è quello di mostrarlo sul lato destro del campo quando l'utente si concentra su di esso in modo che sia sempre nel contesto;
Se lo spazio è un problema, i tooltip sono una buona soluzione.
Cerca di evitare le icone di aiuto con una CTA di hover o click. Invece usa testi descrittivi come 'Cos'è questo?' o 'Perché è necessaria questa informazione?'

[/tatsu_text][tatsu_animated_heading text= "Feedback/convalida del form" tag_to_use= "h3" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "20" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SkFBYJ4WY"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJ6wK1N-F"]

Il tuo form online deve essere in grado di fornire un feedback.

Agli utenti dovrebbe essere sempre permesso di cliccare sul pulsante di invio. La validazione in linea in tempo reale è una buona pratica - specialmente quando diversi campi di input sono in relazione tra loro;
Quando l'invio del form fallisce, un messaggio di errore dovrebbe apparire con una doppia enfasi visiva (tipicamente di colore rosso con un'icona di avvertimento) sopra il form e indicare perché è fallito;
I campi errati (se presenti) dovrebbero essere evidenziati e associati visivamente all'errore
Il testo di convalida dovrebbe essere fornito accanto ai campi errati fornendo una soluzione di facile comprensione su come correggerli;
Per evitare confusione, riservare il colore rosso e le icone di avvertimento solo per i messaggi di errore

SII DESCRITTIVO NEI TUOI MESSAGGI DI ERRORE. 'NOME UTENTE GIÀ IN USO' È UN MESSAGGIO MIGLIORE DI 'NOME UTENTE NON VALIDO' - FAI CAPIRE AGLI UTENTI COSA È ANDATO STORTO.

Ora che abbiamo visto gli elementi essenziali del form, vediamo le 10 best practices per ottimizzare il form nel suo complesso

[/tatsu_text][tatsu_code id= "" class= "" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SJ_gWx4WF"][/tatsu_code][tatsu_animated_heading text= "1. Chiedi solo ciò che è indispensabile" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "S1nYcyV-Y"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Hkz251V-t"]

Ogni singolo campo che aggiungi a un form influenzerà il suo tasso di conversione, quindi assicurati di chiedere solo ciò di cui hai veramente bisogno. Hai davvero bisogno di sapere il loro numero di telefono se li contatterai solo se hanno bisogno di supporto? Non puoi chiederlo quando richiedono assistenza? Hai davvero bisogno di sapere il loro 'titolo' o se sono uomini o donne? A seconda del tuo business potresti averne bisogno. Chiedetevi sempre perché e come vengono usate le informazioni che chiedete ai vostri utenti.

Siete mai entrati in un negozio di abbigliamento e vi è stato chiesto di fornire il vostro numero di carta di credito prima di provare qualcosa? Probabilmente no. Se il vostro form è per permettere ai vostri utenti di accedere ad una prova gratuita di 30 giorni, non chiedete i dati della loro carta di credito. Facendo questo, i vostri utenti inizieranno immediatamente a pensare:

- 'Oh, pensavo fosse una prova gratuita, perché hanno bisogno della mia carta di credito?';

- 'Mi faranno pagare dopo 30 giorni? E se non mi piace e me ne dimentico?'

Questo è esattamente ciò che dovete evitare - far sì che i vostri utenti si interroghino sul perché state chiedendo queste informazioni così presto nella vostra relazione. Assicurati di chiedere solo le informazioni di cui hai bisogno in quel momento e concentrati sul rendere la prova gratuita una esperienza fantastica.

[/tatsu_text][tatsu_animated_heading text= "2. Evita il form a più colonne" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Sk9ji1E-t"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "SkU0sJV-Y"]

Vai su un form e ci sono campi che si muovono sia orizzontalmente che verticalmente.
Quello che dovresti fare è rendere il form il più semplice possibile. Non vuoi che i visitatori debbano pensare a come compilare un form, quindi il modo per risolvere questa situazione è assicurarsi che i tuoi forms siano tutti a colonna singola e preferibilmente verticale. Ma anche orizzontale, se ci sono pochi campi del form e non hai molti spazi verticali, funzionerà.

[/tatsu_text][tatsu_animated_heading text= "3. Il posizionamento del form" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HkcehJE-K"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJHM2yEWY"]

Se molti dei visitatori del tuo sito sono visitatori in fase iniziale in termini di ricerca, molto probabilmente non saranno pronti a compilare un form. Potrebbero volere prima delle informazioni e abbiamo visto dei successi con forms online ad alta conversione nel posizionare il form più in basso nella pagina piuttosto che essere in cima alla pagina.

[/tatsu_text][tatsu_animated_heading text= "4. Rendi facile per i tuoi utenti la scansione del form" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "H1H42yEWK"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJMInkNbF"]

Evita di usare titoli generici come 'Compila questo form per continuare' e opta invece per uno più descrittivo come 'Registrati per la tua prova gratuità o 'Unisciti alla nostra comunità'.
Tutti i diversi elementi del form dovrebbero essere visivamente distinti l'uno dall'altro. Gli utenti devono essere in grado di scansionare il form e capire immediatamente qual è il pulsante di invio, quali sono le etichette e quali sono i campi di input che devono inserire e stimare il tempo di completamento. Includere spazi bianchi migliorerà la leggibilità.

[/tatsu_text][tatsu_animated_heading text= "5. Ordina il form in modo logico" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "BJV53yVZF"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ByeJTk4WF"]

I dettagli dovrebbero essere chiesti in modo logico dal punto di vista dell'utente, non del database. In genere, è insolito chiedere l'indirizzo di qualcuno prima del suo nome. Per i forms lunghi, struttura più campi raggruppandoli visivamente in sottosezioni come: Dettagli dell'account, informazioni di contatto, dettagli di pagamento, ecc;

[/tatsu_text][tatsu_animated_heading text= "6. Usa i default intelligenti" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "S1AgakV-t"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJuf6yEZt"]

I default intelligenti sono molto buoni in quanto riempiono i campi per il 90% dei casi, risultando in compilazioni più veloci. Un paio di esempi: Un menu a tendina della lingua può essere predefinito alla lingua del browser e il paese può essere predefinito al paese dell'IP dell'utente usando la geolocalizzazione.

[/tatsu_text][tatsu_animated_heading text= "7. Spezza forms complessi in un processo a più fasi" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SJBBT1N-F"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rJyPaJ4-Y"]

Per i forms più lunghi che non possono essere accorciati, l'opzione migliore è quella di dividere il processo in vari passi di dimensioni ridotte. Il processo del form in più fasi può aumentare le percentuali di successo e in generale rendere il tuo form meno intimidatorio da una prima impressione. Assicurati di dividere le informazioni richieste in modo logico e che agli utenti venga mostrato il loro progresso all'interno del processo. Questo può essere ottenuto indicando il passo in cui si trovano (esempio: Passo 2 di 3) e fornendo un indizio visivo come una barra di progresso o una percentuale - che è il modo in cui il form di sondaggio tipicamente gestiscono la cosa.

I moduli multi-step convertono l'86% in più. Solo il 40% dei marketer li usa, ma quelli che lo fanno riportano il 17% di soddisfazione in più con i loro sforzi di lead generation e i loro tassi di conversione auto riferiti sono più alti dell'86%.
HUBSPOT

Ricorda che i visitatori prenderanno la decisione in base allo sforzo percepito. Quindi, se vengono su una pagina e vedono un form lungo, stanno vedendo tutto in una volta, lo sforzo percepito sarà enorme. Se vanno su un sito e vedono solo uno o due campi del form con un pulsante successivo, potrebbero non avere una chiara indicazione o idea di quanti campi del form ci saranno, ma penseranno comunque che lo sforzo percepito sarà inferiore in base a ciò che vedono visivamente dal form.

[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/08/42.3-Form-Design-ecco-le-10-best-practices-per-aumentare-le-conversioni-dei-tuoi-forms.jpg" image_varying_size_src= "https://irbox.it/wp-content/uploads/2021/08/42.3-Form-Design-ecco-le-10-best-practices-per-aumentare-le-conversioni-dei-tuoi-forms-300x274.jpg" alignment= "center" border_width= "0" border_color= "" id= "4960" size= "medium" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":"0px 0 0 0"}' margin= '{"d":"0px 0 0 0"}' key= "Sk3oRyE-F"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r11SAkNbt"]

Esempi di sign up forms

[/tatsu_text][tatsu_animated_heading text= "8. Test di usabilità" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJKXyxVbt"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkaEkx4Wt"]

Non fatevi spaventare dal termine - i test di usabilità sono indispensabili in una parte così cruciale del vostro sito web o applicazione. Molto spesso, eseguire solo due test o semplicemente chiedere a un collega o un amico di passare attraverso un prototipo del form può darvi ampie intuizioni su quanto sia usabile il form e su ciò che non è immediatamente ovvio osservando come lo compilano.

[/tatsu_text][tatsu_animated_heading text= "9. Effettua A/B split test" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "B1uRJx4bY"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "BJTgleEWF"]

Anche se i forms su diversi siti hanno molto in comune, non significa che copiare il form di iscrizione di Amazon funzionerà anche per il tuo sito web. Gli A/B split test ti permettono di fare piccole alterazioni al tuo form che migliorano gradualmente il suo tasso di conversione. I test includono l'alterazione del pulsante di CTA nel testo, nella dimensione e nel colore, rendendo i fattori di fiducia più prominenti, regolando le posizioni dei campi, rimuovendo i campi opzionali, trovando campi non correlati non necessari e molti altri.

[/tatsu_text][tatsu_animated_heading text= "10. Conformati agli standard" tag_to_use= "h5" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HknbllNbt"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ryrmgxEZF"]

Assicuratevi che gli utenti possano saltare attraverso i campi usando il tasto Tab e che la tabulazione sia in un ordine logico. È anche importante conformarsi agli standard del web, per esempio mettendo i forms all'interno dei tag HTML

Esploriamo gli elementi che compongono un form

Ora che abbiamo visto gli elementi essenziali del form, vediamo le 10 best practices per ottimizzare il form nel suo complesso

Leave a Reply Cancel reply