Tecniche di animazione e multimedia – WEB e MOBILE Lezione 2 Dr. Paolo Casoto, Ph.D.

Presentazione sul tema: "Tecniche di animazione e multimedia – WEB e MOBILE Lezione 2 Dr. Paolo Casoto, Ph.D."— Transcript della presentazione:

1 Tecniche di animazione e multimedia – WEB e MOBILE Lezione 2 Dr. Paolo Casoto, Ph.D.

2 LEZIONE 2

3 Intuitività e feedback Se l’affordance contribuisce a ridurre il divario fra desiderio ed azione, il feedback riduce quello fra reazione e comprensione – Rendo più chiaro il risultato dell’azione – Comprensibile – Specifico Collegabile ad una azione specifica Anche da un punto di vista temporale Avete provato tutti la frustrazione che deriva dall’utilizzare un pc o uno smartphone lento

4 Intuitività e feedback Ecco un esempio di una interfaccia con una buona intuitività ed un buon feedback – Immediatamente traducibile in azione – Feedback immediato Resistenza della leva e sua posizione

5 Intuitività e feedback Ecco un esempio di una interfaccia dove l’affordance ed il feedback sono stati sacrificati nel tempo a favore del design – La domanda degli utenti: posso premere? – Nel passaggio da iOS6 ad iOS7

6 Feedback Nel caso in cui sia necessario aspettare un intervallo di tempo non trascurabile fra azione e feedback è possibile adottare un feedback intermedio – Discreto – Continuo Un esempio di tale feedback nell’ambito di UI desktop e mobile sono le barre di avanzamento

7 Feedback Come utenti questo tipo di UI vi appare sufficiente dal punto di vista del feedback ? O preferireste questo, dove il feedback è più immediate ?

8 Usabilità ed apprendimento Come abbiamo avuto modo di approfondire parlando dei primi strumenti utilizzati dall’uomo, l’apprendimento incide sulla usabilità Evoluzione dell’utente: 1.NOVIZIO 2.PRINCIPIANTE 3.COMPETENTE 4.ESPERTO

9 Usabilità ed apprendimento Il processo di apprendimento può variare da sistema a sistema – Alcuni sistemi sono pensati per agevolare l’utente che si avvicina per la prima volta al sistema In poco tempo l’utente è in grado di svolgere i compiti più elementari Più complesso diventare utenti esperti – Alcuni sistemi sono pensati per l’utente esperto Tempi di apprendimento più lunghi ma con elevata efficacia di utilizzo al termine del processo di apprendimento

10 Usabilità ed apprendimento Utenti OCCASIONALI (APPLICAZIONI MOBILI) – Necessità di bassi tempi di apprendimento – Utilizzo sporadico del sistema, limitato a poche funzionalità – Ridotta necessità di efficacia Utenti CONTINUATIVI (e.g.: GESTIONALE) – Utilizzo prolungato nel tempo Pensate a voi stessi rispetto a Photoshop – Necessità di efficacia – Disponibilità del tempo di apprendimento richiesto O soluzioni ibride…personalizzabili

11 Apprendibilità e Memorabilità Un sistema è «apprendibile» se è possibile impararne con facilità il funzionamento di base Un sistema è «memorabile» se è possibile ricordarsi con facilità il funzionamento di base Spesso questo secondo elemento è più importante – Pensate a sistemi o funzionalità che utilizzate solo sporadicamente – Sistemi utilizzati da utenti anziani – E.g.: Come si programma la caldaia per il passaggio dalla stagione estiva a quella invernale ?

12 Usabilità universale L’usabilità è a tutti gli effetti un concetto relativo – Efficacia, efficienza, soddisfazione e grado di apprendimento raggiunto – In generale l’usabilità di un oggetto è sempre pensata in virtù di CONTESTO D’USO – Specifico o generico UTENTE – Specifico o generico L’usabilità in contesto generico e su utenti generici è definita «USABILITA’ UNIVERSALE» – Tutti i sistemi destinati ad utenti e contesti generici dovrebbero puntare al suo raggiungimento

13 Usabilità universale L’usabilità universale può essere compromessa quando il sistema è chiamato ad operare su contesto o utenti specifici – E.g.: provate ad utilizzare questo dispositivo in ufficio e confrontatelo con il vostro portatile Contesto specifico, utente generico – E.g.: provate ad utilizzare un mouse per mancini Contesto generico, utente specifico

14 Utenti Ma cosa conosciamo dei nostri possibili utenti, cioè di coloro che utilizzano il sistema ? – Attenzione a non fare il grave errore di mettere il sistema al centro ed astrarre dalla figura dell’utente L’ingegneria dell’usabilità pone invece l’utente al centro della progettazione del sistema – User Centered Design – Possiamo osservare un utente a più livelli, considerando la sua persona, il suo comportamento ed il suo ruolo rispetto al sistema A ciascun livello possono emergere diversità fra gli utenti del nostro sistema

15 Utenti ed attenzione Cosa intendiamo con il termine attenzione? – Insieme dei processi cognitivi che ci consentono di filtrare le sole informazioni interessanti in uno specifico momento Ignoriamo alcuni stimoli concentrandoci su altri Provate a «tendere» l’orecchio per cercare di distingue uno specifico suono…state esercitando la vostra attenzione. – Attenzione selettiva: mi concentro su un solo evento – Attenzione divisa: mi concentro su più eventi in contemporanea

16 Utenti ed attenzione I fattori che possono incidere sull’attenzione possono essere: – Esterni (esogeni): qualcuno che ci chiama per nome; – Interni (endogeni): abbiamo un obiettivo, uno specifico compito, che regola la nostra attenzione Tanto più il compito dato all’utente è specifico, tanto più applicherà una attenzione selettiva – Contate quante volte il vostro vicino sbatte le palpebre

17 Utenti ed attenzione Prestare una attenzione divisa è invece molto più complesso – Contate quante volte sbattono le palpebre due vostri compagni E’ oneroso dal punto di vista cognitivo – Poco efficace – Poco efficiente – Poca soddisfazione per l’utente – … di conseguenza bassa usabilità

18 Attenzione divisa Qui serve un enorme sforzo cognitive da parte dell’utente

19 Attenzione divisa Negli ultimi anni grazie ai dispositivi mobili abbiamo allenato in parte l’attenzione divisa – Multitasking – Capacità di compiere più attività in contemporanea Una buona UI deve quindi: 1.Concentrare l’attenzione sulle cose importanti 2.Ridurre le «perdite» di attenzione per eventi non rilevanti 3.Minimizzare i fenomeni di attenzione divisa

20 Attenzione e UI Concentrare l’attenzione sulle cose importanti – Adottare soluzioni che portino l’attenzione dell’utente dove la si desidera Elementi attentivi -> colori, forme, luci

21 La memoria Memoria sensoriale Memoria a breve termine Memoria a lungo termine Input sensoriale Informazione scartata Attenzione CodificaRecupero Informazione non ripetuta - Scartata Ripetizione Anche qui posso perdere dati

22 La memoria a breve termine La memoria a breve termine è in grado di gestire un insieme di 7+/-2 informazioni – Chunk  da 5 a 9 – MA COSA E’ un CHUNK ? Numero Lettera Parola Insieme di lettere … – In pratica può dipendere dal compito Ricordarvi ABCDEFG è più facile che ricordare 12;TWd5

23 La memoria a breve termine La memoria a breve termine è in grado di mantenere le informazioni per circa 20 secondi – E’ necessario ripetere le informazioni per farle permanere in memoria Vi è mai successo di ripetere un numero continuamente per tenerlo a mente !!! – Questo tempo può calare se facciamo altro nel frattempo Provate a tenere a mente un numero di telefono mentre contate le volte in cui un vostro compagno sbatte le ciglia.

24 La memoria a breve termine Come incide la memoria a breve termine sull’usabilità ? 1.Non dobbiamo sovraccaricare la memoria dell’utente superando la regola del 7 E.g.: mostrando una lista di 10 codici alfanumerici 2.Favorire i chunk, utilizzando informazioni familiari per gli utenti 3.Minimizzare il numero di interferenze, che possono ridurre la durata della memoria a breve termine

25 La memoria a lungo termine La memoria a lungo termine ricorda le informazioni per lunghi intervalli di tempo Ha due nature – Dichiarativa: conoscenze esprimibili a parole Semantica: conoscenze generali; Episodiche: conoscenze relative ad episodi specifici – Autobiografiche: nel caso in cui gli episodi siano relativi all’utente stesso – Procedurale: «come fare le cose», ad esempio la procedura necessaria per preparare un caffè

26 La memoria a lungo termine Codifica – Ricordiamo più facilmente le informazioni che incontriamo di più – Ricordiamo più facilmente le informazioni associate fra loro MA CON GRAN PENA LE RECA GIU’ – Ricordiamo più facilmente quando associamo le informazioni ad immagini E su questo principio che si basano i loghi nella pubblicità L’associazione con le immagini è una delle mnemotecniche più diffuse

27 La memoria a lungo termine Recupero – Rievocare: riportare alla mente una informazione precedentemente memorizzata. Chi è il portiere della Juventus ? – Riconoscere: distinguere fra più alternative Il portiere della Juventus è Buffon, Tondo o Pagliuca? – In generale riconoscere è più efficace di rievocare Come si sposa questo concetto con quanto visto fino ad oggi ?

28 La memoria a lungo termine Rievocare: – Utilizzo di un paradigma «Scrivi e Leggi» per l’interazione con il computer Devo ricordarmi la specifica sintassi del comando che voglio far eseguire Riconoscere: – Utilizzo di un paradigma di manipolazione diretta Devo scegliere fra un insieme di elementi (e.g.: pulsanti, icone) quale è più adatto rispetto alle esigenze dell’utente Rievoca  più rapida ma richiede un utente esperto (e.g.: SHORTCUT, devo per forza ricordarmeli)

29 La visione Il nostro occhio alterna ogni secondo istanti in cui è focalizzato ed istanti in cui si muove – Durante il movimento è cieco – 3-4 fissazioni al secondo Le informazioni convergono sulla retina, composta da due tipi di cellule sensoriali: – CONI: sensibili al colore, collocati nell’area centrale della retina (FOVEA) – BASTONCELLI: sensibili alla luce di bassa intensità, collocati nell’area periferica della retina

30 La visione La visione è quindi suddivisa in: – VISIONE CENTRALE: garantita dai coni, consente di identificare colori e dettagli di ciò che stiamo osservando – VISIONE PERIFERICA: non distingue bene i colori (BASTONCELLI) ma riesce a cogliere al meglio il movimento «Vedere con la coda dell’occhio» Quando usiamo la visione centrale, la nostra attenzione è rivolta ai dati acquisiti dai CONI

31 La visione Quando l’utente fissa il puntatore del mouse, la sua attenzione è rivolta espressamente ad una area limitata a ridosso del puntatore – Ma come attiro l’attenzione dell’utente in caso di errore o notifica ? – Come fanno i differenti sistemi operativi? Attivando la visione periferica, grazie all’animazione di elementi grafici collocati Ad esempio quando su OSX le icone posizionate nel DOCK iniziano a muoversi per notificare una variazione alla rispettiva applicazione