mosaico_learning_logo
mosaico_logo_elearning
p11
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

CONTATTACI

Consigli di progettazione di drag and drop per i corsi E-learning

2018-02-01 06:15

mosaicoelearning

Digital learning, steve Jobs, crisi, storyline, microsoft, corsi elearning, disney, sketching, ios 9, modelli gratuiti,

Consigli di progettazione di drag and drop per i corsi E-learning

flwquktga360-article-drag-and-drop-3-nicole-1-.png


I drag and drop sono un ottimo modo per aggiungere interattività al tuo prossimo progetto elearning. Dall'abbinamento degli elementi al sequenziamento dei passaggi di un processo, fino al posizionamento degli oggetti a cui appartengono in una diapositiva, i drag and drop sono un modo sicuro per far sì che i tuoi studenti si fermino, riflettano e interagiscano con il contenuto.


flwquktga360-article-drag-and-drop-3-nicole-.png

Progettare un drag and drop chiaro ed efficace richiede una riflessione attenta e accurata. Detto questo, ecco tre suggerimenti per la progettazione di drag and drop la prossima volta che sviluppi questo tipo di interattività. Tieni presente che questi suggerimenti potrebbero non essere applicabili a tutti i progetti, a seconda delle specifiche dell'interattività che stai creando.


Progetta interazioni di trascinamento che appaiono uno alla volta

Quando progettiamo corsi elearning, dobbiamo lavorare con quantità limitata di spazio disponibile su una diapositiva. Ciò significa che, a seconda della quantità di oggetti da spostare, potresti non avere spazio sulla diapositiva per visualizzare tutti gli elementi contemporaneamente. Se lo schermo è molto stretto, potresti prendere in considerazione la possibilità di visualizzare gli elementi di trascinamento una alla volta.


Ecco un esempio di drag and drop che rivela gli elementi uno alla volta:



Visualizza esempio



Questo può essere ottenuto con “Freeform drag-and-drops” regolando le opzioni di Drag & Drop.


baoudifvimage4-.jpg

Ti consigliamo di selezionare dalla finestra "Reveal drag items one at a time" per mostrare gli elementi di trascinamento uno alla volta. Storyline ti offre anche la possibilità di selezionare l'ordine in cui gli oggetti vengono rivelati.


Tieni presente che in certi casi non è consigliato che lo studente scopra gli elementi uno alla volta; a volte è meglio che egli conosca tutte le opzioni prima di iniziare a posizionare gli elementi. Non esiste una regola fissa, quindi dipende dalle specifiche della tua interattività e della tua diapositiva.


Fornisci i feedback agli studenti

In alcuni casi, dovrai fornire ai tuoi studenti un feedback su quali elementi sono stati posizionati correttamente e quali in modo errato. Questo è semplice da realizzare usando gli stati di Storyline “Drop Correct” e “Drop Incorrect”.


Ecco un esempio di un'interazione drag and drop che utilizza gli stati “Drop Correct” e “Drop Incorrect”:



Visualizza esempio


Storyline ti dà anche la possibilità di decidere se vuoi che gli stati appaiano immediatamente dopo aver rilasciato l'elemento drag sulla destinazione, o solo una volta che lo studente ha fatto click sul pulsante “Submit”.


Puoi anche creare uno stato “Drag Over”. Questo è uno stato che appare quando l'oggetto trascinato viene spostato su di una destinazione di rilascio. Queste opzioni sono disponibili nella finestra delle opzioni di trascinamento. Questa interazione è ottima per fornire agli studenti un feedback su cosa hanno fatto, invece di lasciare che indovinino.


Usa linee tratteggiate per trascinare le ombre degli oggetti e le destinazioni di rilascio

In termini di design visivo, un trucco divertente che amo usare è inserire una linea tratteggiata attorno all'obiettivo di rilascio e anche un'ombra" dietro gli elementi di trascinamento. Metti un'ombra dietro gli elementi in modo da poter vedere dove sono stati posizonati gli elementi da trascinare prima di essere spostati, invece di lasciare uno spazio vuoto.


Ecco un esempio di un'interazione drag and drop che utilizza un contorno intorno alla destinazione di rilascio e le ombre sugli oggetti da trascinare:



Visualizza esempio


Questi dettagli aggiungono un tocco di design professionale e visivo.


Questi sono tre semplici consigli che puoi tenere a mente la prossima volta che crei un'interazione drag and drop. È importante ricordare che le opzioni scelte per la tua interazione dipendono dall'attività specifica che stai creando: non esiste un modo giusto o sbagliato!


Hai qualche suggerimento di progettazione che ti piace usare quando crei interazioni drag and drop?


Vuoi provare qualcosa che hai imparato dai nostri articoli, ma non hai Articulate 360?


Inizia una prova gratuita di 30 giorni

e torna regolarmente su


E-Learning Heroes

per altri consigli utili su tutto ciò che riguarda l'elearning.


 


 


Traduzione autorizzata.  Fonte.Ti è piaciuto questo articolo? Segnalalo ai tuoi colleghi o utilizza i tasti social in alto per condividerlo! 

Training

Per ricevere informazioni sulle attività di training in aula o online training@mosaicoelearning.it
 

Training

Per ricevere informazioni sulle attività di training in aula o online training@mosaicoelearning.it
 

Articulate

Per acquistare o ricevere informazioni sui prodotti Articulate articulate@mosaicoelearning.it
 

Dove
Ragusa, Via del Melograno, 77

Digital Learning

Per richiedere un preventivo su corsi o servizi elearning corsi@mosaicoelearning.it

Digital Learning

Per richiedere un preventivo su corsi o servizi elearning corsi@mosaicoelearning.it

Articulate

Per acquistare o ricevere informazioni sui prodotti Articulate articulate@mosaicoelearning.it
 

Assistenza

Per richiedere assistenza o per segnalare malfunzionamenti del sito assistenza@mosaicoelearning.it
 

Assistenza

Per richiedere assistenza o per segnalare malfunzionamenti del sito assistenza@mosaicoelearning.it
 

footer

facebook
instagram
twitter
linkedin

www.mosaicoelearning.it @ All Right Reserved 2022 - Sito Realizzato da Flazio Experience

k2.svg
k1.svg
k4.svg
p2.svg
k5.svg
k3.svg
Create Website with flazio.com | Free and Easy Website Builder