Come Creare Interazioni Drag and Drop per l'E-Learning

Dopo l’articolo della scorsa settimana sugli esempi di interazione drag and drop, ho ricevuto un paio di email dove mi venivano chiesti consigli su come creare interazioni drag and drop per l'elearning. In questo post condividerò alcuni consigli generali per la costruzione di interazioni drag and drop.

Perché si usa la funzione di trascinamento?

Ci sono alcune ragioni per cui rendiamo trascinabili alcuni oggetti sullo schermo.

• I cursori sono usati come mezzi per effettuare le regolazioni / selezioni o come un modo semplice per navigare il contenuto. Questi elementi sono fissati su una pista.
• Spostare gli oggetti da una parte all'altra dello schermo. Per esempio, la pianificazione della disposizione di un ufficio può richiedere che l’utente sposti le sedie o gli utensili da mettere sul tavolo. Queste sono forme libere di interazioni drag and drop con nessuna destinazione di rilascio specifica.
• I bersagli sono probabilmente il caso d'uso più comune in cui un oggetto ha bisogno di essere collocato in un'area molto specifica.

• In che modo l'utente dovrebbe trascinare l'oggetto? Nella maggior parte dei casi, l’interazione prevede il trascinare e rilasciare gli oggetti in una destinazione di rilascio. I bersagli possono essere oggetti reali, o elementi invisibili (come un hotspot) che controlla dove gli oggetti trascinati vengono rilasciati.
• Non si desidera che l'oggetto scatti sulla destinazione di rilascio? Ci sono diversi modi per lavorare con la destinazione di rilascio. A volte, le cose potrebbero non essere così evidenti sullo schermo invece, scattando sul bersaglio l'utente viene aiutato a rilasciare l'oggetto sul punto corretto.

• Vuoi rendere il bersaglio visibile? Questo ha senso se ci sono una serie di opzioni di drag and drop e si dispone di una chiara destinazione per ogni oggetto trascinabile.

• Cosa succede quando l'utente trascina un oggetto fuori dalla posizione? Mi piace aggiungere un'immagine trasparente o qualcosa che mostri da dove l'oggetto di trascinato proviene. E' anche un modo semplice per indicare l'avanzamento.

• Le istruzioni sono chiare? A volte gli sviluppatori dimenticano di mettere le istruzioni per l'interazione e su ciò che l'utente deve fare. Se vi aspettate che gli utenti interagiscano con lo schermo in un modo nuovo, è necessario includere istruzioni chiare. Mi piace usare degli schemi che fermano l'utente e forniscono nuove istruzioni.

Ci sono alcuni modi per fornire un feedback quando l'utente rilascia l'oggetto su un bersaglio.

• Il modo più semplice è quello di permettere al bersaglio di accettare l'oggetto. Utilizzando una funzione a  scatto che tira l'elemento trascinato verso il bersaglio. Che consente all'utente di sapere che hanno trascinato l'oggetto su un bersaglio. E a seconda di come si struttura l’interazione drag and drop, può anche essere il mezzo per mostrare un feedback per un'azione corretta.
• Un altro modo per fornire un feedback all'utente è rifiutare scelte errate e far tornare l'oggetto trascinato e lasciato alla posizione di partenza.

• È inoltre possibile fornire un feedback immediato corretto e scorretto, modificando lo stato dell'oggetto in modo da riflettere quando si è stata fatta una decisione giusta o sbagliata.

Ecco alcuni post precedenti che parlano di interazioni drag and drop po’ più nel dettaglio:

• Basic Building Blocks for Drag & Drop Interactions
• How to Provide Feedback for Drag & Drop Interactions

L’interazione drag and drop possono contribuire a rendere naturalmente più coinvolgente e interattivo un corso. Troppo spesso ci si limita alle interazioni con click basati su standard e sul processo decisionale. La prossima volta, cercare di convertire uno di queste interazioni in un drag and drop e vedi come va.