Alternative a un singolo elemento <select multiple = "multiple"> per dataset di grandi dimensioni

Question

Sono spesso in conflitto su come affrontare questo problema nelle mie applicazioni. Ho usato un numero qualsiasi di opzioni tra cui:

• Un multiselect generico - Questa è la mia opzione meno preferita e più raramente utilizzata. Trovo l'usabilità di essere atroce, un semplice errore di battitura può rovinare tutto il tuo duro lavoro.
• Una soluzione di "completamento automatico" - Lato negativo: l'utente deve disporre delle capacità di ortografia per trovare i dannati valori di cui ha bisogno, non sono esposti a quelli che potrebbero non avere in mente e le potenziali prestazioni di backend della ricerca di sottostringa.
• Due multiselects adiacenti, con un pulsante Aggiungi/Rimuovi - Svantaggi: ancora "brutto" imo
• Qualsiasi numero di soluzioni javascript fantasia (http://livepipe.net/control/selectmultiple, http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/, ecc)

io non sono stato in grado per trovare studi di usabilità fatti sull'approccio migliore a questo problema. Molte di queste soluzioni alternative sono ottime quando si passa da < a 10 elementi a un centinaio, ma possono scomparire completamente quando si passa da un centinaio a un migliaio.

Cosa usi? Perche 'lo usi? Puoi indicarmi casi studio di usabilità? Esiste una soluzione "magica" che deve ancora essere scoperta?

Answer 1

Il mio consiglio è di non utilizzare più generici controlli di selezione. Gestisco User Experience Research per tutta la mia carriera e, ogni volta che eseguo il test di un sito con più controlli di selezione, risulta sempre che causano problemi agli utenti finali.

ho fatto un post su questo un po 'indietro: Multiple Select Controls Must Evolve or Die

Suona come si sapeva questo comunque, però. La tua vera domanda è "cosa uso invece?" Bene, per rispondere a questa domanda devi capire se il compito dell'utente si appoggia al riconoscimento o .

(i) Per richiamare, voglio dire che l'utente sa cosa vogliono selezionare prima ancora di aver visto l'elenco. In questo caso, probabilmente è più facile per loro se offri uno strumento di completamento automatico (usato molto efficacemente su Facebook, ad esempio). Questa soluzione è ancora migliore quando l'elenco delle opzioni è anche incredibilmente lungo da presentare su una pagina (ad esempio nomi di località, ecc.).

(ii) Passare al riconoscimento - con questo intendo un'attività che implica che l'utente non sappia cosa desidera selezionare finché non ha visualizzato l'elenco di opzioni. In questo caso, il completamento automatico non fornisce alcun suggerimento. Un array di checkbox sarebbe molto più utile. Se puoi mostrarli tutti in una volta, questo è utile per l'utente. I DIV scorrevoli sono più compatti, ma creano un carico di memoria per l'utente, ovvero, una volta che scorrono verso il basso, devono ricordare quali oggetti hanno scelto. Ciò è particolarmente evidente quando gli utenti salvano un modulo e tornano in seguito.

Quindi, pensando al tuo problema, hai bisogno di una soluzione per il richiamo o il riconoscimento?

Answer 2

Dai un'occhiata al controllo Dojo Toolkit's DataGrid. È di gran lunga il più flessibile e potente e supporta più selezioni di righe. Ha anche funzioni di accessibilità integrate.

Answer 3

Purtroppo non posso indicarvi casi di studio, ma quello che posso dirvi è che personalmente preferisco gli array di caselle di controllo grandi in layout da due a cinque colonne. Certo, occupano molto spazio, ma sono estremamente precisi e semplici.

Credo che per qualsiasi di controllo - che si tratti di selezione multipla di base, doppia lista, un array casella di controllo, o di qualsiasi altra soluzione - una volta che si va oltre una certa soglia di voci che sta per essere difficile per l'utente non importa quale.

Answer 4

La libreria ExtJS offre alcune soluzioni davvero valide per il tuo problema. C'è un sacco di estensioni utente per combo neat-o e scatole multi selezione.

Se si desidera un combo elenco di selezione, è possibile aggiungere query di ricerca e impaginazione, oltre a progettare il conseguente discesa utilizzando facile di template, come in questo esempio:

http://extjs.com/deploy/dev/examples/form/forum-search.html

Ecco un bello multiselect, nello stile ti sembrava di descrivere:

* (main_site)/imparare/Estensione: Multiselect2

Potete trovare tutte le estensioni degli utenti qui:

* (main_site)/imparare/Ext_Extensions

Plus, si può facilmente includere in una pagina web esistente, senza un sacco di spese generali supplementari.stack completo di ExtJS è abbastanza grande, ma per ottenere solo i file JS necessari, essi forniscono un bel strumento di creazione di afferrare solo quelle parti che avete bisogno:

* (main_site)/prodotti/extjs/costruire/

Solo un avviso: ExtJS ha appena rilasciato 3.0, ma non sono sicuro che le estensioni utente siano state aggiornate. Il "forum-search" è stato preso da un esempio 3.0, quindi funzionerà perfettamente con l'ultimo e il più grande.

(*) A quanto pare i nuovi utenti possono inserire solo un link ...