it-swarm.it

In una griglia, come riordinare manualmente le righe?

Vorrei che i miei utenti riordinassero gli elementi in una griglia, non fare l'ordinamento automatico su una colonna. Selezionano quale elemento è il primo, quale viene dopo l'altro, ecc.

Ho pensato e visto alcune soluzioni che potrebbero funzionare a seconda del caso:

  • Trascina selezione: sexy ma non funziona per griglie lunghe con scorrimento o paginazione. Un altro svantaggio è che è invisibile, potresti anche non sapere che questa funzionalità è disponibile. Infine è richiesta una certa destrezza. Tuttavia, può essere utilizzato per spostare più di un elemento alla volta.
  • Frecce su/giù: comprensibili e facili da usare per piccole mosse, ma noiose quando devi spostare l'ultimo elemento al primo posto. Inoltre, quando sposti un elemento di qualche passo, devi prendere quella freccia dopo ogni singolo movimento. Funziona solo su un elemento alla volta.
  • Una colonna indice: l'utente inserisce un numero che indica la posizione dell'elemento. Utile quando l'utente conosce la posizione assoluta desiderata. Difficile indovinare cosa accadrà se viene inserito un numero già esistente. Funziona solo su un elemento alla volta.

Sono tentato di combinare due di queste tecniche come la colonna dell'indice + trascinamento della selezione, ma ho paura di accumulare gli svantaggi di entrambi invece di avere i vantaggi di entrambi.

Quali sono le tecniche di riordino che hanno dimostrato di funzionare?

5
Mart

Netflix combina tre metodi nella loro coda. Puoi trascinare e rilasciare, ma anche specificare un determinato numero di riga o fare clic per spostarlo all'inizio:

alt text

Quello che trovo interessante riguardo al loro approccio è che hanno messo l'icona "Top" (cerchiata in verde) proprio lì su ogni riga, invece di richiedere all'utente di effettuare una selezione e quindi fare clic in qualche punto nella parte superiore della pagina, dove la maggior parte delle app Web inserisce tali icone o pulsanti.

Nel tuo caso, userei il trascinamento della selezione, ma metterei un'icona di ingranaggi su ogni riga:

alt text

Ciò consentirebbe diverse azioni:

  • L'utente può trascinare e rilasciare una o più righe

  • L'utente può selezionare più righe, quindi fare clic sull'icona degli ingranaggi per visualizzare un menu a discesa ed eseguire un numero qualsiasi di cose, ad es. sposta la selezione in alto o in basso, sposta la selezione di un numero specificato di righe su o giù (nel qual caso appare una piccola finestra di dialogo), copia, taglia, ecc. Praticamente nessun limite.

7
Hisham

La prima cosa che devi chiederti prima di provare a capire come farlo è la frequenza con cui gli utenti lo faranno.

Se verrà utilizzato spesso, proverei a crearlo in modo da utilizzare il trascinamento della selezione e scorrere automaticamente la pagina una volta che un utente ha raggiunto una determinata soglia.

È una buona regola empirica dire che se un utente deve fare qualcosa abbastanza spesso e puoi renderlo più facile anche introducendo un tipo esotico di interazione, fallo. L'utente è d'accordo con la curva di apprendimento in quanto ne trarrà vantaggio in seguito.

Se non verrà utilizzato spesso, farei una freccia su/giù, potrebbe non uscire ma è chiaro.

3
ThomPete

Combinerei le frecce su/giù con il trascinamento.

Dover indovinare un numero o doverlo risolvere in anticipo, è semplicemente ingombrante. E sebbene le collisioni possano e debbano essere trattate nel codice, ad esempio semplicemente incrementando tutti i numeri che si trovano sopra o sopra quello inserito, la maggior parte degli utenti proverà a elaborare quello corretto in anticipo, anche se solo per incertezza su come un duplicato o verrà gestito un numero errato.

Le frecce su e giù sono un modo molto più conveniente di riordinare su brevi distanze.

Per distanze più lunghe e per più spostamenti di oggetti, è possibile aggiungere il trascinamento. Per garantire l'usabilità del trascinamento su distanze superiori a una singola pagina, è necessario implementare anche lo scorrimento automatico della griglia. Ciò significa che durante un'operazione di trascinamento, la griglia scorrerà automaticamente quando trascini il mouse all'interno di un certo margine del bordo superiore o inferiore della griglia. Questo è esattamente ciò che fa Windows Explorer.

Per aumentare ulteriormente questo, la velocità di scorrimento può iniziare lentamente e aumentare mentre il trascinamento continua ad essere nell'area "sensibile allo scorrimento". Fai attenzione, però, oltre a impostare una velocità di scorrimento massima: sono stato spinto alla furia dallo scorrimento automatico che ha accelerato così tanto e/o così rapidamente che ho sempre passato la strada oltre dove dovevo essere.

0
Marjan Venema

Il Drupal CMS ha una soluzione relativamente buona per questo che si adatta agli elenchi di 30-50 articoli. Non sono sicuro di come si ridimensionerebbe.

La configurazione di "blocchi" del sito è un esempio: vedere lo screenshot di seguito.

  • Ogni oggetto ha una maniglia a 4 vie che può essere afferrata per le operazioni di trascinamento della selezione.
    La maniglia fornisce una "convenienza" visiva che l'oggetto può essere trascinato.
  • L'elenco è diviso in sezioni.
    È possibile spostare un elemento in una sezione specifica selezionandolo dalla casella combinata visualizzata per quell'elemento

alt text

L'approccio "trascina e rilascia" è molto più semplice che avere frecce che spostano gli oggetti di un passo. JIRA lo fa ed è davvero laborioso portare le cose nel posto giusto.

0
Bevan

Dipende da come gli utenti utilizzano il sistema:

  • Se il numero di riga è significativo (ad esempio posizione in coda), probabilmente si desidera visualizzarlo e renderlo modificabile.

  • Se "fai prima questo" è un'azione comune, potresti voler introdurre un pulsante "sposta in alto" (o sposta in basso).

  • Se ai tuoi utenti piacciono le scorciatoie da tastiera, aggiungi le scorciatoie su e giù, assicurati che la selezione/messa a fuoco segua la riga quando si sposta, quindi premendo la scorciatoia su 3 volte si sposterà effettivamente la riga su 3 posizioni.

  • Puoi aggiungere pulsanti su/giù, ai miei utenti non piacciono molto (i tuoi utenti potrebbero essere diversi)

  • Infine, trascina e rilascia, il modo preferito dai miei utenti per riordinare le righe: nella mia app non ci sono maniglie di trascinamento e gli utenti riescono a trascinare e rilasciare bene (i tuoi utenti potrebbero essere diversi)

E, qualunque cosa tu faccia, assicurati di testarlo su utenti specifici e vedere come gli piace.

0
Nir