Corso 2015 UI - Lezione 1

Tecniche di animazione e multimedia – WEB e MOBILE

Lezione 1

Dr. Paolo Casoto, Ph.D.

Docente del corso

Dr. Paolo Casoto

EMAIL:

[email protected]

SITO DEL CORSO:

http://caspaolo.blogspot.it/

Per qualsiasi cosa… SCRIVETE, non fatevi problemi

http://caspaolo.blogspot.it/

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.


• 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…


• …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


• 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


• 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


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


• 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


• 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


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


• 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


• 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


• 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 ?


• 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.


Diversi contesti di utilizzo: luci, movimento, attenzione dell’utente condivisa con alte attività


• 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 ???


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 ?


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 ?


Quale vi sembra più intuitiva fra queste

maniglie ?


• 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?

Education

Corso 2015 UI - Lezione 1