Modello UI di gestione della gerarchia della tassonomia
Panoramica
Ho un CMS web leggero personalizzato che sto sviluppando. Ha una funzione che consente agli utenti aziendali di definire tassonomie gerarchiche, aggiungere/modificare/eliminare nodi, cambiare il loro ordinamento rispetto ai nodi di pari livello e cambiare il nodo principale all'interno di una tassonomia.
Le tassonomie potrebbero essere n livelli di profondità (l'applicazione non impone alcun limite) sebbene in pratica la maggior parte di essi avrà una profondità di 1-3 livelli.
Dichiarazione del problema
In precedenza nell'interfaccia utente dell'amministratore un albero rappresentava la gerarchia dei nodi con il trascinamento della selezione sul lato client per riorganizzare i nodi all'interno della gerarchia. Ciò è stato ricevuto male dagli utenti a causa della destrezza del mouse richiesta per trascinare un nodo e posizionarlo vicino o sotto un altro nodo. Ciò ha creato un'esperienza negativa che ha impedito agli utenti di trascinarli completamente. Di conseguenza, è necessario utilizzare un meccanismo diverso per la gestione della gerarchia dei nodi.
Requisiti
L'utente deve essere in grado di:
- Aggiungi nuovi nodi alla gerarchia (crea il titolo e la descrizione)
- Modifica nodi esistenti (aggiorna titolo e descrizione)
- Riordina nodi (modifica l'ordinamento relativo ai nodi di pari livello o modifica nodo principale)
- Elimina nodi
Ricerca
Ho cercato alternative e ho trovato molte buone domande su ux.se, tuttavia si tratta di casi d'uso diversi o le risposte fornite non affrontano la mia specifica dichiarazione di problema:
Qual è il modo più intuitivo per consentire agli utenti di inserire dati in una gerarchia?
Questa è una domanda molto simile, tuttavia non devo solo consentire l'inserimento, ma devo supportare la modifica, l'eliminazione e il riordino. La risposta migliore in quel thread suggerisce l'utilizzo di una tabella del mugnaio che aggiunge una nuova colonna per ogni livello della gerarchia.
Il problema con questo approccio è quello di rispondere a tutti i requisiti CRUD che potrebbero creare molti pulsanti. Inoltre, esiste la possibilità di scorrimento orizzontale nei casi Edge in cui la profondità della gerarchia supera i 3-4 livelli.
Un altro caso d'uso simile ma non del tutto uguale. La risposta migliore suggerisce un modello appiattito per la creazione di elenchi . Il problema con questo approccio è che l'utente non ha una visione completa della gerarchia, e apportare semplici modifiche richiederà più postback ricaricando l'intero schermo che potrebbe invecchiare abbastanza rapidamente.
Soluzione A: Selettore a due pannelli
Un approccio che ho preso in considerazione è un modello selettore a due riquadri :
download bmml source - Wireframe creati con Balsamiq Mockups
È simile al costruttore di elenchi appiattiti, tranne per il fatto che mantiene la visibilità della gerarchia e fornisce un feedback immediato dopo l'esecuzione di un'azione senza portare l'utente a una pagina diversa (riducendo il pogo-sticking).
Il possibile svantaggio sarebbe per le gerarchie poco profonde con molti fratelli a ciascun livello. Questo potrebbe creare uno scorrimento o richiedere che il pannello destro sia "appiccicoso".
Soluzione B: Tabella ad albero con finestra modale
Un'altra opzione è utilizzare un modello di tabella ad albero combinato con una finestra modale:
Versione a fedeltà superiore della tabella dell'albero della soluzione B:
Questo è un po 'più strutturato e meno ingombrante (la selezione e la modifica sono più distintamente separate). Mi sto inclinando verso questo approccio.
Quale opzione ritieni migliore (e perché) o quale terza opzione ritieni migliore (e perché)?
Questo è un buon posto per usare il modello del pannello di controllo, come in Adobe Illustrator, quando fai clic su un oggetto forma, ti mostrerà le operazioni che puoi eseguire con esso nel pannello di controllo.
Il pannello di controllo è l'area E in questo screenshot :
Quindi, ecco cosa puoi fare: 
Non c'è niente di sbagliato nella tua ultima soluzione tranne che è troppo lungo con la barra degli strumenti. E la soluzione con icone più pulite da una delle risposte di cui sopra non ha convenienza, nessuno sa che suppongono di selezionare un elemento per vedere la barra degli strumenti. Forse puoi combinarli, il che significa che il passaggio del mouse consente di visualizzare una barra degli strumenti più corta.
Un'opzione 1 che vedo è quella di utilizzare la barra degli strumenti anziché un pannello separato.
Un'opzione 2 che vedo è quella di utilizzare azioni contestuali, cioè azioni mostrate vicino alla riga (focalizzata) selezionata (o, forse, a più righe):
Pertanto, le opzioni "Aggiungi figlio" e "Modifica" apriranno una finestra di dialogo con i dettagli da aggiungere o modificare.
Charles,
Suggerisco il seguente approccio:
Le icone si trovano sotto la casella di riepilogo, mantenendo il design semplice e, si spera, anche l'implementazione più semplice (non è necessario mostrare/nascondere le icone ogni volta che cambia la selezione). Si noti che non esiste un'icona Modifica; la maggior parte delle persone ora ha familiarità con il doppio clic per modificarlo. Tuttavia, puoi ancora aggiungerlo o utilizzare le seguenti icone:
Nel menu degli ingranaggi, puoi mettere
Modifica "Citrix"
Elimina "Citrix"
Puoi utilizzare il menu Ingranaggi come modo per fornire altre opzioni come Aggiungi figlio e aggiungere un numero qualsiasi di opzioni future in un modo che non sarebbe possibile icone su un elenco (soluzione B) o richiederebbe di più ampie modifiche all'implementazione (soluzione A).
Grosso problema. Non mi piace # 2 perché mi sembra molto poco convenzionale inserire comandi di modifica in una tabella del genere.
L'opzione n. 1 sembra un po 'meno convenzionale, ma penso che potrebbe essere necessario curiosare per scoprire come ristrutturare le cose (modifica -> cambia genitore). Forse combina il pannello di modifica nel primo pannello laterale, quindi c'è solo un pannello laterale che mostra tutte le operazioni.