it-swarm-eu.dev

Le etichette della casella di controllo devono essere a destra o a sinistra?

Ho alcune caselle di controllo con valori di testo di varie lunghezze (ad esempio 5 caratteri fino a circa 60) - qual è il layout preferito? Valore a sinistra e casella di controllo a destra o viceversa?

87
Becskr

Mentre Microsoft e Apple non sono espliciti su questo problema, Java Swing Look and Feel Guidelines afferma esplicitamente che etichetta/valore dovrebbe essere a destra del controllo per le lingue lette da sinistra a destra Lo stesso si applica ai pulsanti di opzione .

L'antico stile OSF Motif afferma inoltre esplicitamente che l'etichetta si trova a destra delle caselle di controllo e dei pulsanti di opzione (pg9-133). E, mentre stiamo facendo archeologia, gli standard IBM Common User Access affermano che l'etichetta è a destra di una casella di controllo , ma sono silenzioso sui pulsanti di opzione .

Qualunque siano gli standard espliciti, è chiaro che i progettisti dovrebbero mettere l'etichetta alla destra del controllo. La logica è probabilmente ciò che stai intuendo. Quando si dispone di una colonna di caselle di controllo con etichette di varie lunghezze, questa disposizione consente sia le caselle di controllo che l'inizio delle etichette di essere allineati in modo coerente senza grandi spazi vuoti tra le etichette e i controlli, facendo un passo avanti sui problemi di allineamento delle etichette che le caselle di testo e gli elenchi a discesa hanno. Nel mondo degli alberi morti, le etichette si trovano spesso a destra delle caselle di controllo e degli equivalenti dei pulsanti di opzione (ad es. Bolle sui moduli scansionati otticamente), quindi questo non genera utenti.

66

Per scegliere una o più scelte, etichettare a destra. Ciò consente una facile scansione visiva e consente al mouse/dito dell'utente di scorrere in linea retta:

[ ] option 1

[ ] this is option 2

[ ] #3

Se l'etichetta fosse a sinistra, sarebbe un po 'un casino:

option 1 [ ] 

this is option 2 [ ] 

#3 [ ] 

Inoltre, avrai spesso un'etichetta di "gruppo" e sebbene possa essere sicuramente posizionata in cima, è spesso a sinistra:

Pick one or more options:   [ ] option 1

                            [ ] this is option 2

                            [ ] #3

Si noti che indipendentemente dal posizionamento, anche le etichette devono essere selezionabili (utilizzare gli attributi FOR appropriati). Il problema è che non tutti lo sanno e punta alla casella di controllo stessa, quindi l'allineamento aiuta.

Quando esiste solo UNA casella di controllo, generalmente utilizzata per processi espliciti di opt-in o opt-out, penso che sia OK metterlo in un secondo momento per renderlo un po 'un compito (dato che vuoi davvero che le persone leggi l'etichetta):

To opt in to our incessant spam emails we ask that you click this checkbox: [ ]
17
DA01

Se ignoriamo la possibilità di leggere da destra a sinistra (usato in alcune lingue), credo che l'etichetta dovrebbe sempre essere sul lato destro della casella di controllo.

In Windows, infatti, è impossibile mettere un'etichetta a sinistra di una casella di controllo, da un punto di vista tecnico. In qualsiasi ambiente di sviluppo software Windows un'etichetta della casella di controllo sarà automaticamente sul lato destro della casella di controllo. Non c'è modo di cambiarlo. Ciò che alcuni programmatori faranno duramente è creare una casella di controllo senza un'etichetta e quindi mettere un'etichetta statica a sinistra di essa come controllo separato. Oltre ad essere brutto ha un grande svantaggio: un utente non può fare clic sull'etichetta per modificare lo stato della casella.

Quindi dovrebbe essere sempre sul lato destro della casella di controllo. Tuttavia ... So che alcune persone (e non sono d'accordo con loro) ritengono che ci sia un'eccezione: quando la casella di controllo fa parte di un elenco di altri controlli. Vedi questo esempio:

enter image description here

Quindi ci sono persone che pensano che sia giusto perché l'allineamento sembra più bello. Io non. Penso che la posizione della casella di controllo sia corretta, ma la posizione dell'etichetta non è corretta. Ragazzi, vedete questo come un'eccezione?

16
Bart Gijssens

Il presupposto di base è che si desidera utilizzare l'opzione leggibile più.

Un aspetto importante è scansionabilità, quanto è facile ottenere una panoramica senza considerare consapevolmente ogni elemento per intero. A tale scopo è importante che le caselle di controllo abbiano una larghezza costante. quindi se si allinea verticalmente un lato delle caselle di controllo, anche l'altro lato verrà allineato verticalmente. Il testo ha una larghezza variabile, quindi generalmente non è possibile ottenerlo senza allungare il testo (il che può rendere molto difficile la lettura). Si raccomanda generalmente di mettere le parole importanti all'inizio delle frasi, quindi per il testo LTR dovremmo dare priorità all'allineamento a sinistra rispetto all'allineamento a destra.

Un altro problema è prossimità, quanto vicine sono le informazioni pertinenti. Se mettiamo le caselle di controllo a destra dell'etichetta e le allineamo verticalmente, saranno più lontane dalle etichette rispetto a quando le mettiamo a sinistra. Quindi la risposta sembra essere quella di metterli sul lato sinistro.

D'altra parte, è necessario considerare coerenza all'interno del modulo. La maggior parte dei controlli del modulo non ha una larghezza costante e metterli a sinistra delle loro etichette può spesso creare un flusso imbarazzante (ad esempio, posizionare il campo di inserimento della data di nascita a sinistra dell'etichetta), in cui l'utente deve andare avanti e indietro per scansionare il modulo. Un compromesso sarebbe quello di utilizzare i controlli allineati a sinistra solo se sono tutti di larghezza costante e uguale.

Un'altra cosa da considerare è che un set di pulsanti di opzione equivale al codice HTML predefinito <select> list, mentre le caselle di controllo sono equivalenti a <select multiple="multiple">.

8
l0b0

La mia risposta immediata è che la casella di controllo dovrebbe essere sulla sinistra dell'etichetta, ma prima di rispondere volevo confermare i consigli.

Purtroppo le linee guida dell'interfaccia utente di Microsoft, Sun e IBM non sono esplicite al riguardo (tendono a parlare di quando utilizzare le caselle di controllo sul pulsante di opzione ecc.), Ma tutti i loro esempi usano la convenzione controllo-allora-etichetta.

Quindi opterei per quello.

7
Matt Goddard

Dal punto di vista del programmatore, la casella dovrebbe venire prima del testo, perché è più facile da allineare. Dal punto di vista dell'utente, il testo dovrebbe venire prima, perché 1) leggiamo di cosa tratta questa casella di controllo 2) decidiamo se fare clic su di esso o no, in questo ordine. Quindi il layout dovrebbe riflettere il corso delle azioni dell'utente.

3
Boris

Dipende dall'uso della casella di controllo.

caselle di selezione (ad es. In un elenco di elementi) dovrebbe essere "prima" del testo (quindi, a sinistra in una lingua da sinistra a destra come l'inglese). Ciò consente di allineare a sinistra gli elementi e di fare in modo che le caselle siano ancora allineate senza spazi bianchi inutili. Mette anche il meccanismo di selezione vicino all'inizio dell'etichetta: le persone non tendono a leggere l'intera etichetta, ma invece la scansionano, e inizia a metà sinistra.

In una lista di controllo, le caselle di controllo dovrebbero essere presenti prima del testo, nessuna domanda. Gli utenti stanno cercando di agire sulle caselle di controllo e stanno eseguendo la scansione come sopra.

Caselle di controllo Opzioni, nel contesto di altre opzioni, potrebbe essere dopo l'etichetta. Tuttavia, in generale cerco di stare lontano dalle caselle di controllo delle opzioni, perché sono piuttosto poco comunicative. Controlli più recenti come il dispositivo di scorrimento dell'iPhone sono più comunicativi, oppure potresti utilizzare pulsanti bistate, menu a discesa o altri metodi per fornire all'utente più informazioni di un semplice "controllato/non controllato".

3
Alex Feinman

I toolkit della GUI desktop come SWT incapsulano le caselle di controllo come una variante del pulsante Button, in cui la proprietà text del pulsante diventa l'etichetta. Verrà visualizzato, almeno sui sistemi di cui sono a conoscenza, sulla destra della casella di controllo. Quindi a differenza di HTML, non devi nemmeno fare una scelta.

3
Jörn Zaefferer

Il voto d'identità per "l'etichetta viene dopo" nelle lingue LTR, semplice, le persone scansioneranno le scelte e faranno i controlli facendo clic sull'inizio dell'etichetta (dovrebbe essere supportato), o se sono meno esperti di computer, cerca il casella di controllo per fare clic, se ci sono 5 caselle di diversa lunghezza, immagina il viaggio che le loro mani, occhi e cervello devono compiere dall'etichetta alla casella di controllo equivalente ... dolorosa! quindi la casella di controllo deve essere la più vicina possibile all'etichetta per ridurre al minimo questo viaggio

2
Ayyash

Quindi per Windows o Apple sembra chiaro mettere la casella di controllo a sinistra. Se è a destra, per rispettare i principi Gelstat le etichette devono essere allineate a destra per allineare le caselle di controllo verticalmente ...

Ma per il software del dispositivo mobile la casella di controllo a destra delle etichette sembra migliore per l'accessibilità. ..

Dai un'occhiata a SMS gestore dello smartphone quando vuoi eliminare alcuni messaggi ....

2
pierre lebailly

Vorrei anche votare per seguire il modello "controllo-allora-etichetta" a cui qualcuno faceva riferimento, ma con l'avvertenza che il contesto dovrebbe avere la precedenza sulla convenzione.

Ad esempio: esiste un modulo di assistenza governativa online che chiede agli utenti di raccogliere diversi documenti prima di iniziare. Il sistema consente agli utenti di procedere al passaggio 1 del modulo solo se hanno spuntato ciascuno degli elementi nell'elenco. In questo caso le caselle di controllo formano un elenco di controllo, la stragrande maggioranza delle quali mette le caselle a sinistra.

D'altra parte, supponiamo di avere un qualche tipo di applicazione di vendita al dettaglio/vendita con una sezione di gestione dei dipendenti e tu per qualsiasi motivo puoi selezionare più utenti tramite la casella di controllo, in questo modo:

Name         Title               Hire Date         Select
--------     ---------------     ---------         ------
John Doe     Sales Associate     9/12/03           [x]
Jane Doe     Regional Manager    12/3/01           [x]

In questo caso, penso che le caselle di controllo dovrebbero essere posizionate a destra perché la connotazione è diversa (stai selezionando gli elementi per ulteriori azioni, non per l'eliminazione dall'elenco). Sia iOS (niente di specifico in HIG, stranamente) che Android ( http://developer.Android.com/guide/topics/ui/controls/checkbox.html =) sposta le caselle di controllo a destra. Per me questo ha più senso per questo tipo di applicazione perché dà una certa distinzione visiva alle caselle di controllo; fluttuarle a sinistra in questo caso sarebbe, secondo me, un piccolo allineamento sconcertante- saggio.

1
Brian

Non esiste una taglia unica, ma una cosa da guardare è la coerenza. Noterai che alcuni fingono che avere la casella di controllo a sinistra e l'etichetta a destra faciliti un migliore allineamento ... e tuttavia probabilmente non invocherebbero mai un controllo della casella di modifica da visualizzare a sinistra dell'etichetta descrittiva. Se l'allineamento fosse così importante, lo farebbero anche per quello.

Alcuni altri menzionano la lettura da sinistra a destra come rilevante per avere la casella di controllo a sinistra dell'etichetta ... come se leggere prima il testo e seguire direttamente la casella di controllo (rispondi a quel testo) sia meno intuitivo che avere un casella di controllo ... saltandola per leggere l'etichetta e quindi scansionando di nuovo a sinistra per inserire il tuo input (essenzialmente la risposta all'etichetta). È difficile vedere come dover fornire la risposta prima della domanda sia fondamentalmente più intuitivo.

Quindi, almeno per le interfacce di tipo di modulo con molti input, è chiaro che le caselle di controllo dovrebbero essere sulla destra come tutti gli altri controlli di input.

0
Jack Lewis