Molte persone non sanno come selezionare più elementi in un HTML < select > controllo, quindi & # 8230 ;?

Question

Conosco molte persone che usano i computer ogni giorno, che non sanno come selezionare più elementi in una casella / elenco di selezione HTML. Non voglio più usare questo controllo nelle mie pagine:

Please pick 3 options:
<select name="categories" size="10" multiple="yes">

Quindi quali alternative user-friendly suggerisci? Forse hai 10 caselle di spunta ... o forse hai solo ciascuna opzione in un blocco colorato che cambia colore quando fanno clic per sceglierlo? Questo diventa più disordinato se ritengo che il mio attuale elenco di 20 opzioni possa eventualmente aumentare a 50

Qualunque sia il modo in cui scelgo, sarà un problema convalidarlo (usando Javascript), per assicurarsi che la persona scelga almeno 1 oggetto e non più di 3. Non si tratta di rilevare quante opzioni hanno scelto, il problema è più su come comunicare questo in modo amichevole all'utente

Modifica Suppongo che potrei usare i tag, come qui su StackOverflow, ma ritengo che questi siano meno appropriati se gli utenti non sono tecnici (e metà di loro lo saranno).

Answer 1

Potresti semplicemente usare un elenco manuale di elementi (dire come semplici collegamenti), che hanno un comportamento onclick Javascript che deseleziona / seleziona manualmente. Fondamentalmente cambiando la classe css tra due valori e controllando questi css (o qualche altro attributo) durante l'invio per determinare le selezioni.

Ciò consentirebbe all'utente di selezionare semplicemente un elemento facendo clic e deselezionare facendo clic, anziché il requisito Ctrl + clic standard.

Answer 2

Le alternative che ho usato in passato sono:

1) Per un numero limitato di elementi, utilizzare un elenco di caselle di controllo. Le caselle di controllo sono molto più intuitive e semplici da usare, ma per un gran numero di elementi può diventare un problema. Tuttavia, quando il numero di elementi aumenta, puoi aggiungere un:

<div style="overflow: scroll" />

con un'altezza fissa.

2) Per un numero molto elevato di elementi diventa difficile vedere ciò che è realmente selezionato, specialmente quando ci sono pochi elementi effettivamente selezionati. In questo caso due elenchi affiancati alla possibilità di spostare gli elementi dall'uno all'altro è un approccio molto migliore.

3) Quando il numero di elementi non è molto elevato ma maggiore di alcuni, ho usato un menu a discesa con caselle di controllo costruite internamente che ha il vantaggio di occupare solo uno spazio ridotto. Qualcosa come questo potrebbe essere di aiuto.

Answer 3

Suggerisco di usare due caselle di riepilogo, una con quelle disponibili e una con quelle selezionate. Facendo clic o facendo doppio clic su un elemento in uno degli elenchi, l'elemento dovrebbe spostarsi nell'altro elenco. Per comodità, includerei anche due "Sposta" pulsanti per fare lo stesso. Questo approccio funziona sorprendentemente bene con gli utenti medi, nelle applicazioni web e nelle applicazioni desktop.

Answer 4

Per gli utenti poco frequenti che hanno tre menu a discesa potrebbero funzionare meglio > ;:

<select><option>Capa Verde</option></select>
<select><option>Holiday</option></select>
<select><option>Competition</option></select>

In alternativa, potresti avere una serie di pulsanti che si attaccano una volta cliccato. Tuttavia, sarà difficile comunicare la limitazione di un massimo di tre opzioni.

Se è necessario contrassegnare ciascuna fotografia singolarmente e esiste un numero limitato di categorie, è possibile visualizzare un elenco di categorie (può essere in più colonne) proprio sopra la fotografia (ovviamente è necessario assicurarsi che il gli articoli sono leggibili e indicano che possono permettersi il clic) e consentono agli utenti di selezionare e deselezionare i tag con un solo clic. Non è molto facile da usare con la tastiera, tuttavia è per lo più impossibile usare il web senza una sorta di dispositivo di puntamento. In questo caso useresti il ??posizionamento spaziale per collegare categorie e fotografie.

Esistono varie opzioni con due pile (disponibili e selezionate) ecc.

Puoi fare almeno un "corridoio"? test di usabilità?

Qual è l'attività effettiva in termini di utenti e chi sono gli utenti?

Answer 5

Odio la selezione multipla, specialmente quando l'elemento può essere successivamente modificato (se si fa clic senza tenere premuto CTRL, si perde ciò che si era già selezionato). Le due migliori opzioni nella mia esperienza sono:

1. Avere tre opzioni di selezione separate (se stai limitando a tre). Il vantaggio qui è che sei istruzioni di " seleziona fino a tre " tenere benissimo con l'esperienza dell'utente e con un po 'di JavaScript è possibile rimuovere la prima selezione dal secondo menu a discesa eliminando così la confusione.
2. Utilizzo delle caselle di controllo. Il vantaggio delle caselle di controllo è che probabilmente corrisponde meglio al tuo database, inoltre le informazioni sono abbastanza intuitive per l'utente e con un po 'di riflessione su come presentare le opzioni l'esperienza utente può essere piuttosto solida. Ex. raggruppare le caselle di controllo in aree sensate.