Metodi e tecniche per l’E-Tutor nella scuola

Modulo 1 – Tecnologie didattiche e comunicazione multimediale

Gli artefatti digitali

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 Azione o compito Interfaccia dell’utensileo artefatto

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 dell’ingegneria

Il programma vienevalutato in termini di

velocitàaffidabilitàprestazione...

• Punto di vista del design

Il programma vienevalutato in termini di

facilità e rapiditàd’apprendimento daparte di utenti nonnecessariamenteesperti

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 creazioniegocentriche. Si suppone che il pubblico non sia particolarmente interessato a queste manifestazionipersonali. L’infodesign è in primo luogo un servizio.Questa constatazione contrasta con le ambizioni diespressione 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 1963

• Nel mondo digitale tutto ciò che importa è la rappresentazione, in cui agiscono utenti, oggetti software e elementi dell’interfaccia– Una sorta di WYSIWYG esistenziale

Termine coniato allo Xerox PARC per indicare un paradigma per interfacce a manipolazione diretta

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

MetaforaDal 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 | EsempiPagina 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 | FondamentiLe 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 | RiflessioniLe 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)

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.

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/)

Interfaccia Front End e 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.

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.