Questo pattern permette di trascinare e rilasciare uno o più elementi di una lista nella posizione desiderata attraverso la manipolazione diretta dell’interfaccia.

L’utilizzo di questo pattern non è alternativo all’utilizzo di altre modalità di ordinamento, questo infatti può essere un’estensione delle funzioni già esistenti che permettono di ordinare la lista in modo predefinito dal sistema (Ordering list).


Come aiuta l’utente

Attraverso la modalità di trascinamento e rilascio, l’utente ha la possibilità di organizzare la lista secondo un criterio arbitrario e con una modalità di interazione molto naturale.

Affinché agli utenti sia chiaro cosa stanno facendo e cosa possono fare, bisogna progettare con cura gli elementi che aumentano l’affordance e implementare i giusti feedback. Deve essere sempre chiaro quali sono le voci selezionate e in trascinamento, quali sono le aree sensibili in cui possono essere rilasciate e la posizione finale in cui si ritrovano.

L’uso di questo pattern prevede anche l’implementazione dell’auto scrolling in modo che non si perda mai di vista il punto in cui l’elemento viene rilasciato.

È altrettanto importante che il sistema ricordi l’ordine creato in modo da non doverlo impostare tutte le volte.


Anatomia

  1. List Item
  2. Drop Area
  3. Cursor
  4. Icon Drag Handle (opzionale)
  5. Border
  6. Scroll bar


Stati

Gli stati degli elementi di listato:

  1. Active: L’elemento è attivo e disponibile 
  2. Disabled: L’elemento non è attivo, quindi inutilizzabile
  3. Hover: Il cursore è sopra l’elemento ma non è stata compiuta nessuna azione
  4. Pressed: Nel momento in cui l’elemento viene premuto
  5. Selected: L’elemento rimane premuto in modo continuativo


Gli stati del cursore:

  • Grab: il cursore appare come una mano aperta ad indicare che l’oggetto può essere preso
  • Grabbing: il cursore appare come una mano chiusa simulando la presa sull’elemento


Affordance e usabilità

  • In caso di sistemi utilizzati da desktop, è importante cambiare la visualizzazione del puntatore del mouse a seconda dell’azione che si sta svolgendo, utilizzando quella presente all’interno del sistema operativo in uso.
  • Aggiungere un’icona “maniglia” che indichi la possibilità di prendere e trascinare l’elemento può essere un ulteriore aiuto, ma non esiste uno standard riconosciuto quindi bisogna fare attenzione alla sua riconoscibilità da parte dell’utente.