Mosaico Elearning
Carriere
ChiamaciParliamo

Percorso Mosaico

Livello 1

Esplora Mosaico e sblocca l'accesso speciale ai nostri prodotti e servizi.

Harry
Parliamo del tuo progetto
← Torna al blog

E-learning

Come Usare le Icone nell'E-learning - Seconda Parte

Come Usare le Icone nell'E-learning - Seconda Parte
Icona astratta con forme geometriche colorate che rappresenta creatività e varietà nei corsi e-learning

abbiamo parlato di come le icone comunichino attraverso le loro forme semplici richiamando alla mente, in maniera efficiente, dei concetti o l'idea di un oggetto. Nell'articolo di oggi vedremo gli stili più usati ad oggi, e di come questi possono essere inseriti in un corso elearning.

Banner con titolo su come usare le icone nell’e-learning e illustrazione di una mano che tocca un tablet

Stili delle icone

La comunicazione visuale aiuta a dare attenzione al linguaggio di ogni stile. Tutti gli stili che mostrerò possono essere usati nell’elearning, anche se ognuno ha un’unica personalità. Di seguito alcuni degli stili più importanti.

Set di sette icone che mostra diversi stili grafici usati nell’e-learning come flat, linea, filled e hand-drawn

Le icone piatte sono un trend moderno che nasce dalla necessità di avere download veloci sui dispositivi mobile. Lo stile piatto è in antitesi con lo stile “skeuomorphic design”, che imita gli oggetti fisici. Le icone piatte sono flessibili e sfruttabili per moltissimi usi, dall’assistenza alla navigazione e funzionalità per migliorare le spiegazioni grafiche informative.

Le icone piatte con una lunga ombra hanno più dettagli rispetto allo stile precedente. Fanno parte del trend “Flat 2.0”, che aggiunge personalità e interesse a questo approccio minimalista.

Le icone lineari sono estremamente minimaliste e quindi facili da scaricare. Oggetti e simboli disegnati come linee sono facili da indentificare poiché la mente che li visualizza aggiunge le informazioni mancanti. Queste icone leggere sono ideali per la navigazione, per i bottoni e ovunque tu abbia bisogno di inserire una icona in un piccolo spazio. In più, sono immagini discrete che non distraggono dal messaggio principale se questo è il tuo obiettivo.

Le icone con riempimento sono essenzialmente delle silhouette di oggetti riconoscibili. Simili alle icone lineari dove la mente di chi visualizza le completa con i dettagli. A differenza delle altre icone, queste risaltano di più.

Icone disegnate a mano libera, sono create al computer ma sembrano realizzate da uno schizzo: la mancanza di linee dritte e angoli a 90° dona un look adatto a descrivere un romanzo o un messaggio scherzoso.

Le icone dettagliate sono le più realistiche: sono piccole illustrazioni che contengono piccoli dettagli con più colori, gradienti, sfumature linee o ombre. Possono essere create a mano libera o con software di illustrazioni.

Infine ci sono le icone che hanno una piccola piega nell’angolo alto o basso dell’immagine: questo dettaglio aggiunge un look a tre dimensioni, per farle sembra come delle piccole figurine. L’angolo piegato dona un tocco di personalità a queste icone.

Come usare le icone nell’elearningIcone nell’interfaccia utente

L’interfaccia utente è il posto tipico dove inserire le icone per incrementare il significato dei menù, della navigazione e dei bottoni. L’applicazione in questi casi è comune perché un’immagine più il testo rende più semplice la navigazione o effettuare scelte. Icone lineari sono l’ideale qui, perché sono di dimensioni ridotte e comunque ben riconoscibili.

Barra di navigazione con icone lineari per le azioni Learn, Watch, Read e Discuss in un corso e-learning

Icone come punti elenco

Le icone sono un ottimo rimpiazzo per i classici punti elenco. Basta semplicemente posizionare immagini appropriate in una forma che sostituirà il classico punto elenco che trovi negli strumenti di PowerPoint. Questo approccio lascia che gli allievi comprendano concetti chiave o gli argomenti prima di leggerli. Può anche aiutare a ricordare le informazioni.

Tre icone arancioni sostituiscono i punti elenco per presentare consigli di viaggio internazionale in modo visivo e chiaro

Icone per implementare il significato

In questo esempio ho usato le icone per valorizzare tre fatti correlati alla sicurezza dei pazienti. Questo approccio migliora l’estetica della presentazione e suddivide il messaggio in tre distinte entità. Lo scopo di questo approccio è di accrescere l’impatto delle informazioni.

Tre icone rappresentano dati chiave sulla sicurezza dei pazienti per evidenziare statistiche su errori medici

Icone nel gioco

Le icone sono l’ideale in un ambiente di gioco. Illustrazioni semplificate si adattano bene a piccoli spazi e possono essere utili come elementi di gioco. Nell’esempio mostrato sotto, le icone con le facce sul pannello di gioco rappresentano i pazienti e l’orologio rappresenta la pausa. Con molti stili di icone, sarà facile trovare quello più adatto alla personalità del gioco.

Tabellone di gioco digitale con icone di volti e orologi usato per attività e-learning interattive

Icone nelle infografiche

Come sarebbero le infografiche senza icone? Esse aggiungono importanza e appeal a diagrammi e grafici. Tutto quello che serve è una veloce occhiata per far capire a cosa si riferisce l’informazione al posto di soli box e parole isolate. Nell’esempio sottostante, le icone aiutano alla visualizzazione del processo della creazione del contenuto.

Diagramma a fasi con icone che illustrano il processo di content curation nell’e-learning

Icone per suddividere in categorie le informazioni

Dividere le informazioni in categorie è una maniera standard per aiutare le persone nell’apprendimento. Le categorie forniscono una struttura in cui conservare le informazioni. Le icone possono migliorare la struttura perché ad ogni immagine è associata una categoria.

Tre riquadri colorati con icone rappresentano strumenti digitali suddivisi in categorie per l’e-learning

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

Traduzione autorizzata.

Fonte.

PowerPointpunti elenconavigazioneiconegame boardinterfaccia utenteinfografiche

Articoli correlati