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

Migliore modello di interfaccia utente per consentire a un utente di assegnare elementi ai gruppi

Problema: l'utente ha un elenco di circa 5-20 articoli non classificati e deve classificarli in 2-4 gruppi. La parte difficile è che lo stesso oggetto può essere inserito in più di un gruppo (questo è un caso Edge ma deve essere supportato).

Da quello che posso vedere ci sono due modelli di progettazione che si applicano:

drag-and-drop:
Fondamentalmente all'utente viene fornito un elenco di elementi trascinabili che può quindi raggruppare inot gruppi

Il problema principale con questo modello è che, poiché lo stesso elemento può essere inserito in più di un gruppo, ciò significa che non si tratta in realtà di un'interazione di "spostamento", l'elemento deve rimanere nell'elenco non classificato affinché l'utente sia in grado di anche inserirlo in un'altra categoria. Un'altra conseguenza di ciò è che l'elenco non categorizzato non si restringe mai, quindi non è immediatamente chiaro quali degli elementi in esso contenuti siano stati raggruppati e quali non assegnati

Ecco un possibile progetto che tenta di gestire i problemi di cui sopra. Gli elementi che sono stati assegnati a gruppi appaiono più scuri. Inoltre uso il colore (punto colorato corrispondente al colore dell'etichetta del gruppo) per aiutare l'utente a vedere in quale gruppo è stato inserito l'elemento.

enter image description here

Checkbox table:
Un'interfaccia utente in stile tabella in cui ogni elemento può essere assegnato a un gruppo selezionando la casella di controllo relativa alla colonna di quel gruppo. Le caselle di controllo anziché i pulsanti di opzione vengono utilizzate a causa dell'assegnazione di più gruppi per articolo richiesto. Ecco un esempio:

enter image description here

Lo svantaggio principale che vedo con questa interfaccia utente è che non è immediatamente facile vedere quali elementi appartengono a un determinato gruppo. Inoltre, è un po 'più complicato spostare gli elementi tra i gruppi una volta assegnati (azione in 2 passaggi: l'utente deve deselezionare una casella e selezionarne un'altra). Ciò può essere risolto fornendo un elenco separato degli elementi in ciascun gruppo accanto all'interfaccia utente della tabella di assegnazione. Questo elenco può essere non interattivo o supportare il trascinamento della selezione per spostare elementi tra i gruppi. Esempio:

enter image description here

Ad essere sincero, non sono completamente soddisfatto di entrambe le soluzioni. Mi chiedo se qualcuno ha idee o miglioramenti migliori in questo design?

59
M.A.X

È più una questione se è necessario vedere l'intera mappatura o meno. Se non devi vedere l'intera mappatura in una volta, c'è un'altra possibilità.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Se l'intera mappatura è essenziale, l'approccio migliore consiste nell'utilizzare una matrice che consentirà alle persone di visualizzare l'intera mappatura.

Tieni presente che utilizzare l'interfaccia utente di trascinamento della selezione è utile, ma può essere noioso se c'è un'azione ripetitiva che deve essere eseguita dagli utenti: le caselle di controllo possono rendere le attività ripetitive molto più facili.

14
Mortalus

Molto dipende da quanti articoli e gruppi ti aspetti ci saranno, così come da quanti ti aspetti che qualcuno lavori attivamente alla volta.

Se si lavora con un gran numero di gruppi ed elementi, la prima opzione diventerebbe inutilizzabile. Anche se, mi tenderei lontano da esso anche se i numeri fossero piccoli.

La seconda opzione potrebbe non sembrare elegante, ma è sia semplice da usare e da capire, sia allo stesso tempo in grado di adattarsi bene a un numero maggiore di elementi e gruppi. Non vedo alcuna grande debolezza al di fuori del fatto che non è un modo nuovo di farlo. Ma questa è la sua forza.

La terza opzione è un piacevole miglioramento della seconda, ma solo con un basso numero di gruppi e voci.

Suggerirei l'opzione 2 con alcune modifiche. Aggiungi la possibilità di ordinare in base a una qualsiasi delle colonne (gruppi) e disponi di un pannello di riepilogo sulla destra che mostra in quali gruppi si trova un elemento quando viene selezionato quell'elemento.

11
JohnGB

Perchè non combinare i due? Utilizzare la visualizzazione iniziale del secondo e consentire agli utenti di selezionare caselle di controllo. (La selezione delle caselle di controllo è molto più veloce e più semplice del trascinamento della selezione, il che rende questo superiore all'opzione 1.) In modo che l'utente possa facilmente dire quali elementi sono in un dato gruppo guardando la colonna, fare in modo che ogni casella diventi un pulsante come non appena viene verificato. (Questo pulsante può assomigliare a quelli che mostri all'estrema destra dell'Opzione 2b con una x su di essa che puoi fare clic per rimuovere l'elemento dal gruppo e riportare il pulsante in una casella di spunta non selezionata.) Puoi persino renderlo tale che un utente è in grado di fare clic e trascinare il pulsante per spostarlo tra i gruppi con un movimento fluido, mentre avrebbe comunque l'opzione intuitiva ma leggermente più lenta di deselezionarlo da una colonna e selezionare nuovamente in un altro utilizzando le caselle di controllo.


Modifica: ecco un breve modello di ciò che intendo.

enter image description here

6
Graham Herrli

Penso che entrambi i paradigmi abbiano un senso, ma non quando vengono presentati contemporaneamente.

Come domanda di follow-up: devi svolgere questa attività su una singola pagina? (ad es. fa parte di un modulo?)

Se questa attività fa parte di un'esperienza di gestione degli articoli che è fondamentale per il prodotto, consiglierei un approccio a due pagine come viene utilizzato in iTunes per la playlist e Google+ per le cerchie.

Nella pagina "elenco di elementi" l'utente può visualizzare un elenco di tutti i gruppi esistenti e trascinare e rilasciare gli elementi in questi gruppi. Ogni gruppo può visualizzare il numero di elementi che sono stati aggiunti. È quindi possibile etichettare ogni articolo con il numero di gruppi a cui è stato aggiunto, quando si seleziona un elemento i gruppi a cui appartiene possono essere evidenziati.

Quando viene selezionato un gruppo, la struttura della pagina cambierebbe per differenziare chiaramente gli elementi che erano dentro e fuori dal gruppo selezionato. Gli elementi che non fanno parte del gruppo possono quindi essere trascinati o selezionati in più per spostarli nel gruppo selezionato.

5
Nathan Brothers

Che ne dici di mostrare gruppi con un elenco di selezione in grado di "suggerire automaticamente". Questi gruppi potrebbero essere ulteriormente inseriti in una griglia reattiva (organizza secondo le regole del layout).

Puoi inoltre mostrare elementi selezionati in una nuvola di tag come componenti come il Gruppo n. 3

enter image description here

4
Aftab

Qual è l'attività principale?

  1. Assegnazione di elementi a un gruppo
  2. Confronto tra gruppi
  3. Spostamento di elementi tra gruppi
  4. Qualcos'altro?

Penso che il numero 1 sia meglio supportato con il trascinamento della selezione. Un buon esempio di questo in pratica è google + cerchie . Il numero 2 e il numero 3 sono probabilmente meglio supportati con la griglia della casella di controllo mostrata sopra o qualche variazione su quel concetto, anche se penso che potrebbero esserci problemi con il sovraccarico di informazioni con un gran numero di elementi o gruppi. Questo potrebbe essere più o meno un problema a seconda della frequenza d'uso per il gruppo di utenti di destinazione. Come altri hanno affermato, eviterei di combinare i modelli e di attenermi a quello che supporta meglio l'attività primaria.

1
Max E

Suggerirei una variante della tua seconda opzione, ma mostra solo un gruppo alla volta per ridurre al minimo la confusione dell'utente. In molti casi, il trascinamento della selezione aggiunge solo più lavoro all'utente quando esiste un metodo più semplice.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Nel modello sopra, il gruppo è selezionato dall'elenco a discesa e le caselle di controllo cambiano in modo dinamico a seconda del gruppo selezionato. Si noti che il pulsante di salvataggio si trova sopra il gruppo selezionare per indicare che salverà tutti i gruppi anziché solo uno. La selezione dei gruppi in un menu a discesa rende questo modello molto più scalabile, indipendentemente dal numero di gruppi.

Se lo stai facendo per un'interfaccia web, potresti usarlo come soluzione progressivamente migliorata, con il fallback che consiste nel visualizzare tutti i gruppi contemporaneamente, uno sopra l'altro.

1
Virtuosi Media

Qualche considerazione deve essere data alla dimensione fisica del lavoro che verrà utilizzato. Se questa attività è distribuita su tutto lo schermo, il trascinamento della selezione diventa un problema. Un paio di sistemi su cui ho lavorato sul feedback hanno tenuto premuti i pulsanti del mouse mentre si trascinava a lungo (il feedback ha detto a lungo), le distanze hanno portato a molti errori man mano che le dita si alzavano prima che dovessero avere. Se il trascinamento della selezione è un clic, un leggero giro del polso, una caduta, la maggior parte delle persone lo gestirà facilmente, anche le persone anziane con alcuni problemi di movimento.

La casella di controllo è un'ottima idea per quasi tutte le griglie di dimensioni ed è più adatta a quegli utenti che vogliono usare le tastiere anziché i mouse.

Come al solito, il suggerimento di una combinazione di entrambi i metodi vincerebbe il mio voto in quanto fornisce una soluzione alla maggior parte degli utenti. Lo sviluppo diventa un po 'più lungo ma non è una preoccupazione dell'utente.

Tutte le risposte sembrano basarsi sul prendere un oggetto e assegnarlo a un gruppo. Non capisco l'importanza relativa dell'articolo e del gruppo, ma ha senso usare il gruppo come fonte primaria e "estrarre" gli elementi dall'elenco nel gruppo e poi passare al gruppo successivo.

0
Adelaide Robin