Posizione dell'etichetta del modulo per la migliore usabilità

16

Sto creando una forma che chiederà un visitatore per la loro firstname, middle initiale lastname. Voglio che questi campi di testo siano tutti in linea, ma dove devo posizionare le etichette? A sinistra, in alto o sotto i campi.

Sto cercando l'approccio migliore dal punto di vista dell'usabilità.

— Shane Stillwell
fonte

Non è più appropriato per uxexchange.com? ( uxexchange.com )

— Bobby Jack

Wow, non sapevo che esistesse uxechange.com, grazie. A giudicare dal numero di voti positivi su questa domanda, è sicuramente nelle menti di Pro Webmaster.

— Shane Stillwell,

Sì, è un po 'un "problema". Credo che uxexchange sia stato creato usando il vecchio modello SO. I siti che utilizzano il nuovo modello, come i webmaster, sembrano ricevere molta più attenzione. Quindi qualcosa che è più rilevante per uxexchange finisce per avere più successo sui webmaster. Non sono sicuro di quale sia la soluzione: migrare uxexchange?

— Bobby Jack,

10

Dai un'occhiata a questo studio di UXmatters . È abbastanza approfondito, include dati sul rilevamento degli occhi e conclude che le etichette in cima sono nel complesso la soluzione migliore.

C'è un articolo simile di Luke Wroblewski , anch'esso abbastanza dettagliato. Vale la pena leggere entrambi gli articoli!

— Grant Palin
fonte

+1 Stavo per pubblicare quelle stesse stesse risorse. In realtà, qualsiasi risposta a questa domanda dovrebbe includere studi.

— Virtuosi Media,

Questo è quello che stavo cercando, alcuni confronti tra sinistra e cima. Sono sicuro che molto è soggettivo, ma non meno importante, ci dovrebbero essere alcuni layout che sono leggermente migliori a parità di condizioni. Grazie.

— Shane Stillwell,

La cosa interessante anche dell'articolo di UXmatters è che hanno scoperto che le etichette in grassetto stavano distraendo i visitatori e ... "Le etichette in grassetto erano più difficili da leggere e percepire per gli utenti, probabilmente perché c'era più confusione visiva tra il testo in grassetto e i pesanti bordi adiacenti dei campi di input ". Buono a sapersi.

— Shane Stillwell,

non per essere una negligente negativa, ma uxmatters.com non ha una sezione "articoli più importanti" e nemmeno usa gli strumenti per i webmaster di Google, così posso trovare i loro articoli più letti, il che non è molto esperienza dell'utente!

— Neil McGuigan,

5

La cosa più importante è essere coerenti con il resto del tuo sito. In generale la maggior parte dei siti Web applica le etichette a sinistra dei campi di testo. In questa causa sarebbe una lunga descrizione, quindi assicurati di avere spazio e scorre bene.

Se a sinistra non sembra giusto o non c'è spazio per farlo, allora farei sopra. Dato che è molto chiaro.

L'unico metodo che eviterei è mettere le etichette sotto i campi di testo. quando le etichette sono sotto i campi è più confuso.

— Ben Hoffman
fonte

3

In ogni caso, non dimenticare l' forattributo.

— Pierre-Alain Vigeant,

4

Normalmente, per la tua situazione, in alto o a sinistra è la cosa migliore. Assicurati solo che l'etichetta preceda il campo di input per l'accessibilità.

Esistono comunque molti modi diversi per impaginare una pagina ed essere accessibili.

Le etichette dei moduli possono davvero apparire ovunque tu voglia, purché facciano da allora. Vale la pena dare un'occhiata a questo ricorso, http://patterntap.com/tap/collection/forms

— Kevin
fonte

3

Esistono due opzioni considerate migliori:

etichette a sinistra del campo, allineate a destra in modo che siano vicine all'ingresso.
etichette sopra il campo stesso

un'altra cosa importante da notare per l'usabilità per essere sicuri di utilizzare l'attributo for dell'etichetta, in modo che facendo clic sull'etichetta si concentri sul campo che etichetta.

— GSto
fonte

1

Risposta: nessuna delle precedenti. Usa il testo segnaposto all'interno del campo stesso. L'attributo segnaposto è parte integrante di HTML-5.

Altrimenti, direi metterlo sopra i campi, allineato a sinistra.

— Adam L Davis
fonte

0

Questo è un po 'tangente, ma per favore non usare il nome / cognome / iniziale. Non il nome di tutti rientra in quel raggruppamento pulito.

Citando me stesso su StackOverflow:

Molte culture asiatiche mettono al primo posto il nome della famiglia , perché la famiglia è considerata più importante dell'individuo.

Notando che ci sono un discreto numero di persone che usano un nome che non è quello assegnato dai loro genitori, ho usato il seguente schema con un certo successo:

Nome completo (come normalmente scritto per indirizzare la posta); Cognome; Conosciuto come (il nome comunemente usato nella conversazione).

Per esempio:

Nome completo: William Gates III; Cognome: cancelli; Conosciuto come: Bill

Nome completo: Soong Li; Cognome: Soong; Conosciuto come: Lisa

Vedi /programming/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 per ulteriori informazioni.

— Bevan
fonte

Vedo il valore nella tua raccomandazione, ma la domanda chiave sarà "chi è il tuo pubblico di riferimento?" Se il 99% del mio pubblico fosse americano, sceglierei Nome / MI / Cognome. Penso che molti americani non capiscano immediatamente quale sarebbe un cognome. Come ha detto @RandomBen, devi essere coerente e la maggior parte dei siti statunitensi utilizza Nome / MI / Cognome.

— Shane Stillwell,