Post on 16-Apr-2017
Tecniche di animazione e multimedia – WEB e MOBILE
Lezione 1
Dr. Paolo Casoto, Ph.D.
Docente del corso
Dr. Paolo Casoto
EMAIL:
paolo.casoto@gmail.com
SITO DEL CORSO:
http://caspaolo.blogspot.it/
Per qualsiasi cosa… SCRIVETE, non fatevi problemi
Strutturazione del corso
• 3 ore al venerdì pomeriggio (4°G)
• 3 ore al sabato mattina (3°G)
Lezioni:
– TIPO A: Lezioni di teoria (1,5h) + pratica (1,5h)
– TIPO B: Lezioni di esercitazione (0,5h introduzione, 2,5h esecuzione) CON VOTO
– Alternate A - A - A - B
Regole del corso
• “Io sono l'imperatore e io voglio i gnocchi.” cit. Ferdinando I d'Asburgo
• In classe per la parte di lezione teorica vi chiedo il massimo impegno
• Le esercitazioni comportano un voto, SEMPRE. Chi non le consegna riceve un 3
• L’assenza di almeno 2 voti a quadrimestre e 4 sull’intero anno comporta da parte mia LA BOCCIATURA – Anche se avete la media del 10 e fate gli occhi dolci
alla collega con la sindrome dell’infermierina
Obiettivi del corso
• Indagare la tematica dell’interazione fra l’uomo e la macchina (HMI – Human Machine Interaction)
• Capire quali tecniche utilizzare per realizzare interfacce usabili, cioè facili da usare
• Focalizzare l’attenzione all’interazione in ambiente desktop, web e soprattutto mobile
– Smartphone e tablet
Materiali del corso
Il bellissimo libro “Facile da Usare” del professor Roberto Polillo
Lo trovate qui gratuitamente e legalmente
http://www.rpolillo.it/libri/facile-da-usare/
Materiali del corso
• Slide del docente
– Disponibili sul sito del corso
• Letture consigliate:– Banga – Essential Mobile Interaction Design
– Neil - Mobile Design Pattern Gallery
– Tidwell – Designing Interfaces
LEZIONE 1
Strumenti ed interfacce
• Da millenni gli esseri umani (ed alcuni primati) utilizzano un grande insieme di strumenti per svolgere i compiti che altrimenti:– Sarebbero stati impossibili da realizzare;
– Avrebbero comportato eccessiva fatica;
• Pensate solo all’idea di uccidere un mammut a mani nude…
• Dal coltello all’aratro, dalle armi alle protesi artificiali.
Strumenti ed interfacce
• Ma cosa accomuna tutti questi strumenti ?
– Strumenti molto semplici
– Incapaci di svolgere compiti autonomi
– Utilizzo dell’energia muscolare di umani ed animali
– Necessario un lungo addestramento
• Pensate agli strumenti utilizzati da un falegname o da un fabbro
• Ma nel corso del tempo tutto questo è cambiato radicalmente…
Strumenti ed interfacce
• …verso strumenti dotati di una propria fonte di energia e non governati direttamente dal nostro corpo
Fanno la loro comparsa leve, quadri di comando, cruscotti
Strumenti ed interfacce
• Fino ad arrivare a strumenti sempre più intelligenti, in grado di regolare autonomamente il proprio comportamento.
L’interazione passa mediante interfacce d’uso pensate per
l’interazione stretta fra l’utente e lo strumento
Da funzioni elementari di tipo motorio a complesse funzioni
cognitive
Strumenti ed interfacce
• Grazie all’interfaccia d’uso l’utente ed il sistema DIALOGANO fra loro.
• Ma cosa si intende con il termine interfaccia d’uso (UI) ?– L’insieme di tutte le componenti di un sistema
interattivo che consentono di fornire all’utente INFORMAZIONI e COMANDI necessari all’esecuzione di compiti, anche complessi• Informazioni = OUTPUT da sistema ad utente
• Comandi = INPUT da utente a sistema
Sistemi interattivi
• Tutti i sistemi hardware e software che interagiscono con un ESSERE UMANO per lo svolgimento di un compito
– E’ importante la presenza nella definizione dell’operatore umano
Human Computer Interaction
• La Human Computer Interaction (HCI o Interazione uomo macchina in italiano) è la disciplina che si occupa di progettazione, realizzazione e valutazione di sistemi interattivi.
• Studia come rendere l’interazione più efficace ed efficiente
• Studia diversi modelli di risposta dell’utente alle diverse modalità di interazione
Noi e la HCI
• Ma a questo punto potreste chiedervi: “tutto molto bello prof., ma noi cosa ce ne facciamo?”– Pensateci bene, anche nel vostro lavoro troverete
molteplici settori dove la HCI è fondamentale
– APPLICAZIONI MOBILI
– SITI WEB
– VIDEOGIOCHI
• Vi immaginate un CALL of DUTY dove invece del mouse vi troviate obbligati a sparare utilizzare un volante ???
Utenti e sistema
• Utente e sistema dialogano fra loro per raggiungere il completamento di un compito– L’utente invia comandi al sistema (INPUT)
mediante specifici DISPOSITIVI di input• Provate ad elencarne alcuni che avete incontrato in
questi anni
– Il sistema risponde fornendo informazioni (OUTPUT) mediante specifici DISPOSITIVI di output• Ed anche qui non abbiamo che l’imbarazzo della scelta
Utenti e sistema
• Dispositivi di INPUT– Mani e dita
– Corpo (e.g.: KINECT)
– Voce
– Movimento degli occhi
• Dispositivi di OUTPUT– Tutti quei dispositivi che possono stimolare i nostri
sensi• Vista, udito, tatto
• E forse in futuro anche olfatto e gusto, chi lo sa
Complessità di un sistema
• I sistemi interattivi sono caratterizzati da due diversi tipi di complessità:– Complessità strutturale: quanto è complicato il
sistema al suo interno• E.g.: una clava è semplicissima, un iPhone richiede 1000
ingegneri per la sua realizzazione
– Complessità funzionale: quanto è complesso da usare il sistema:• E.g.: un martello può fare una sola cosa, un iPhone ne
può fare 1000 differenti
Complessità di un sistema
• Le due complessità non sono correlate:
– Possiamo avere cose semplici internamente ma complicatissime dal punto di vista funzionale
• E.g.: coltellino svizzero
– Possiamo avere cose complicatissime internamente ma semplici dal punto di vista funzionale
• E.g.: frullatore
– E poi gli estremi, come la clava (semplice su entrambe le categorie) o l’iPhone (complesso da entrambi i punti di vista)
Complessità di un sistema
• Negli ultimi anni abbiamo assistito all’introduzione di prodotti sempre più complessi da entrambi i punti di vista, pensate agli SMARTPHONE
Internamente complicatissimi
Funzionalmente complicatissimi
Complessità funzionale e semplicità d’uso
• Ma complessità funzionale vuol sempre dire complessità di utilizzo ?
– Vi faccio due esempi di oggetti funzionalmente complessi, voi che ne dite ?
Complessità funzionale e semplicità d’uso
• Usare un attrezzo da falegname è probabilmente più complesso che utilizzare un iPad
• Possiamo quindi definire una terza dimensione per misurare la complessità:
– COMPLESSITA’ di USO
• Complessità come valore rispetto ai 3 assi descritti
Utenti e sistema
• Abbiamo parlato di complessità di un sistema, ma che dire sugli utenti ?
• Sono tutti uguali gli utenti ?• Ovviamente no, gli utenti si differenziano
moltissimo fra loro, ad esempio per:– Età– Lingua– Cultura– Preferenze– Abilità e competenze– Diverse abilità
Utenti e sistema
• Pensate solo a quante diverse tipologie di persone avete visto in questi anni utilizzare uno smartphone
• E per ciascuno di essi un sistema può presentare una complessità di utilizzo differente
– Provate a guidare un’auto con guida a destra e noterete come un sistema a voi noto, come l’auto, possa diventare immediatamente complesso
Utenti e sistema
• Perciò può essere necessario definire interfacce differenti per accedere allo stesso sistema da parte di utenti differenti
– E.g.: ausili per utenti diversamente abili
• Soprattutto per quei sistemi che sono per loro natura intrinsecamente ricchi di funzionalità
– Elevata COMPLESSITA’ FUNZIONALE
Evoluzione della complessità
COMPITO: telefonare
COMPITO: telefonare, ascoltare musica, fare foto, navigare su Internet, etc…
Necessità di una interfaccia di USO in grado di rendere
efficace l’esecuzione di tutti questi COMPITI
Evoluzione della complessità
• Quando i sistemi offrono un insieme eccessivo di funzionalità si parla di IPERFUNZIONALISMO
– Molte delle funzionalità risultano non necessarie per l’utente medio
– Entra in gioco il buon Pareto e la teoria 80-20
• Il 20% delle funzionalità soddisfa dell’80% degli utenti
• Prodotti sempre più complessi da utilizzarsi
• Minor tempo di vita -> Obsolescenza
• Maggior probabilità di errori e malfunzionamenti
Evoluzione della complessità
Quello che non c’è non si
rompe
UI e complessità
• L’obiettivo dell’interfaccia grafica è fungere da FILTRO alla complessità di un sistema
• Grazie alla UI focalizzo l’attenzione dell’utente sulle sole funzionalità necessarie
• Oggi la UI di un sistema interattivo SW è così importante da richiedere oltre il 40% delle linee di codice Qui sicuramente un
po’ meno
UI e computer
• Il mondo dei computer è uno di quelli che nel corso degli anni è cambiato maggiormente per quanto riguarda il modo in cui gli utenti interagiscono– PARADIGMA di INTERAZIONE
• Se lo confrontate al mondo dell’auto o delle bici capirete a cosa mi riferisco– Usiamo un volante fin dall’inizio del 1900
• Una condizione analoga riguarda il mondo dei dispositivi mobili
UI e computer
• All’inizio i primi calcolatori NON erano sistemi interattivi– Il programmatore consegnava il proprio programma
ad un tecnico che lo faceva eseguire alla macchina e stampava i risultati
• Solo in una fase successiva, grazia a sistemi basati su time-sharing (‘60), è emersa la necessità di dare una UI a tali sistemi interattivi
• E quale paradigma utilizzare…semplice, quello più semplice dagli utenti dell’epoca, la macchina da scrivere.
UI e computer
• Terminale scrivente– Paradigma della comunicazione
scritta
– Scrivo al calcolatore quello che voglio esso faccia ed attendo risposta
• Prestazioni modeste
• Ancora oggi in uso nei terminali a linea di comando
UI e computer
• Terminale video, negli anni ‘70– Spazio per molteplici caratteri
– Tastiere più complesse con introduzione di tasti specifici assenti nella macchina da scrivere• Finalizzati alla movimentazione del cosiddetto CURSORE
• Una sorta di indicatore, posizionato mediante tastiera, che serve a rappresentare dove l’utente vuole fornire un input o cosa l’utente vuole selezionare
• Un paradigma innovativo. Sulla macchina da scrivere (meccanica) non è consentito muoversi su/giù o a dx/sx rispetto al foglio
UI e computer
• Passaggio ad una modalità di selezione (con il cursore) e compilazione di campi
• Gran parte dei sistemi gestionali fino ai primi anni ‘90 utilizzavano questo paradigma
• Per semplificare la selezione dei campi «interativi» a video sono state introdotte soluzioni quali:– Bordature;– Sottolineature;– Caratteri visualizzati a doppia intensità (attenzione che
stiamo ancora parlando di schermi monocromatici)
UI e computer
CAMPI editabili SOTTOLINEATI
Tasti speciali per l’attivazione delle
funzioni
Colore bianco per i dati NON EDITABILI
UI e computer
• Negli anni ‘80 un nuovo paradigma di interazione prende piede all’interno dell’informatica
– Necessità di espandere il bacino di utenti ai NON ESPERTI ricerca della semplicità
– Sviluppo tecnologico: schermi con maggiori risoluzionie soprattutto il mouse
• Paradigma della MANIPOLAZIONE DIRETTA
– L’utente opera direttamente sugli elementi a video
– Seleziona, manipola, sposta, preme, …
UI e computer
• In aggiunta al paradigma della manipolazione diretta si presenta la metafora della SCRIVANIA– Cartelle che contengono file
– Icone
– Finestre
• Se osservate bene anche il lessico è quello di un ufficio, contesto al quale il PC era rivolto
• WIMP: Windows, Icon, Mouse, Pointe
Agevolare l’interazione fornendo agli utenti un
ambiente familiare
XEROX STARWindows 2.0
APPLE MACHINTOSH
UI e computer
• Negli ultimi 5 anni il paradigma della MANIPOLAZIONE DIRETTA è divenuto ancora più importante grazie all’evoluzione dei sistemi TOUCH e MULTITOUCH– Sia in ambiente desktop sia in ambiente mobile
– L’utente manipola direttamente l’oggetto sullo schermo, senza passare dal mouse
– Introduzione di gestualità naturale (GESTURE)• Muoviamo gli oggetti sullo schermo in modo analogo a
come muoveremmo gli oggetti nella realtà
UI e computer
• Attenzione però alle limitazioni:
– Performance
– Precisione
– Affaticamento (provate a scrivere un testo su iPad senza tastiera)
UI e computer
• Non a caso entrambi questi sistemi sono stati corredati di tastiera e penna digitalizzatrice
UI e computer
• Un paradigma di interazione alternativo è stato invece introdotto dalla visualizzazione di documenti ipertestuali– Pagine HTML
• Nodi collegati fra loro da link punto il mouse sul link e clicco
• In realtà il paradigma sta andando sempre più nella direzione della manipolazione diretta anche sul web– UI complesse (e.g.: Vaadin)
– Drag & drop, interazione complessa basata su Javascript, animazioni, etc.
Dal computer al mobile
• Da oltre 40 anni uno dei principali filoni diindagine dell’informatica è la ricerca di mobilità– Dispositivi che possano essere utilizzati anche al di
fuori dall’ambiente tipico dell’ufficio– Inizialmente destinata ad una clientela business
• Il mio primo portatile, 11/09/2001, 4.000.000 di lire
– Dal 2009 la principale tipologia di PC sul mercato èportatile
• Anche i paradigmi sono evoluti per supportare lamobilità– Particolarità e criticità specifiche dell’utilizzo in
ambiente mobile
Dal computer al mobile
• E’ evidente che in mobilità alcunevariabili nell’utilizzo dei sistemiinterattivi devono essere considerate:– Schermi di dimensioni ridotte e con
ridotta risoluzione• Vi ricordate i vecchi schermi dei telefoni che
avevano i vostri genitori quando eravate piùpiccoli ?
• Di certo non erano quelli degli smartphoneodierni
• Menù, barre di scorrimento, grandi testate oimmagini sono SUPERFLUE o DELETERIE perl’interazione
Dal computer al mobile
• Schermi di dimensione e rapporto variabile– Progettare una UI che tenga in considerazione questo
aspetto è importante– UI in grado di adattarsi dinamicamente al contenitore
che le ospita• Vedremo come questo sia critico in ambiente Android
• Utilizzo di un paradigma di MANIPOLAZIONEDIRETTA basata su touch e multi-touch– Introdotta in seguito nel mondo del PC– Ottimale per alcune situazioni, complessa per altre
• Doppia modalità (PC – TABLET) introdotta in Windows 10
Dal computer al mobile
• Difficoltà di immissione di testo– Scrivere risulta ancora complesso per questo tipo
di dispositivi, quando non sono predisposte UIdedicate• Confrontate ad esempio il riempimento di una form
all’interno di un sito web acceduto da dispositivomobile con il programma per l’invio degli SMS
– Necessità di strumenti per l’auto-completamentoo la correzione automatica degli errori di battitura• Ma quando mi trovo a dover inserire una password,
magari composta da lettere e numeri ?
Dal computer al mobile
• Contesto fisico di utilizzo– Il dispositivo mobile può essere utilizzato nei
contesti più improbabili
– Tali contesti possono alterare l’efficacia della UI• E.g.: riflesso del sole, ambiente rumoroso, movimento
– Devo considerare questi aspetti quando progettouna UI per dispositivi mobili• L’utente non è seduto davanti ad un PC su una
scrivania, in una situazione di lavoro ottimale !!!
• Privacy, illuminazione, connettività, rumore, spazio, etc.
Dal computer al mobile
Diversi contesti di utilizzo: luci, movimento, attenzione dell’utente condivisa con alte attività
Dal computer al mobile
• Contesto mentale di utilizzo– Il dispositivo mobile può essere mentre si sta facendo
altro• Non possiamo fare affidamento sulla disponibilità
dell’attenzione dell’utente, se non parlando di videogame
• Soglia dell’attenzione limitata nel tempo
– Necessità di interazioni atomiche, veloci ed auto-esplicative
– Pensate a quanti tasti ha un iPhone ed a quanteoperazioni devo fare per passare da una app all’altra• O per tornare alla home
L’evoluzione della specie (96 - 01)Nessuna funzione telefonica
Chiamate ed SMS
Display monocromatici
Pennino
L’evoluzione della specie (03 - 06)Display a colori
Connettività Internet
Fotocamera
Memoria espandibile
Multimedialità
Trackpad
L’evoluzione della specie (08 – 10)Multitouch
ConnettivitàInternetevoluta
Schermi digrandidimensioni
GPS
Semplicità
Migliaia di app…
L’evoluzione della specie (2013)
Display di dimensioni maggiori
Connettività 4G ad alta velocita
Prestazioni paragonabili a quelle di un computer portatile
Centinaia di migliaia di app…
RicapitolandoSCRIVI E LEGGI
SELEZIONA E COMPILA
MANIPOLAZIONE DIRETTA (WIMP)
MANIPOLAZIONE DIRETTA (TOUCH)
PUNTA E CLICCA
Usabilità
• «L’usabilità di un prodotto è il grado con cui esso può essere usato da specifici utenti per raggiungere specificati obiettivi con efficacia, efficienza e soddisfazione in uno specificato contesto d’uso»– Sinonimo di «facilità d’uso»
• Scomponibile lungo 3 assi:– Efficacia
– Efficienza
– Soddisfazione
Usabilità
• Efficacia: misura il «livello di precisione» con cui un utente riesce a raggiungere i propri scopi– Misurato in qualche modo, mediante l’utilizzo di una metrica.
• Efficienza: quante risorse è necessario l’utente spenda al fine di raggiungere gli obiettivi in relazione ad accuratezza e completezza.– Ma come le misuriamo? Tempo di esecuzione, numero di clic o
tasti da premere, numero medio di errori
• Soddisfazione: qui manca una definizione oggettiva, potremmo definirla come «la valutazione positiva del prodotto»– Potremmo misurarla con un giudizio dell’utente– Pensate ai voti delle applicazioni mobili sui vari store
Usabilità
• Non esiste USABILITA’ INTRINSECA
– Dipende sempre da utente, compito ed ambiente
– Pensate al problema di installare un rubinetto per la vostra doccia, quale scegliereste? E per un idrante ?
Usabilità
• Efficace: consente di regolare con precisione la temperatura dell’acqua
• Efficiente: non è necessario effettuare continue prove con il rischio di scottarsi per raggiungere la temperatura ideale
• Soddisfazione: gradimento degli utenti
Ma gli stessi elementi valgono ancora quando cambia il compito (spegnere
un incendio ad esempio) ?
Usabilità
• A volte le tre grandezze possono rivelarsi in contrasto fra loro– Prodotto più «appagante» ma meno
efficiente
– Prodotto più efficiente ma meno efficace
– Prodotto più efficace ma meno appagante
• Provate a pensare al mondo mobile ed a due esempi concreti:– Schermate di sblocco
– Inserimento di numeri / ore
Usabilità
• Una tastiera sarebbe stata più efficiente ma, al tempo stesso:– E’ più appagante ed è divenuto un tratto standard
dell’iPhone (con grafica in questo caso pre-iOS7)– La perdita di efficienza è significativa? Ovvero quante
volte al giorno faccio questa operazione ?– Diverso il caso in cui parlassimo di perdere 10 secondi
su una operazione ripetuta ogni 3 minuti !!!
Per impostare, ad esempio, le 23:55 devo effettuare un sacco di movimenti
con il dito poca efficienza
Interazione
• Ma come interagiscono gli utenti con i sistemi interattivi ?– In generale possiamo parlare di DIALOGO o di
RISPOSTA a stimolazione
1. L’utente fornisce un input (mediante un opportuno dispositivo) in accordo con il compito da svolgere
2. Il sistema elabora
3. Il sistema fornisce un output (mediante un opportuno dispositivo)
4. L’utente valuta le future operazioni da svolgere e riparte dal punto 1
Interazione
• Sembra complesso? – Pensate che tutto questo lo fare decine e decine di volte al
secondo quando giocate ad un videogame1. Interagisco con il joystick per muovere il mio personaggio
verso destra;2. Il sistema elabora l’input e calcola la nuova posizione;3. Il sistema predispone la schermata successiva sullo
schermo e fornisce feedback alla mia mano attivando gli specifici elementi vibranti all’interno del comando;
4. Decido dove spostarmi in seguito.
• Il tutto ogni x millisecondi (se pensate ad un gioco a 30 FPS ad esempio)
InterazioneCompito
INPUT
OUTPUT
Specifici dispositive di input
Specifici dispositive di output
Elaborazione
Si crea un ciclo che dura fino a quando l’utente non ha completato il proprio compito e raggiunto il suo obiettivo
Vale per il PC ma, in generale, per qualsiasi sistema (e.g.: RADIO, RUBINETTO, etc.)
Interazione
• Dal diagramma precedente sembra tutto semplice– Eppure interagire con molti sistemi è
complesso…perché ?
• I problemi per l’utente sono principalmente:1. Come tradurre il proprio obiettivo in una
intenzione (cosa fare) e come trasformarlo in un INPUT
2. Come capire gli OUTPUT del sistema ed elaborarli per poter dal loro un senso
Interazione
1.3
6
Esecuzione - INPUT
Valutazione - OUTPUT
Complessità nel formulare l’azione
Complessità nel comprendere lo
stato
Interazione
1. Definire lo scopo;
2. Definire l’intenzione;
3. Specificare una azione;
4. Eseguire una azione;
5. Percepire la variazione di stato;
6. Interpretare la variazione di stato;
7. Valutare il risultato.
Interazione - Esempio
1. Voglio lavarmi le mani con acqua calda;2. Per farlo devo agire sul miscelatore;3. Ruotando verso sx la leva e tirandola verso
l’alto;4. Eseguire l’azione;5. La leva del miscelatore non riesce a
muoversi oltre. Inizia a scendere un copioso flusso di acqua calda;
6. Sono giunto al fine corsa della leva, nella condizione che mi da massimo flusso e massima temperatura.
7. Ho raggiunto il risultato.
Tutto appare semplice, ma cosa potrebbe andare
storto nel processo ???
Interazione - Esempio
Possibili criticità in fase di esecuzione:– Decido di muovere la leva verso sx in virtù della presenza
di un bollino colorato• Senza avrei dovuto sperimentare le associazioni fra direzione e
temperatura• Analogamente per quanto concerne il flusso, la mia sicurezza
deriva dalla convenzione associata al comportamento del miscelatore
– Cosa posso evincere nel caso in cui non fuoriesca acqua calda ?• Non funziona lo scaldabagno ?• Devo attendere ancora ?• E se non avessi il bollino di cui sopra e dovessi andare per tentativi,
cosa potrei evincere ?
Interazione - Esempio
Qui è facile capire quale manopola è associata a ciascun fuoco, grazie all’icona associata semplifico la fase di azione
Ma se le togliessi ? La manopola più a sx a quale fuoco la associereste ?
Pochi centesimi di euro di vernice per
rendere un prodotto più USABILE
Usabilità ed intuitività
• Ci sono oggetti e sistemi che suggeriscono da soli il loro utilizzo
– Si dice che sono caratterizzati da una buona AFFORDANCE
• Guardiamo alcuni esempi per renderci subito conto delle differenze
Quale vi sembra più intuitivo ?
Usabilità ed intuitività
Quale vi sembra più intuitiva fra queste
maniglie ?
Usabilità ed intuitività
• Una buona affordance consente di ridurre la complessità in fase di esecuzione delle azioni
– E’ più semplice tradurre l’obiettivo in azione
• Pensiamo ad un altro esempio, che in questo caso non è legato ad un aumento della complessità
Quale vi sembra più intuitiva?