I momenti della verità nel web si trovano ancora oggi nei form. Un form ben concepito e ben costruito è tante cose, innanzitutto un’assicurazione contro l’abbandono. Poi, da lì in poi, il modo di vendere, costruire una relazione, fare brand, perfino sbalordire. Per questo conviene "farlo bene".

1. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
We are
Mentine
The re-design minded company
UX design
Contentdesign
InformationArchitecture
Visualdesign
Interactiondesign
Front-enddesign+dev
(+WordPress)

2. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
In coro!
DARIO
NICOLA
CARLO

3. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
In coro!
DARIO
NICOLA
CARLO
UN GATTO

4. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Form
Cose tipo:
Nome:
Cognome:
Telefono:
Email:
Indirizzo principale:
Indirizzo secondario:
Comune:
Cap: Nazione:
Commenti:

5. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’anno

6. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Perché non dobbiamo dimenticare

7. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Perché non dobbiamo dimenticare

8. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’annoCHIARO, JEFF?
CHIARO, NIC.

9. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’anno

10. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Agenda
Comeorganizzareidati
Comeallineareicampi
Inputdeidati
Azioni
Feedbackederrori
Brand

11. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Comeorganizzareidati

12. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Ai campi della vostra form applicate la regola TTSS:
Taglia Tieni Sposta Spiega
Come organizzare i dati
Fonte: https://twitter.com/cjforms/status/129160080150106112

13. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Form
Cose tipo:
Nome:
Cognome:
Telefono:
Email:
Indirizzo principale:
Indirizzo secondario:
Comune:
Cap: Nazione:
Commenti:

14. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
HAI DAVVERO
BISOGNO
DEL DATO?
Taglia
È UN
DATO
SENSIBILE?
Tieni
NE HO
BISOGNO
ORA?
Sposta
NO
Come organizzare i dati
NO NO
Spiega
SI SI SI

15. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Come organizzare i dati
Esempi:
Nome:
Cognome:
Telefono:
Email:
Indirizzo principale:
Indirizzo secondario:
Comune:
Cap: Nazione:
FORM 11 CAMPI
Commenti:
Fonte: https://youtu.be/ulJwW6zfR_o?t=1m20s

16. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Esempi:
Nome:
Telefono:
Email:
Commenti:
+160%
DI SUBMISSION
+120%
DI CONVERSION
FORM 4 CAMPI
Come organizzare i dati
Fonte: https://youtu.be/ulJwW6zfR_o?t=1m20s

17. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Indicare chiaramente ed esplicitamente i campi richiesti
migliora i tuoi tassi di conversione
*campo obbligatorio
Nome*:
Email*:
Telefono (opzionale):
Come organizzare i dati
2x
AUMENTO
DELLE
CONVERSIONI
Fonte: https://www.youtube.com/watch?v=ulJwW6zfR_o

18. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Comeallineareicampi

19. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Ogni soluzione ha pro e contro, ma
per schermi piccoli non ci sono dubbi
Nome*:
Azienda (opzionale):
ETICHETTA
CAMPO VUOTO
COME ALLINEARE I CAMPI
Top align
Fonte: https://www.sitepoint.com/definitive-guide-form-label-positioning/

20. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Suggerire, con le dimensioni del campo, il tipo di dato che
si vuole ottenere aiuta a migliorare i temi di compilazione
della form.
Nome*:
Indirizzo (opzionale):
Comune*: CAP:
DIM. 5 CARATTERI
COME ALLINEARE I CAMPI
Le dimensioni contano

21. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Per schermi larghi può essere consigliabile allineare a
sinistra le etichette, se questa soluzione migliora la visione
d’insieme della form.
Nome*:
Indirizzo:
(opzionale)
Comune*: CAP:
COME ALLINEARE I CAMPI
Eccezioni

22. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
COME ALLINEARE I CAMPI
Errori
TAGLIA
v
v

23. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
v
v
COME ALLINEARE I CAMPI
Errori
CAMPI
DISALLINEATI

24. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
v
v
COME ALLINEARE I CAMPI
Errori
REQUISITI
NON CHIARI
*

25. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
v
v
COME ALLINEARE I CAMPI
Errori
ETICHETTA
INTERNA

26. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
v
v
COME ALLINEARE I CAMPI
Errori
INFORMAZIONE
INCOMPLETA E
ILLEGGIBILE

27. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
v
v
COME ALLINEARE I CAMPI
Errori
FUNZIONALITÀ
‘DESKTOP’ NON
NASCOSTA
(E NON FUNZIONANTE)
SU MOBILE

28. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
COME ALLINEARE I CAMPI
Errori
v
v

29. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
COME ALLINEARE I CAMPI
Errori

30. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
COME ALLINEARE I CAMPI
Errori

31. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’anno
VA’ CHE ROBA,
BILL.
UN BELLO
SCHERMO BLU E
PASSA LA PAURA.

32. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Inputdeidati

33. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
INPUT DEI DATI
Le limitazioni del mobile
• Input da tastiera lento e favorevole all’errore
• Poco spazio su schermo, manca la visione d’insieme
• Tap poco accurati
• Mancanza dell’effetto “hover”

34. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Nome:
Secondo nome (opzionale):
Cognome:
Tieni gli utenti sullo stessa tipologia di inserimento dati il
più a lungo possibile
Nome e cognome:
v
v
v
v
INPUT DEI DATI
Le linee guida per il mobile

35. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Usa la giusta tastiera per l’input e mantieni la semantica
Cap*:
INPUT DEI DATI
Le linee guida per il mobile
v
v
v
v
Cap*:

36. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Usa la giusta tastiera per l’input e mantieni la semantica
INPUT DEI DATI
Le linee guida per il mobile
v
v
v
v
Email: Email:
N| nicola.bonora@ment|

37. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Dropdown menu
INPUT DEI DATI
Le linee guida per il mobile
v
v

38. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Dropdown: 35 motivi per non usarle FUCKDROPDOWNS.COM
INPUT DEI DATI
Le linee guida per il mobile

39. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Ottimale sarebbe
7 x 7 millimetri
7 X 7 MILLIMETRI
INPUT DEI DATI
Dimensioni delle aree cliccabili

40. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Azioni

41. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
AZIONI
Call to action
Decidi uno stile per la call to action primaria e per la call to
action secondaria
Bottone
Fonte: https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.8zmpfftxr

42. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Decidi uno stile per la call to action primaria e per la call to
action secondaria
Get Started
Select
Select
Select
Select
Select
Get Started
Log In
Register
Read More
Title
Details
Title
Details
Title
Details
Title
Details
Title
Details
v
v
v
v
AZIONI
Definisci quando usare una o più CTA

43. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Decidi uno stile per la call to action primaria e per la call to
action secondaria
AZIONI
Definisci quando usare una o più CTA
v
v
v
v
v
v
v
v
v
v
v
v

44. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’anno
…TUTTI ROSSI,
CAPISCI?!?

45. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Save Save Save
Save
SaveSaveSave
SaveSave
vvvvvv
vv
vv
AZIONI
Attenzione ai fantasmi!

46. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
AZIONI
A button is a button is a button (cit.)

47. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Feedbackederrori

48. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Offrire suggerimenti e inserire vincoli può evitare errori di
inserimento dati
FEEDBACK ED ERRORI
Prevenire è meglio che curare

49. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Offrire suggerimenti e inserire vincoli può evitare errori di
inserimento dati
FEEDBACK ED ERRORI
Prevenire è meglio che curare

50. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
‘Inline validation’ Vs. ‘Reward early, punish late’
Se l’utente sta inserendo il dato in un campo che era in uno
stato valido, controlla dopo che il dato è stato inserito.
Se l’utente sta inserendo il dato in un campo che era in uno
stato non valido, controlla mentre il dato viene inserito.
FEEDBACK ED ERRORI
Quando fornire feedback?

51. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Esempio di ‘Inline validation’
FEEDBACK ED ERRORI
Quando fornire feedback?

52. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Esempio di ‘Reward early, punish late’
FEEDBACK ED ERRORI
Quando fornire feedback?

53. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

54. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

55. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

56. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

57. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

58. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

59. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

60. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FEEDBACK ED ERRORI
Utilizzare messaggi chiari e amichevoli

61. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
CHE DICI?
E CHE VUOI CHE
TI DICA?

62. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Brand

63. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se la form è comunicazione, parliamo con il nostro tono di
voce.
BRAND
Esprimi il tuo carattere
Fonte: https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.8zmpfftxr

64. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se la form è comunicazione, parliamo con il nostro tono di
voce.
BRAND
Esprimi il tuo carattere
Fonte: http://littlebigdetails.com/post/112316294419/asos-after-providing-your-birthday-calculated

65. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se la form è comunicazione, parliamo con il nostro tono di
voce.
BRAND
Esprimi il tuo carattere
Fonte: http://littlebigdetails.com/post/110868794512/gmail-if-you-use-too-many-dots-there-is-a

66. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se la form è comunicazione, parliamo con il nostro tono di
voce.
BRAND
Esprimi il tuo carattere
Fonte: http://littlebigdetails.com/post/101243507017/readme-the-owl-covers-her-eyes-while-you-type

67. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se la form è comunicazione, parliamo con il nostro tono di
voce.
BRAND
Esprimi il tuo carattere
Fonte: http://littlebigdetails.com/post/104161036411/beanstalk-the-password-strength-indicator-shows

68. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Se la form è comunicazione, parliamo con il nostro tono di
voce.
BRAND
Esprimi il tuo carattere

69. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Eora?
“Seavessichiestoaimieiclienticosavolevano,
miavrebberorisposto…”

70. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’anno FORM PIÙ
LEGGIBILI.

71. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
E ORA?
Chatbot

72. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
E ORA?
Input vocale

73. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
E ORA?
Accelerated Mobile Pages (performance)

74. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
E ORA?
Acquista da Facebook

75. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
E ORA?
Input tramite fotocamera

76. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
FORM: CONVIENE FARLO BENE
Correva l’annoRESTATE IN FORM!
CHI È IL TIPO BIONDO VICINO
A @NICBONORA?

77. WM Expo – L’eccellenza italiana del Web Marketing - #wmexpoWM EXPO - L’ECCELLENZA ITALIANA DEL WEB MARKETING - #WMEXPO
Grazie.