it-swarm-eu.dev

La mia selezione multipla condizionale è efficiente e facile da usare? Come posso migliorarlo?

Sto affrontando alcune difficoltà con una selezione multipla. Vorrei che l'utente collegasse una documentazione a una o più categorie. Il trucco è che ci sono alcune sottocategorie e compaiono solo se l'utente ha precedentemente collegato la sua documentazione alla categoria principale della sottocategoria. Ho proposto prima le caselle di controllo, ma il feedback non è stato molto buono, quindi ho usato jquery asm-select . Ma sento che qualcosa è ancora sbagliato e non riesco a capire dove si trovi il problema.

Ecco i passaggi per utilizzare la selezione multipla:

  1. Nel modulo, l'utente sceglie una categoria.
  2. Viene visualizzata un'etichetta chiudibile contenente la selezione precedente, quindi l'utente può selezionare una sottocategoria con cui collegare la documentazione.
  3. E così via per gli altri livelli di categorie.

Ecco un mock-up:

Multi-selezione mock up

Allora, cosa ne pensi? Come posso migliorare questo? Esiste un altro modello di progettazione dell'interfaccia utente più adatto a risolvere il mio problema?

4
rcampistron

Tendo ad essere d'accordo con il tuo capo :) Forse la vera app ha un'atmosfera diversa, ma dall'aspetto del modello non sembra essere molto elegante.

Cosa succede quando cambio una categoria dopo aver selezionato una sottocategoria, reimposta la mia sottocategoria? E se seleziono un numero di categorie, il menu a discesa della sottocategoria contiene sottocategorie di tutte le categorie che ho selezionato?

Inoltre, ci vuole molto lavoro per selezionare più categorie contemporaneamente, poiché il menu a discesa si chiude al clic e è necessario riaprirlo dopo ogni elemento aggiunto e scansionarlo di nuovo per trovare l'elemento successivo necessario.

Sembra che la risposta sia un albero a discesa/popup con caselle di controllo.

2

Se lo spazio non è un problema, è possibile creare un elenco che mostri la gerarchia di categoria/sottocategoria, ciascuno con una casella di controllo. Nota che le sottocategorie devono essere sempre abilitate: puoi quindi selezionare un sottocat, implicando anche l'assegnazione delle categorie principali.

Se il posto è un problema, questo elenco potrebbe essere un pop-up/fly-out/...

[ ] Cat 1
    [ ] Cat 1.1
    [ ] Cat 1.2
[x] Cat 2
    [ ] Cat 2.1
    [x] Cat 2.2

Naturalmente, se non ti aspetti che i tuoi utenti assegnino più categorie e/o sottocategorie, questo potrebbe essere un po 'spaventoso/eccessivo.

In alternativa, utilizzare un sistema simile a tag con completamento automatico e utilizzare una convenzione simile a un percorso per categorie e sottocategorie.

Categories: [user-manual, self-study/intro, ...   ]

La convalida è più complessa in questo caso, ma spesso digitare cose è molto più veloce che cercare pensieri e fare clic su di essi. Ma io stesso sono un tastierista, quindi potrei essere un po 'di parte :-)

3
Peter Frings

È una domanda sull'interfaccia utente o una domanda sull'architettura dei dati? Se si tratta di una domanda dell'interfaccia utente e sei legato all'architettura Categoria/Sottocategoria/Sottocategoria, l'unico suggerimento che ho è di usare un'interfaccia utente albero, per la quale credo ci sia un Plug-in jQuery - controlla www.jstree.com.

Se si tratta di una domanda di architettura ... Negli ultimi tempi, sono stato davvero incline a sporgermi dall'architettura di categoria/sottocategoria e più verso una struttura di "tagging", come si fa su questo e su tutti gli altri siti Web StackExchange. Permette molta più flessibilità. Guarda iTunes. Questa è una delle cose che odio di più al riguardo: sono stanco dei livelli. Voglio digitare una parola e ottenere tutto con quel tag. Questo è ciò che amo dei siti StackExchange.

2
Eric Belair

Ho avuto a che fare con un sistema in cui c'erano sia categorie gerarchiche che tag regolari. Abbiamo finito per fornire un'interfaccia che aveva una funzione di digitazione per i tag, che includeva i "nodi foglia" dell'albero delle categorie. In sostanza, se avessi:

 Cat 1
   Cat 1.1
 Cat 2
   Cat 2.1
   Cat 2.2

Quindi il type-ahead suggerirebbe le opzioni "Cat 1.1", "Cat 2.1" e "Cat 2.2". Una volta applicato il tag gerarchico, è stato facile riempire nuovamente la gerarchia. Questo ha funzionato molto bene per l'applicazione perché gli analisti conoscevano le categorie gerarchiche come il palmo delle loro mani - insieme ai codici di scorciatoia di quattro lettere associati a loro.

Finché il type-ahead è ragionevolmente intelligente, offre probabilmente il modo più rapido per applicare la gerarchia di categorie.

1
Berin Loritsch

Questo è, come affermato in precedenza, un modo standard di effettuare selezioni diverse a seconda della selezione precedente ed è un buon modo per risolvere il problema. Solo un piccolo pensiero: non credo che tu abbia bisogno di etichette per inserire il valore selezionato, mantieni la selezione in ogni elenco a discesa per mantenere la GUI pulita e semplice. E un'altra cosa, è possibile aggiungere un feedback visivo che l'elenco a discesa secondario cambia quando cambia un elenco a discesa più in alto (barra di caricamento o simile).

1
Henrik Ekblom

Avevamo bisogno di un elemento UI simile per un widget di selezione multipla a tre livelli nidificati: a albero delle caselle di controllo è il miglior compromesso, soprattutto perché puoi migliorare progressivamente widget che funziona anche senza javascript (a differenza dei tre menu a discesa del tuo esempio).

Richiede più spazio sullo schermo , ma gli utenti possono visualizzare direttamente una panoramica e accedere alle opzioni selezionabili invece di passare attraverso due menu a discesa prima di poter vedere quali opzioni possono scegliere, ad esempio:

Example of tree of checkboxes

1
wildpeaks

Non capisco la necessità delle etichette, quando il menu a discesa mostrerà presumibilmente la selezione. Far cadere le etichette semplifica le cose.

0
David Veeneman