Nella scrittura, le metafore sono utili per aiutare a fare paragoni tra due cose non correlate fra loro ma che condividono alcuni tratti comuni. Ad esempio, potresti aver sentito dire che qualcuno è “la pecora nera della famiglia”. Questo, ovviamente, non significa che il tuo stravagante cugino Frank sia letteralmente un ruminante nero e lanoso. Piuttosto, il cugino Frank condivide alcune caratteristiche degne di nota associate alle pecore nere, principalmente che ha un aspetto o un comportamento diverso rispetto al resto della mandria (intendo “famiglia”).
Cos'è una metafora visiva?
La maggior parte di noi probabilmente inserirebbe la parola “metafora” in un contesto letterario, ma le metafore sono in realtà molto più frequenti nella loro forma visiva. Oggi le metafore visive sono ovunque, utilizzate da molti designer per aiutare a colmare il divario tra la comprensione di come funzionano le cose nel mondo reale e come funzionano nel mondo virtuale.
Analizziamo questo concetto. Innanzitutto, immagina di dover salire al dodicesimo piano di un edificio. Raggiungi l’ascensore e ti guardi intorno alla ricerca di un modo per chiamarlo, e cosa vedi? Un pulsante lucido e smussato con accanto una freccia rivolta verso l'alto che invita all'interazione sotto forma di pressione. Una volta premuto, vedrai un utile feedback (sotto forma di un piccolo bagliore) che richiama visivamente il concetto di “aver schiacciato il pulsante e chiamato l’ascensore al piano”.
Ma un pulsante in un corso o su in un sito Web non è esattamente uguale al pulsante dell'ascensore. Un pulsante della vita reale ha caratteristiche tattili che non possono essere duplicate in un ambiente virtuale. Infatti, in un corso i pulsanti sono solo pixel disposti ad arte in modo da sembrare pulsanti reali. L'immagine è una metafora di un pulsante del mondo reale, realizzato con alcune delle stesse caratteristiche visive: un bordo distintivo o un'ombra esterna per dargli dimensione, uno stato al passaggio del mouse che si illumina quando lo studente passa sopra di esso o una interazione che lo fa illuminare quando si fa clic sul pulsante. Tutte queste caratteristiche ricordano dei veri pulsanti e aiutano il nostro cervello a riconoscerli come oggetti da cliccare.
Come utilizzo le metafore visive nel mio training online?
Imitare le convenzioni del mondo reale è un piccolo trucco geniale usato nella progettazione. Non solo ci evita di dover leggere e interpretare molto testo sullo schermo, ma può anche migliorare l'esperienza del discente e colmare le lacune nella nostra comprensione di nuove interfacce. Soprattutto, quasi chiunque, anche gli sviluppatori di corsi elearning inesperti, possono utilizzare metafore visive senza che sia richiesta alcuna competenza di progettazione grafica. Quello che serve è un po' di pensiero progettuale e di pratica. Di seguito sono riportati alcuni esempi di metafore visive e del ruolo che possono svolgere nei training online, oltre alcune risorse per aiutarti a iniziare a lavorare sui tuoi progetti.
Colore
Una delle metafore visive più potenti è quella che tendiamo a dare per scontata: il colore. Fin dalla tenera età, alla maggior parte di noi, viene insegnato a creare associazioni con idee e sentimenti usando il colore; per esempio, rosso che implica “pericolo” e verde che significa “via libera”.
Queste associazioni di colori, o modelli mentali, indicano che il colore può svolgere un ruolo importante nell’instructional design. Ad esempio, guarda questo fantastico esempio di Lisa Walker.
Da fare e da non fare
Il visual design di Lisa fa un chiaro uso del modello mentale che abbiamo del verde come “da fare” e del rosso come “da non fare”. Inoltre, combina ulteriormente questo uso del colore come metafora visiva con simboli familiari del “fare” e “non fare”: il segno di spunta ✓ e l’icona X.
Suggerimento: si pensa che gran parte della popolazione soffra di un certo grado di daltonismo rosso/verde, noto anche come protanopia. Se pensi che qualcuno fra i tuoi utenti posso avere questo problema, è una buona idea controllare il tuo corso con un programma di controllo dell'accessibilità web come wave, che può aiutarti a individuare potenziali problemi con il contrasto del colore.
Icone
Le icone sono un ulteriore tipo di metafora visiva. Di solito assumono la forma di un pittogramma, come questo:
E quando vedi un’icona di una casa nel contesto della navigazione di un sito web, probabilmente riconosci che indica la Home, ossia la pagina principale del sito.
Alla stessa maniera nei corsi elearning, l'utilizzo di un'icona è un modo semplice per visualizzare elementi chiave di navigazione, sia che si tratti di una casa per simboleggiare la Home Page principale o di una lista di controllo per simboleggiare un Menu. Il seguente download gratuito messo a disposizione da Nicole Legault dimostra in che modo le icone possono svolgere un ruolo nel visual design del tuo corso.
Nei training online, le icone vengono comunemente usate per avvisare gli studenti della presenza di informazioni aggiuntive, per fornire agli studenti controlli di riproduzione per media (es. video o audio) o per fornire suggerimenti di navigazione.
Ecco un esempio di alcune semplici icone con delle frecce su un pulsante interattivo. Nel caso nell’esempio le frecce invitano gli studenti a cercare ulteriori informazioni su un prodotto.
Questo approccio invita gli utenti a esplorare la slide. Posizionando le frecce in modo che possano indicare le caratteristiche specifiche del prodotto che desideri porre in evidenza (ad esempio, un beccuccio versatore o un manico), puoi ulteriormente catturare e indirizzare la loro attenzione.
Schede
Le schede sono probabilmente una delle soluzioni di visual design più amate, e contemporaneamente, una grande metafora visiva. Ecco un esempio di layout con delle schede elaborato da Nicole.
Non solo questo tipo di interfaccia è un modo pulito e semplice per suddividere il contenuto in blocchi più facilmente gestibili; è anche una soluzione familiare ai discenti che probabilmente associano già le etichette a quelle del loro schedario in ufficio, dando l’idea di contenuti raggruppati e organizzati.
Ti interessa imparare a progettare la tua interfaccia a schede? Ecco un tutorial passo-passo (in inglese): The Most Straightforward Way to Build a Tabs Interaction for Storyline.
Immagini
Quando sviluppiamo un corso, vogliamo che gli utenti si connettano con la formazione a livello emotivo. Vogliamo che siano coinvolti nell'esperienza di apprendimento, immersi in un ambiente familiare e personale. Fondamentalmente, vogliamo che siano attratti dal corso, sia dal suo contenuto che dal suo design.
Uno dei modi più semplici per coinvolgere l’utente è utilizzare immagini di sfondo che facciano da metafora, richiamando l’ambiente di lavoro o studio dell’utente. Diamo un'occhiata a questo esempio di Amar Kulshreshtha su come preparare un cupcake al cioccolato:
Amar ha progettato il suo corso con uno sfondo che ricorda una cucina con una palette dalle sfumature del cioccolato. In questo caso, il colore è stato usato come metafora visiva. Ma descrivendo il processo di preparazione dei cupcake nel contesto di una stravagante cucina virtuale, il suo corso sembra invitante, divertente, eppure ancora autentico e adatto alla natura spensierata dell'argomento.
Al contrario, immagina quanto sarebbe stato poco entusiasmante (ed anche noioso) vedere il corso di Amar progettato con una metafora visiva orientata al business...
Conclusione
Le metafore visive sono un modo potente per supportare gli studenti, collegando idee non familiari a concetti familiari. In questo articolo, abbiamo parlato solo di alcuni suggerimenti per sbloccare il potere della metafora visiva per i tuoi corsi… ma c'è molto altro da imparare. Ecco alcune risorse (in inglese) che possono aiutarti a potenziare le tue capacità di visual design.
- Pratica l'analisi visiva (che implica il pensiero metaforico) utilizzando questo approccio: David Anderson’s Design Mapping.
- Scarica il nostro e-book gratuito: The Essential Guide to Visual Design.
- Acquisisci familiarità con il visual design leggendo questo articolo: 3 Essential Visual Design Concepts
Come usi il potere delle metafore nei tuoi corsi elearning? Condividi le tue idee nei commenti.
Traduzione autorizzata tratta dal post originale su E-Learning Heroes. Il post originale è disponibile qui
Ti è piaciuto questo articolo? Segnalalo ai tuoi colleghi!
