personalizzare - yes no html




Molte persone non sanno come selezionare più elementi in un controllo<select> HTML, quindi...? (4)

Odio la multi-selezione, specialmente quando l'oggetto può essere modificato in seguito (se fai clic senza tenere premuto CTRL, perdi ciò che hai già selezionato). Le migliori due opzioni nella mia esperienza sono:

  1. Avere tre opzioni di selezione separate (se stai limitando a tre). Il vantaggio qui è che le istruzioni di "selezionare fino a tre" sono valide per l'esperienza utente e con un piccolo JavaScript è possibile rimuovere la prima selezione dal secondo menu a discesa, rimuovendo così la confusione.
  2. Usando le caselle di controllo. Il vantaggio delle caselle di controllo è che probabilmente corrisponde meglio al tuo database, inoltre le informazioni sono piuttosto intuitive per l'utente e con un po 'di pensiero su come presentare le opzioni l'esperienza utente può essere abbastanza solida. Ex. raggruppando le caselle di controllo in aree che hanno senso.

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 hanno 10 caselle di spunta ... o forse hanno solo ciascuna opzione in un blocco colorato che cambia colore quando cliccano per sceglierlo? Questo diventa pasticcio quando considero che il mio attuale elenco di 20 opzioni potrebbe arrivare a 50 alla fine.

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

Edit: Suppongo che potrei usare i tag, come qui su StackOverflow, ma ritengo che questi siano meno appropriati se gli utenti non sono tecnici (e la metà di essi lo sarà).


Per gli utenti non frequenti che dispongono di tre elenchi a discesa potrebbero funzionare al 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 rimangono incollati una volta cliccati. Tuttavia sarà difficile quindi trasmettere la limitazione di un massimo di tre opzioni.

Se è necessario contrassegnare ciascuna fotografia individualmente e c'è un numero limitato di categorie, è possibile visualizzare un elenco di categorie (può trovarsi in diverse colonne) proprio sopra la fotografia (ovviamente è necessario assicurarsi che gli elementi siano leggibili e indicano che si sono concessi clic) e consentono agli utenti di selezionare e deselezionare i tag con un solo clic. Non è molto intuitivo per la tastiera, tuttavia è quasi impossibile utilizzare il Web senza alcun tipo di dispositivo di puntamento. In questo caso useresti il ​​posizionamento spaziale per collegare categorie e fotografie.

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

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

Qual è l'attività effettiva nei termini dell'utente e chi sono gli utenti?


Potresti semplicemente utilizzare un elenco di elementi manuale (come semplici collegamenti), che hanno un comportamento onclick Javascript che deseleziona / seleziona manualmente. In pratica, 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 deselezionando facendo clic su anziché sul requisito Ctrl + clic standard.


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 utilizzare, ma per un numero elevato di elementi può diventare un problema. Tuttavia, quando il numero di elementi è in crescita è possibile aggiungere un:

<div style="overflow: scroll" />

con 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 con la possibilità di spostare gli articoli da uno all'altro è un approccio molto migliore.

3) Quando il numero di elementi non è molto grande ma maggiore di pochi, ho usato un menu a discesa con le caselle di controllo create internamente che hanno il vantaggio di occupare solo un piccolo spazio. Qualcosa del genere potrebbe essere d'aiuto.





html-select