Metodi e tecniche per lE-Tutor nella scuola Modulo 1 – Tecnologie didattiche e comunicazione multimediale Gli artefatti digitali.

Presentazione sul tema: "Metodi e tecniche per lE-Tutor nella scuola Modulo 1 – Tecnologie didattiche e comunicazione multimediale Gli artefatti digitali."— Transcript della presentazione:

1

2 Metodi e tecniche per lE-Tutor nella scuola Modulo 1 – Tecnologie didattiche e comunicazione multimediale Gli artefatti digitali

3 Labbinamento strutturale Il design attua labbinamento tra corpo e artefatto digitale mediante criteri grafici –Forma, colore, dimensione, posizione, orientamento, texture e trasformazioni temporali (cinema o TV) Unazione viene avviata tramite action triggers –Pulsanti o bottoni raggruppati in menu

4 Labbinamento strutturale Utente Azione o compito Interfaccia dellutensile o artefatto

5 Linterfaccia Il progetto di uninterfaccia riguarda: lanalisi delle sequenze operative che lutente deve compiere per eseguire determinati compiti le componenti visive tramite cui si costituisce lo spazio operativo sullo schermo del monitor

6 Linterfaccia Il progetto di uninterfaccia 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 allultimo passo. Infodesign non è infostyling.

7 Ingegneria vs design Punto di vista dellingegneria Il programma viene valutato in termini di velocità affidabilità prestazione... Punto di vista del design Il programma viene valutato in termini di facilità e rapidità dapprendimento da parte di utenti non necessariamente esperti

8 Il contributo del design Analizzare e interpretare i processi operativi Specificare la funzionalità duso 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

9 Il ruolo del designer Svolge un servizio Linfodesign offre poche opportunità di soddisfare tendenze narcisistiche e diffondere creazioni egocentriche. Si suppone che il pubblico non sia particolarmente interessato a queste manifestazioni personali. Linfodesign è in primo luogo un servizio. Questa constatazione contrasta con le ambizioni di espressione individualistica. Gui Bonsiepe

10 Il ruolo del designer Svolge un ruolo cognitivo in quanto è un coautore selezione dei contenuti ordinamento gerarchizzazione collegamenti distinzioni visive Azione efficace

11 Il designer sceneggiatore Il ruolo del designer dinterfacce è simile al ruolo dello sceneggiatore teatrale –Creano una rappresentazione di oggetti e di ambienti per fornire un contesto per lazione 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 dellambiente in cui si svolgono azioni

12 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 linterfaccia Come lo sceneggiatore non scrive completamente il pezzo teatrale

13 La manipolazione diretta Una rappresentazione continua e consistente delloggetto dinteresse 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

14 Ruolo della manipolazione diretta La manipolazione diretta crea un senso di coinvolgimento diretto ed è la chiave dellinterazione uomo-macchina –Sketchpad, Sutherland 1963 Nel mondo digitale tutto ciò che importa è la rappresentazione, in cui agiscono utenti, oggetti software e elementi dellinterfaccia –Una sorta di WYSIWYG esistenziale Termine coniato allo Xerox PARC per indicare un paradigma per interfacce a manipolazione diretta

15 Creatività e design Quali processi permettono di creare nuovi artefatti? Mimesi Ibridazione Metafora Mutazione …

16 Mimesi

17

18

19

20 Ibridazione Letteralmente: incrociare piante o animali di specie diverse in modo da ottenere ibridi Esempio: lavagna + proiettore lavagna luminosa

21 Ibridazione

22 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, londeggiare 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

23 Metafore comuni nel sw Il secchio di vernice per la funzione di colorazione di superfici. Il pennello per la funzione di colorazione delle linee.

24 Puntamento (input) Linterazione avviene tramite puntamento. Le azioni dellutente (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.

25 Interfaccia WEB | e-commerce AMAZON.COM

26 Interfaccia WEB | e-mail Webmail LIBERO

27 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 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 uninterazione ha uninterfaccia utente. Anche i sistemi meno complessi richiedono un Front End, ovvero una raffigurazione grafica (non solo grafica) che permetta allutente di effettuare delle scelte o semplicemente di fruire un contenuto. Facciamo degli esempi semplici…

28 Interfaccia | Esempi Pagina Web, linterazione avviene su 2 interfacce: il browser, e la pagina stessa (ipertesto, ipermedia, solotesto). Videogame, linterazione avviene su 3 interfacce: il joypad (meccanica, grafica), la console, il front end del gioco (schermata di interazione). Cellulare, linterazione avviene su 2 interfacce: il dispositivo (meccanica, grafica), il software del dispositivo (nel caso della navigazione web o wap, esiste anche una terza interfaccia).

29 Canoni… Linterfaccia 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 linterazione con lutente e di fatto rendono lo strumento, il media, o lapplicazione non correttamente funzionante. Linterfaccia va studiata in modo molto approfondito e non può essere improvvisata.

30 Interfaccia | Fondamenti Le interfacce utente sono legate a canoni e regole molto precise e vengono studiate da discipline indipendenti e complesse come linterazione uomo macchina e la psicologia cognitiva. Linterfaccia ha come obiettivo principale quello di mediare linterazione in modo naturale. Questa funzione è assolta dalla metaforizzazione dellambiente 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.

31 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) Linterfaccia 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).

32 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 alluso delle tecnologie digitale a non trovarsi smarriti allinterno 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).

33 Interfaccia Note Lo studio delle interfacce dei New Media (e in particolare del Web) coinvolge numerosi professionisti e coinvolge discipline come lUsabilità e lErgonomia. Nuovi ruoli emergenti nel processo di progettazione di uninterfaccia: 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 linterazione 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) linterfaccia 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/)

34 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 lutente 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 uninterfaccia (spesso meno bella e semplice di quella del front end. Esistono (da poco) specifici studi sulle interfacce di back end.