Le etichette galleggianti sono davvero così problematiche dopo tutto?

Questa è una risposta al pezzo di Adam Silver del 25 maggio 2017 intitolato Floating Labels Are Problematic.

Come il ragazzo che ha realizzato il design originale su cui si basava la maggior parte della mania di Float Label, mi sento in qualche modo obbligato a condividere la mia prospettiva sulla questione.

Il design originale dell'etichetta galleggiante che ho pubblicato su Dribbble nel 2013

Devo prefigurarlo dicendo che non ho mai incontrato Adam, ma ho letto alcuni dei suoi altri articoli e apprezzo molto e ammiro la sua premurosità per i piccoli dettagli nei suoi articoli

Adam fa molti punti importanti nel suo articolo e in certi contesti, sono d'accordo.

Ritengo tuttavia che sia importante evidenziare alcune sottili affermazioni assolute nell'articolo e sottolineare la loro relatività in base al design in generale, piuttosto che al modello individuale di un'etichetta fluttuante.

Voglio anche coprire tutto ciò dicendo che non credo che le etichette float debbano essere utilizzate per ogni modulo mai realizzato. Se ritieni che non aggiungano valore al tuo modulo, non utilizzarli. Ok?

Se hai eseguito il test in un modo rispetto all'altro, utilizza il metodo con il rendimento più elevato. Chi non desidera tassi di conversione più elevati?

Ma ricorda, un modulo da solo non aumenterà i tassi di conversione attraverso il tetto. Devi creare abbastanza valore e risolvere un problema abbastanza grande con i tuoi contenuti in modo che un utente sia effettivamente motivato a utilizzare il modulo in primo luogo.

Io stesso non ho fatto alcun test ufficiale di divisione delle etichette float e non posso raccomandare con sicurezza il modello su un'etichetta standard, basato solo sulla ricerca pura.

Ma posso dire che recentemente ho usato le etichette float nel mio modulo del corso Intro to Icon Design e ho visto un tasso di conversione di oltre il 30%. Secondo la mia rapida ricerca, è 10 volte superiore al modulo di opt-in medio che genera solo il 3% di conversioni.

Dall'introduzione gratuita al video corso Icone

I tassi di conversione sarebbero stati più alti se non avessi usato le etichette float? Il mio istinto dice "no", ma non ho dati per eseguirne il backup.

Con tutto ciò fuori mano, approfondiamo il mio commento. I seguenti titoli numerati e citazioni di seguito sono presi direttamente dall'articolo.

1. Non c'è spazio per un suggerimento

L'articolo afferma:

Le etichette mobili iniziano all'interno della casella di testo senza lasciare spazio per un suggerimento aggiuntivo.
Immagine tratta dall'articolo di riferimento

Ok, quindi se hai intenzione di mettere un suggerimento o una nota sopra il campo di input e direttamente sotto l'etichetta, allora sì, un'etichetta float ostacolerà la tua capacità di farlo.

Tuttavia, se desideri davvero una nota o un suggerimento, puoi spostarla sotto il campo di input e semplicemente spingere un po 'l'altro campo verso il basso.

Discutere sul posizionamento dei suggerimenti è inutile, a meno che tu non abbia una visione estremamente chiara dell'esatto problema cercando di essere risolto con un modulo in primo luogo.

In alcuni casi i suggerimenti o le etichette sono incredibilmente utili e in altri casi sono un cerotto su una forma mal progettata. Semplicemente non può essere uno standard assoluto fuori contesto.

2. Sono difficili da leggere

L'articolo afferma:

Le etichette fluttuanti in genere hanno un testo piccolo, in modo che, man mano che galleggia, occupa una piccola quantità di spazio. Ma il testo piccolo è difficile da leggere.
Immagine tratta dall'articolo di riferimento

Dipende molto dalle dimensioni del testo. E "difficile da leggere" è una variabile, non una costante, basata sulla vista dell'utente.

Inoltre, la dimensione del testo è relativa a un disegno in generale, non alle etichette mobili. È possibile che le etichette mobili abbiano le stesse dimensioni di un'etichetta standard.

Se il testo viene visualizzato in una dimensione standard di 16-18 px, è generalmente accettabile come leggibile. Forse più che dire una dimensione di 12-14 px.

Quindi concordiamo per un momento che 18px è in effetti più facile da leggere rispetto a 12px ...

È troppo insondabile supporre che una lettura semplice di 16-18 px, ridimensionata contestualmente a 12-14 px dopo che un utente ha iniziato a digitare, sarebbe improvvisamente troppo piccola per essere letta?

Non nego che 12px possa essere più difficile da leggere rispetto a 18px, ma vedo un'etichetta float come un artefatto del passato, piuttosto che un indizio per il futuro.

È un'indicazione rimanente piuttosto che un'istruzione su cosa fare.

3. Hanno bisogno di spazio per spostarsi

L'articolo afferma:

Le etichette mobili hanno bisogno di spazio per spostarsi. Se il testo dell'etichetta è amichevole (vedi punto precedente), non ci sarebbe comunque spazio risparmiato - solo più spazio bianco.
Immagine tratta dall'articolo di riferimento

Questo è assolutamente vero.

Le etichette float hanno bisogno di spazio per spostarsi e questo è uno dei problemi più difficili da inchiodare per il motivo.

Chris Coyier ha anche scritto le sue opinioni su questo particolare problema e ha concluso che le etichette mobili non risparmiano affatto alcuna altezza verticale.

MA…

Se sei d'accordo sul fatto che l'etichetta mobile sia un artefatto, piuttosto che un'istruzione, potresti anche concordare sul fatto che va bene ridurre leggermente le dimensioni del testo rispetto a un'etichetta standard.

E con una dimensione del testo più piccola, diciamo 12px invece di 16px, risparmierai effettivamente 4 o più pixel di spazio. Forse anche 8px poiché non avresti bisogno di aggiungere un margine extra sotto l'etichetta in senso tradizionale.

Stiamo davvero entrando nelle erbacce qui, per quanto riguarda i pixel, ma un grande progettista di interfacce sarà dolorosamente consapevole di una discrepanza di 4px e degli effetti che può avere sull'intero design se usato correttamente o impropriamente.

Quindi, se salvi 8 px su 5 campi di input in un modulo, hai salvato un totale di 40 px. È all'incirca la stessa altezza di un pulsante sullo schermo del cellulare.

Sarebbe utile per il tuo progetto? Non lo so. Come designer, dovrai decidere che per ogni caso d'uso che incontri.

Lascia che ti dia un esempio reale di una gigantesca forma complessa su cui ho lavorato qualche anno fa.

Il progetto prevedeva una quantità folle di dati per la logistica di trasporto e spedizione commerciale. Stavamo davvero cercando di rendere il complesso, semplice.

I moduli sottostanti sono schermate dei progetti di "work in progress" che ho estratto dall'archivio.

La forma sinistra utilizza una combinazione di etichette allineate in alto e etichette allineate a sinistra. Stavamo sperimentando, cercando di trovare la soluzione perfetta.

Quindi, ho progettato il modulo a destra in alternativa alla quantità di pazzia che si manifesta nella forma. Siamo tutti d'accordo sul fatto che sia sembrato più pulito, meno travolgente e complessivamente migliore.

Immagine tratta dal progetto Shiplify a cui ho lavorato nel 2014

Puoi vedere che anche se solo la metà dei campi erano allineati in alto, si risparmiavano oltre 420 pixel di altezza verticale.

Abbiamo anche avuto alcuni test estemporanei in cui abbiamo chiesto alle persone: "quale di queste forme sembra meno travolgente?" E hanno concordato che il modulo sulla destra sembrava migliore.

So che questo non è test al 100% valido e statisticamente conclusivo, ma è comunque un inizio.

Mi piacerebbe che qualcosa del genere venisse adeguatamente testato un giorno, ma fino ad allora è un'intuizione, non un dato di fatto.

Ci sono così tante variabili come il tipo di contenuto, la conoscenza degli utenti preesistenti e altro che rendono ogni singolo test del modulo semplicemente non applicabile al 100% per tutti i moduli futuri.

4. L'animazione è problematica

L'articolo afferma:

L'animazione, anche se eseguita bene, potrebbe essere fonte di distrazione e disorientamento, in particolare per gli utenti con scarsa sicurezza o ipovedenti. E, durante lo zoom in avanti, l'etichetta potrebbe scomparire dallo schermo.

Aspetta un secondo. Se un'animazione è fatta bene, allora è per definizione "bene", "buono", "soddisfacente", "da desiderare", ecc.

Pertanto la frase "distrarre e disorientare" non può coesistere con "fatto bene".

Crea l'animazione dai case study gratuiti su learnaiux.com

So di essere incredibilmente di parte, ma quando compilo un modulo che inchioda davvero l'animazione dell'etichetta float, quando l'animazione si risolve e ottengo una piccola e minuscola scarica di dopamina, passerò al campo successivo. Un piccolo senso di completamento che prima non c'era.

Mi ricorda un gioco in cui qualcosa accade visivamente sulla scia del percorso del tuo personaggio. Come un'impronta.

Mi sento come se non potessi prefigurarlo abbastanza, però. Se le etichette float non hanno senso per il tuo progetto e aggiungono troppa complessità non necessaria, ti preghiamo di non usarlo.

Userò ancora felicemente il tuo modulo se l'altra estremità del tuo modulo risolve il mio problema.

5. Hanno uno scarso contrasto

L'articolo afferma:

Come il testo segnaposto, le etichette mobili hanno un basso contrasto per differenziarlo, ma il testo a basso contrasto è difficile da leggere.
A seconda del design, quando l'etichetta galleggia fuori dal campo, il suo colore dovrà cambiare. Altrimenti il ​​testo andrà perso contro il colore di sfondo.
Immagine tratta dall'articolo di riferimento

Il basso contrasto non ha nulla a che fare con un'etichetta float e ha tutto a che fare con dimensioni e colore.

Il WCAG 2.0 minimo (Linee guida per l'accessibilità del contenuto Web) afferma che è necessario un rapporto di contrasto del colore di 4,5: 1 per superare le linee guida AA per dimensioni del testo normali inferiori a 18 ~ px.

Il codice esadecimale di colore grigio più chiaro che produce un rapporto di contrasto AA accettabile è # 767676 o # 757777 su sfondo #ffffff (bianco). Questo è se stai usando un peso del carattere normale inferiore a 18px. Se stai usando un carattere grassetto di dimensioni 14px puoi rimandare all'ampio rapporto di contrasto fornito da WCAG, che è 3,5: 1 e finisce per essere # 898989 su #ffffff. Nota a margine: questo è il mio correttore di contrasti preferito.

Sidenote: ho progettato progetti per banche che richiedono un rating AA minimo per il loro prodotto digitale. Non ho mai incontrato personalmente un cliente che richiedesse più di AA, ma abbiamo fissato AAA come obiettivo (e colpito) quando abbiamo progettato Unity Design System di Exxon.

Ok, mi sono liberato dall'argomento, ma il mio punto è che si tratta di un problema di colore e design, non di etichetta float.

6. Possono essere scambiati per un valore

L'articolo afferma:

Le persone potrebbero saltare il campo pensando che sia già stato completato. Quando invieranno, vedranno un errore che deve essere riparato. Questo è frustrante e richiede tempo.

Questo è un punto molto valido e anche il motivo per cui il colore e la gerarchia sono della massima importanza nella progettazione delle interfacce.

Le etichette più scure sopra i campi di input vuoti sono piuttosto difficili da confondere con qualcosa già presente nel campo.

Se si imposta un precedente per l'utente attivando le etichette mobili sull'input dell'utente E il colore del testo di input dell'utente è molto più scuro del colore del segnaposto - diciamo # 767676 contro # 222222 - allora la possibilità di confusione potrebbe essere molto più bassa.

Non posso dire di fatto che questo non sarà un problema. Non credo che sarebbe in molti casi, ma fare questo presupposto senza dati concreti sarebbe ignorante da parte mia.

Si prega di progettare saggiamente segnaposto ed etichette. Se stai utilizzando il contrasto corretto tra il colore segnaposto e il colore di input dell'utente, questo dovrebbe risolvere tutti i problemi che potresti incontrare.

7. Si trovano in modo incoerente

L'articolo afferma:

I pulsanti di opzione, le caselle di controllo e le caselle di selezione hanno etichette e legende statiche. Dove le caselle di testo hanno etichette mobili. Questo crea un'esperienza incoerente.
Quando si guarda una casella di testo, ad esempio, l'utente deve guardare all'interno del controllo. Per una casella selezionata devono guardare al di fuori di essa.
Immagine tratta dall'articolo di riferimento

Questo è un problema di progettazione, non un problema con l'etichetta mobile. Shopify fa un lavoro incredibile con l'etichetta float sui campi di input e seleziona le caselle.

8. L'etichetta potrebbe essere ritagliata

L'articolo afferma:

Se l'etichetta mobile è più lunga della dimensione del campo, verrà tagliata dal campo. Dovremmo progettare per i contenuti, non dovremmo adattare i contenuti al design.
Immagine tratta dall'articolo di riferimento

Questo non è un problema di etichetta float di per sé, questo è un problema di progettazione del modulo non valido.

Nessuno dovrebbe mai avere un'etichetta segnaposto così a lungo.

E se hai davvero bisogno di porre una domanda a due righe come etichetta di input, allora consiglio al 100% di NON usare un'etichetta float.

Non ha senso per quel caso d'uso.

9. Ignorano gli standard

L'articolo afferma:

Sappiamo che i segnaposto sono comunque problematici. Tuttavia, se inseriamo del testo in una casella di testo, dovrebbe essere un suggerimento, non un'etichetta.

Questo è lo standard a cui fa riferimento l'articolo. Si legge:

L'attributo segnaposto rappresenta un breve suggerimento (una parola o una frase breve) inteso ad aiutare l'utente con l'immissione dei dati. Un suggerimento potrebbe essere un valore di esempio o una breve descrizione del formato previsto.

Hmmm, "Una parola o una breve frase intesa ad aiutare l'utente" suona come se potesse descrivere un'etichetta!

Ora i documenti standard dicono anche:

L'attributo segnaposto non deve essere utilizzato come alternativa a un'etichetta.

Sono pienamente consapevole del fatto che ci sono circostanze che richiedono un'etichetta esterna e ulteriori dati segnaposto per aiutare davvero determinati tipi di input di campo. A volte è necessario estrarre tutti i punti quando si progettano i moduli per coprire davvero tutte le basi.

Sono d'accordo al 100% che nessuna etichetta e solo i dati dei segnaposto sono una cattiva idea. Ecco perché esiste l'etichetta float!

L'etichetta float è stata creata DOPO che questo standard è stato scritto. Non vale la pena contestare ipotesi originali in vecchi documenti dopo la nascita di nuove idee? Soprattutto quelli che vengono adottati così rapidamente.

È ragionevole essere curiosi di questo piuttosto che sprezzanti?

Ci deve essere un motivo valido per cui Google ha adottato questo modello come standard nelle Linee guida per la progettazione dei materiali.

Oltre a Google, le seguenti società hanno adottato modelli di etichette mobili nelle loro app.

  1. Shopify
  2. allentato
  3. Oceano digitale
  4. Delta
  5. Invision
  6. Molte altre cose che non ricordo ...

Sommario

L'articolo afferma:

I moduli non sono una fonte di intrattenimento. L'etichetta mobile non farà divertire gli utenti con i moduli. Agli utenti non importa. Vogliono solo il risultato.

Sono d'accordo che gli utenti vogliono il risultato, ma non sono d'accordo sul fatto che i moduli non dovrebbero essere divertenti. Un utente che si diverte è molto più propenso a ricordare la sua esperienza con il tuo prodotto.

Aggiungerò un avvertimento che non dovresti mettere l'intrattenimento al di sopra della funzionalità e della chiarezza.

Esistono tecniche migliori e più produttive per migliorare la progettazione dei moduli. Dedichiamo tempo ed energie a quelli invece.

Sono assolutamente d'accordo con la prima frase e talvolta migliorare il design del modulo è rimuovere campi o ripensare se un modulo è persino necessario.

Ma non dovremmo dedicare tempo a TUTTI gli aspetti del miglioramento della progettazione dei moduli?

Questo articolo è stato originariamente pubblicato su mds.is, perché a quanto pare ora devi pubblicare sul tuo blog AND Medium perché chi vuole formattare un solo post sul blog?

Per ulteriori risorse sulle origini del modello di etichetta float vedi questo post.