Metodi e tecniche per l’E-Tutor nella scuola
Gli artefatti digitali
Modulo 1 – Tecnologie didattiche e comunicazione multimediale
L’abbinamento strutturale
• Il design attua l’abbinamento tra corpo e
artefatto digitale mediante criteri grafici
– Forma, colore, dimensione, posizione, orientamento,
texture e trasformazioni temporali (cinema o TV)
• Un’azione viene avviata tramite action triggers
– Pulsanti o bottoni raggruppati in menu
L’abbinamento strutturale
Utente
Interfaccia dell’utensile
o artefatto
Azione o compito
L’interfaccia
Il progetto di un’interfaccia riguarda:
• l’analisi delle sequenze operative che l’utente deve
compiere per eseguire determinati compiti
• le componenti visive tramite cui si costituisce lo
spazio operativo sullo schermo del monitor
L’interfaccia
Il progetto di un’interfaccia consiste:
• scelta delle funzioni
• loro denominazione
• organizzazione in gruppi di similitudine
• individuare una gerarchica su livelli diversi
• trattamento visivo
Nella concezione riduzionistica del design
esso si limita all’ultimo passo.
Infodesign non è infostyling.
Ingegneria vs design
• Punto di vista
• Punto di vista del
dell’ingegneria
design
Il programma viene
valutato in termini di
Il programma viene
valutato in termini di
velocità
affidabilità
prestazione...
facilità e rapidità
d’apprendimento da
parte di utenti non
necessariamente
esperti
Il contributo del design
•
•
•
•
•
•
•
Analizzare e interpretare i processi operativi
Specificare la funzionalità d’uso
Organizzare i comandi
Definire i flussi delle diverse sequenze
operative
• storyboards
Design dei componenti grafici
Design della documentazione
• i manuali parte integrante del progetto di interfaccia
Design del materiale promozionale
Il ruolo del designer
• Svolge un servizio
L’infodesign offre poche opportunità di soddisfare
tendenze narcisistiche e diffondere creazioni
egocentriche. Si suppone che il pubblico non sia
particolarmente interessato a queste manifestazioni
personali. L’infodesign è in primo luogo un servizio.
Questa constatazione contrasta con le ambizioni di
espressione individualistica.
Gui Bonsiepe
Il ruolo del designer
• Svolge un ruolo cognitivo in quanto è
un coautore
— selezione dei contenuti
— ordinamento
— gerarchizzazione
— collegamenti
— distinzioni visive
Azione efficace
Il designer sceneggiatore
• Il ruolo del designer d’interfacce è simile al ruolo
dello sceneggiatore teatrale
– Creano una rappresentazione di oggetti e di ambienti
per fornire un contesto per l’azione
• In scena: disegni di oggetti che hanno alcune funzioni (porte
che si aprono), luci per attirare attenzione (colore intensità
orientamento), pannelli che rappresentano elementi
architetturali
• Nelle interfacce: disegni di oggetti modellati dal sw e del
modo per impartire il loro comportamento e dell’ambiente in
cui si svolgono azioni
Una rappresentazione del mondo
• Lo sceneggiatore e il disigner grafico creano
rappresentazioni del mondo reale
– Simulando aspetti del reale ma diversi
• Ma il disegn grafico non è tutta l’interfaccia
• Come lo sceneggiatore non scrive
completamente il pezzo teatrale
La manipolazione diretta
• Una rappresentazione continua e consistente
dell’oggetto d’interesse
• Azioni fisiche e bottoni che eliminano la
necessità di imparare complesse sintassi per
modificare il comportamento degli oggetti
• Operazioni che possono essere eseguite in
modo incrementale a causa del principio di
feedback
Ruolo della manipolazione
diretta
• La manipolazione diretta crea un senso di
coinvolgimento diretto ed è la chiave
dell’interazione uomo-macchina
– Sketchpad, Sutherland
Termine coniato allo Xerox
1963 PARC per indicare un
paradigma per interfacce a
manipolazione diretta
• Nel mondo digitale tutto ciò che importa è
la rappresentazione, in cui agiscono utenti,
oggetti software e elementi dell’interfaccia
– Una sorta di WYSIWYG esistenziale
Creatività e design
Quali processi permettono di creare nuovi
artefatti?
• Mimesi
• Ibridazione
• Metafora
• Mutazione
•…
Mimesi
Mimesi
Mimesi
Mimesi
Ibridazione
Letteralmente:
incrociare piante o animali di specie
diverse in modo da ottenere ibridi
• Esempio:
lavagna + proiettore  lavagna luminosa
Ibridazione
Metafora
Dal greco trasferimento: il processo linguistico
basato su analogia o similitudine sottointesa, per
cui si traspone un vocabolo o una locuzione dal
senso proprio a un senso figurato.
sei un cannone, sei un fulmine, annegare nei debiti,
l’ondeggiare delle spighe, una grandine di pugni.
Le similitudini originarie possono spegnersi: il braccio della
lampada o la gamba del tavolo.
Un mezzo espressivo, un arricchimento
semantico
Metafore comuni nel sw
• Il secchio di vernice per la funzione di
colorazione di superfici.
• Il pennello per la funzione di colorazione
delle linee.
Puntamento (input)
•L’interazione avviene tramite “puntamento”. Le azioni dell’utente (user)
avvengono in varie modalità. Ricordiamo le più semplici e diffuse:
• Tastiera (comandi e scrittura)
• Mouse, TrackBall (comandi, azioni, drag & drop, tracciamento)  anche gioco
• Penne ottiche e stili (comandi e azione, drag & drop, tracciamento)
• Joypad (comandi, azioni)  dedicato al gioco
• Strumenti di VR (caschi, dataglove, lettori di retina, …)
• Tapping (azioni su schermi sensibili al tatto)  Palmari, …
•Esistono anche altri metodi di interazione, ma o sono a livello prototipale o sono
poco diffuse in ambiti non specialistici.
Interfaccia WEB | e-commerce
•AMAZON.COM
Interfaccia WEB | e-mail
•Webmail
•LIBERO
Interfaccia | Definizione
•
•
Definizione dal web
A linkage, usually between a computer and a user, or among computer programs. An interface
between a computer and user refers to the elements of the computer and software that the user
interacts with--the screens, icons, menus, and dialogues. An interface among computer programs
involves using agreed-upon commands and statements that let one computer program exchange
information with the other in a way that the first program can integrate the second's.
www.vnulearning.com/kmwp/glossary.html
•
The on-screen appearance of a computer application or program; the connection between the user
and the program. (See graphical user interface and command-line interface.)
www.tufts.edu/vet/internetvet/glossary.html
•
Ogni strumento che prevede un’interazione ha un’interfaccia
utente.
Anche i sistemi meno complessi richiedono un Front End,
ovvero una raffigurazione grafica (non solo grafica) che
permetta all’utente di effettuare delle scelte o
semplicemente di fruire un contenuto.
Facciamo degli esempi semplici…
Interfaccia | Esempi
 Pagina Web, l’interazione avviene su 2
interfacce: il browser, e la pagina stessa
(ipertesto, ipermedia, solotesto).
 Videogame, l’interazione avviene su 3
interfacce: il joypad (meccanica, grafica), la
console, il front end del gioco (schermata di
interazione).
 Cellulare, l’interazione avviene su 2 interfacce:
il dispositivo (meccanica, grafica), il software
del dispositivo (nel caso della navigazione web
o wap, esiste anche una terza interfaccia).
Canoni…
L’interfaccia utente è fondamentale per poter
attivare forme di interazione controllata utili per
il corretto utilizzo del media o dello strumento.
Interfacce non progettate e realizzate
correttamente impediscono o rendono molto
difficile l’interazione con l’utente e di fatto
rendono lo strumento, il media, o l’applicazione
non correttamente funzionante.
L’interfaccia va studiata in modo molto
approfondito e non può essere “improvvisata”.
Interfaccia | Fondamenti
Le interfacce utente sono legate a canoni e
regole molto precise e vengono studiate da
discipline indipendenti e complesse come
l’interazione uomo macchina e la psicologia
cognitiva.
L’interfaccia ha come obiettivo principale quello
di mediare l’interazione in modo naturale. Questa
funzione è assolta dalla “metaforizzazione”
dell’ambiente di interazione.
Metaforizzare in questo caso vuol dire dotare
un media interattivo di elementi di interazione
riconoscibili e spesso riconducibili ad altre forme
di interazione non digitale.
ESEMPI
 Il tasto cerca nei motori di ricerca, è (era) simile
a quello di una tastiera. O più semplicementa ad
un “bottone” (realizzato in modo da avere un
aspetto tridimensionale)
 L’interfaccia grafica di un sistema GUI (Graphic
User Interface) riproduce (riproduceva)
elementi tridimensionali simili a bottoni, oggetti
(si pensi al cestino) o altri elementi non digitali
(vedi prime interfacce Apple).
Interfaccia | Riflessioni
Le interfacce utente sono studiate per ricreare
ambienti di interazioni simili alla realtà. Ad esempio:
 Scrivanie
 Negozi (molti e-commerce prima maniera)  carrello
 Strumenti audio video, i tasti Forward, Play,
Rewind.
In questi casi si tratta di rimandi a forme di interazione
non digitale, che hanno aiutato utenti non avvezzi all’uso
delle tecnologie digitale a non trovarsi smarriti all’interno
di un nuovo media (effetto straniamento). Utente non
deve (non doveva) perdere alcuni riferimenti iconografici
e visivi determinanti per la sua corretta fruizione o
interazione (si parla anche di suoni e non solo di
elementi grafici).
Interfaccia Note
Lo studio delle interfacce dei New Media (e in particolare del Web)
coinvolge numerosi professionisti e coinvolge discipline come l’Usabilità
e l’Ergonomia.
Nuovi ruoli emergenti nel processo di progettazione di un’interfaccia:
CONCEPT DESIGNER (ideazione della metafora)
VISUAL DESIGNER (ideazione e realizzazione degli elementi grafici e
iconografici)
Nel caso di esperienze artistiche o di fruizione passiva (in allestimenti
multimediali o altro) l’interfaccia passa spesso in secondo piano, ma
continua ad esistere come front end. Se non vi è interazione si parla
comunque di interfaccia utente o interfaccia “non interattiva”.
(vedi per esempio, http://yugop.com/ver2/)
Torneremo su questo argomento in seguito. Ma non dimentichiamo che
l’interazione controllata avviene solo grazie alle interfacce, dal cui
corretto funzionamento dipende la gran parte della user experience.
Interfaccia Front End e Back End
Front End  ciò che vede e utilizza l’utente
Back End  ciò che vede o utilizza chi deve immettere contenuti utili per
essere fruiti dal Front End (dallo user)
Abbiamo per adesso indicato le interfacce come strumenti cognitivi per lo
user, ma se lo user non è fruitore, ma “creatore” di contenuti si troverà
comunque di fronte ad un’interfaccia (spesso meno bella e semplice di
quella del front end.
Esistono (da poco) specifici studi sulle interfacce di back end.
Esempio.
Se guardate il Sistema Bibliotecario Nazionale (SBN) sul
web vedrete il front end di un complesso sistema di
catalogazione e archiviazione documentale. Avrete funzioni
di “ricerca” e “lettura”.
Se guardate il Sistema del Back End (usato nel Back Office)
vedrete un sistema (derivato dalle maschere di un
database) di immissione e categorizzazione del contenuto.