risposta-alla-domanda-sullo-sviluppo-web-bd.com

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:

Soluzione A: Selettore a due pannelli

Un approccio che ho preso in considerazione è un modello selettore a due riquadri :

mockup

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:

mockup

scarica la fonte bmml

Versione a fedeltà superiore della tabella dell'albero della soluzione B:

Solution B Hi Fidelity

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é)?

21
Charles Wesley

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 :

enter image description here

Quindi, ecco cosa puoi fare: enter image description here

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.

3
Andy

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):

enter image description here

Pertanto, le opzioni "Aggiungi figlio" e "Modifica" apriranno una finestra di dialogo con i dettagli da aggiungere o modificare.

3
alexeypegov

Charles,

Suggerisco il seguente approccio:

enter image description here

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:

enter image description here

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).

3
Hisham

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.

0
obelia