I Problemi dei Placeholder nei Form

giorgiotave

I Problemi dei Placeholder nei Form

Nel 2014 usciva un articolo su Nielsen da titolo Placeholders in Form Fields Are Harmful.

Ancora oggi molto valido, vorrei condividere qualche punto interessante perché non c'è niente da fare: andiamo avanti, progrediamo, ma continuiamo a cadere sulle basi. E sono quelle che fanno la differenza nel lungo periodo: il continuare a fare i palleggi al muro con piede destro e piede sinistro anche se hai vinto 5 Palloni d'Oro.

Cosa è il PlaceHolder?

Qual è il classico, gravissimo, errore?

Questo:

Ovvero l'uso del PlaceHolder come se fosse una Label.

Ad un occhio inesperto sembra la classica genialata del "perché non ci ha mai pensato nessuno?". E invece si rivela il classico errore di chi non conosce una materia e non riesce a vedere l'insieme.

Quali sono i motivi per i quali questa cosa non va fatta?

Facciamo una lista:

anche se non ci crediamo, i dati di Nielsen ci mostrano che le nuove genazioni hanno sempre molte tab aperte e i form non vengono compilati seduta stante. Quindi la persona, quando inizia a scrivere, cambia tag, poi ritorna. Ma il Placeholder è scomparso e questa cosa non lo aiuta perché molte volte non ricorda il nome del campo.
senza le label, prima di inviare il form, la persona fa fatica a fare il check di tutti i campi
se c'è un errore e il form lo segnala, senza label potrebbe non sapere che errore è
le persone che usano solo la tastiera (che in realtà è un sistema più veloce) sono sfrustrate da questo comportamento del placeholder
a colpo d'occhio, ci vuole più tempo senza label a capire quali campi rimangono vuoti, perché comunque il placeholder è un testo
a volte sembra che il campo sia già precompilato se c'è il placeholder
alcune volte il placeholder non scompare al click e va tolto a mano

Quindi, si devono usare insieme, Placeholder e Label. Io consiglio però di usare il Placeholder solo se necessario, farlo creare a chi ha idea veramente di cosa sta facendo, perché comunque i problemi sopra, molti, permangono.

Inoltre il Placeholder non è molto accessibile. Il poco contrasto non aiuta, la non lettura di tutti gli screen readers è un problema, le persone con diversi impedimenti cognitivi o motori sono più frustrate.

Nielsen segnala che Google con il suo Material Design ha trovato una soluzione elegante: le Floating Labels

Il vantaggio è sia lo spazio che si recupera sul mobile, ma Nielsen sostiene che rimangono i problemi 5 e 6 della lista sopra.

Volete sapere qual è la soluzione migliore per Nielsen?

Questa:

Direi che per oggi è tutto. Mi piacerebbe sapere cosa ne pensate e che soluzioni avete trovato voi in questi anni

sermatica

Ciao
aggiungiamo anche l'auto completamento di Google Chrome, se non ci sono le Etichette tocca cancellare tutto per poter controllare che Chrome abbia messo i campi giusti nel posto giusto.

giorgiotave

Ah, già. A questa cosa non ci avevo pensato

Se Chrome sbaglia o sono settati male i campi...

giorgiotave

Condivido una risorsa segnalata da Andrea Pernici @juanin Form design: from zero to hero all in one blog post